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

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

## 動作イメージ

<iframe width="560" height="315" src="https://www.youtube.com/embed/g_Y3idyVuJw?si=QnpMQ6DsFAokhnY2" 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>

## Google API クライアント ID を取得する

[Google API クライアント ID を取得する](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid?hl=ja)の手順に従い、**Google API クライアント ID**を取得します。  

👇プロジェクトを作成  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714437921888.png" alt="image" width="70%"/>  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714438158654.png" alt="image" width="70%"/>  

👇認証情報(OAuthクライアントID)を作成  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714439158100.png" alt="image" width="70%"/>

👇同意画面を設定  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714439246178.png" alt="image" width="70%"/>

👇UserType:外部を指定し作成  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714439343256.png" alt="image" width="70%"/>

👇アプリ情報を設定  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714439475242.png" alt="image" width="70%"/>
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714439595303.png" alt="image" width="70%"/>

👇スコープを追加  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714439936895.png" alt="image" width="70%"/>
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714440123320.png" alt="image" width="70%"/>

👇アプリを公開  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714440193097.png" alt="image" width="70%"/>

👇認証情報(OAuthクライアントID)を作成  
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714440286892.png" alt="image" width="70%"/>
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714440535227.png" alt="image" width="70%"/>

👇クライアントID／クライアントシークレットをコピー
<img src="https://websa12.z11.web.core.windows.net/image-data/202404/20240430/1714440682663.png" alt="image" width="70%"/>

## Angular 構成の準備

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

## Google認証の実装

### [Google に認証リクエストを送信する](https://developers.google.com/identity/openid-connect/openid-connect?hl=ja#sendauthrequest)

👇認証リクエストを送信  

```text
https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=[クライアントID]&scope=openid%20email%20profile&redirect_uri=http%3A//localhost%3A4200&nonce=20240308&access_type=offline
```

👇リダイレクトされた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.google.com/identity/openid-connect/openid-connect?hl=ja#exchangecode)

👇認証トークンからアクセストークンを取得する  
※ 認証トークンはdecodeURIComponent関数でURIデコードする必要があります  

```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://oauth2.googleapis.com/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.google.com/identity/openid-connect/openid-connect?hl=ja#obtaininguserprofileinformation)

```ts
  buttonClickFunc(): void{

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

    let options = {
      headers: httpHeaders,
    };

    const url = "https://openidconnect.googleapis.com/v1/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)
- [LINEログイン認証をWebサイトに組み込む](https://docs.saurus12.com/frontend/line_auth)

## 👇参考URL

- [Google でログイン](https://developers.google.com/identity/gsi/web/guides/overview?hl=ja)
- [Google に認証リクエストを送信する](https://developers.google.com/identity/openid-connect/openid-connect?hl=ja#sendauthrequest)
- [認証トークンからアクセストークンを取得する](https://developers.google.com/identity/openid-connect/openid-connect?hl=ja#exchangecode)
- [ユーザー プロフィール情報の取得](https://developers.google.com/identity/openid-connect/openid-connect?hl=ja#obtaininguserprofileinformation)
- [ディスカバリ ドキュメント](https://developers.google.com/identity/openid-connect/openid-connect?hl=ja#discovery)

## 本記事へのリンク

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/d553971e-c22b-bf65-8cee-4ed9100009f7.png" alt="image" width="30%"/>

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

[keywords]  
Googleログイン OAuth Angular

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