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

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

## 動作イメージ

<iframe width="560" height="315" src="https://www.youtube.com/embed/xUgE9qGvNbE?si=1PFKuYfqCtTo6qy9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

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

[ウェブアプリにLINEログインを組み込む](https://developers.line.biz/ja/docs/line-login/integrate-line-login/)の手順に従い、**LINEログイン クライアント ID**を取得します。  

[LINE Developer console](https://developers.line.biz/console/)

👇プロバイダの作成  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714454738037.png" alt="image" width="70%"/>
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714454847129.png" alt="image" width="70%"/>
👇LINEログインチャンネルの作成  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714455000999.png" alt="image" width="70%"/>
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714455198758.png" alt="image" width="70%"/>

👇チャンネルIDとチャンネルシークレットをメモします
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714455289818.png" alt="image" width="70%"/>
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714455384011.png" alt="image" width="70%"/>

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

<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714455488380.png" alt="image" width="70%"/>  
`http://localhost:4200`  

## Angular 構成の準備

以降の手順は以下記事の内容を前提とします。  
[Angularのインストール～最小限構成の設定手順](https://docs.saurus12.com/frontend/angular)

## LINE認証の実装

### [ユーザーに認証と認可を要求する](https://developers.line.biz/ja/docs/line-login/integrate-line-login/#making-an-authorization-request)

👇認証リクエストを送信  

```text
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パラメータから認証トークンを取得します  

```ts

  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;
  }
```

### [アクセストークンを発行する](https://developers.line.biz/ja/reference/line-login/#issue-access-token)

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

```ts

  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");
      }
    })
  }
```

### [ユーザー情報を取得する](https://developers.line.biz/ja/reference/line-login/#userinfo)

```ts
  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");
      }
    })


  }

```

## 👇関連記事

- [Angularのインストール～最小限構成の設定手順](https://docs.saurus12.com/frontend/angular)
- [Googleログイン認証をWebサイトに組み込む](https://docs.saurus12.com/frontend/google_auth)

## 👇参考URL

- [ウェブアプリにLINEログインを組み込む](https://developers.line.biz/ja/docs/line-login/integrate-line-login/)
- [LINE Developer console](https://developers.line.biz/console/)
- [ユーザーに認証と認可を要求する](https://developers.line.biz/ja/docs/line-login/integrate-line-login/#making-an-authorization-request)
- [アクセストークンを発行する](https://developers.line.biz/ja/reference/line-login/#issue-access-token)
- [ユーザー情報を取得する](https://developers.line.biz/ja/reference/line-login/#userinfo)

## 本記事へのリンク

<img src="https://websa12.z11.web.core.windows.net/image-data/202406/20240607/1717722490658.png" alt="image" width="30%"/>

### [https://docs.saurus12.com/frontend/line_auth](https://docs.saurus12.com/frontend/line_auth)

[keywords]  
LINEログイン OAuth Angular

[LINEログイン認証をWebサイトに組み込む](https://docs.saurus12.com/frontend/line_auth)

更新日:2024年06月07日