LINEログイン認証をWebサイトに組み込む

Last updated at 2024-06-07Posted at 2024-04-30

LINEログイン認証をAngularを使ったWebサイトに組み込む手順を解説します。

動作イメージ

LINEログインクライアント ID を取得する

ウェブアプリにLINEログインを組み込むの手順に従い、LINEログインクライアント IDを取得します。

LINE Developer console

👇プロバイダの作成


👇LINEログインチャンネルの作成

👇チャンネルIDとチャンネルシークレットをメモします

👇コールバックURLを入力します

`http://localhost:4200`

Angular 構成の準備

以降の手順は以下記事の内容を前提とします。
Angularのインストール～最小限構成の設定手順

LINE認証の実装

ユーザーに認証と認可を要求する

👇認証リクエストを送信

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=[チャンネルID]&redirect_uri=http%3A%2F%2Flocalhost%3A4200&state=12345abcde&scope=profile%20openid

👇リダイレクトされたURLパラメータから認証トークンを取得します


  ngOnInit(): void {
    
    let tmp_code = this.getParamValue("code");

  }

  getParamValue(key: string): string{
    let ret_value = "";
    if(location.search.substring(1) != ""){
        var pair = location.search.substring(1).split('&');
        for(var i=0;pair[i];i++) {
            var kv = pair[i].split('=');
            if(kv[0] == key){
                ret_value = kv[1];
                break;
            }
        }
    }
    return ret_value;
  }

アクセストークンを発行する

👇認証トークンからアクセストークンを取得する


  ngOnInit(): void {

    let tmp_code = this.getParamValue("code");

    if (tmp_code){
        this.get_auth_code(tmp_code);
    }

  }

  get_auth_code(code_value:string): void{

    let httpHeaders = new HttpHeaders({
      'Content-Type' : 'application/x-www-form-urlencoded',
        });

    let options = {
      headers: httpHeaders,
    };
    const postParam = new HttpParams()
      .set("code",decodeURIComponent(code_value))
      .set("client_id",AppComponent.CLIENT_ID)
      .set("client_secret",AppComponent.CLIENT_SECRET)
      .set("redirect_uri","http://localhost:4200")
      .set("grant_type","authorization_code")

    const url = "https://api.line.me/oauth2/v2.1/token"
    console.log(postParam)
    this.http.post<any>(url, postParam, options).subscribe({
      next:(data) => {
        if("access_token" in data){
          sessionStorage.setItem(AppComponent.ACCESS_TOKEN_SAVE_KEY,data["access_token"]);
          this.access_token = data["access_token"];
        }

        if("refresh_token" in data){
          localStorage.setItem(AppComponent.REFRESH_TOKEN_SAVE_KEY,data["refresh_token"])
        }
      },
      error:(e) =>{
        console.log("NG");
        console.error(e);
      },
      complete: () => {
        console.log("complete");
      }
    })
  }

ユーザー情報を取得する

  buttonClickFunc(): void{

    let httpHeaders = new HttpHeaders({
      'Content-Type' : 'application/json',
      'Authorization' : 'Bearer ' + this.access_token
        });

    let options = {
      headers: httpHeaders,
    };

    const url = "https://api.line.me/oauth2/v2.1/userinfo"

    this.http.get<any>(url, options).subscribe({
      next:(data) => {
        console.log("ok");
        console.log(data);
      },
      error:(e) =>{
        console.log("NG");
        console.error(e);
      },
      complete: () => {
        console.log("complete");
      }
    })


  }