AWS Cognito ユーザープールにGoogleサインイン連携を設定する

## この記事の目的

- Cognito ユーザープールにGoogleサインイン連携を設定
- これによりGoogleアカウント認証を使って独自サービスのログイン制御を実現できます

## 👇これより先は下記記事の内容を前提とします

- [AWS Cognito ユーザープールを認証制御に利用してLambda関数を呼び出す](https://docusaurus.plant11.com/AWS/cognito_auth)

## Cognitoドメインの取得

- 後で必要になるので、Cognitoの設定画面からCognitoドメインを取得します。
![image](https://user-images.githubusercontent.com/38905609/178088612-7249f843-25c2-4877-9f5e-02e73a5bc1ac.png)

## ソーシャルIDプロバイダーの追加

- [Google クラウドプラットフォームコンソール](https://console.cloud.google.com/home/dashboard)にサインインします。
- プロジェクト選択を表示します。
![image](https://user-images.githubusercontent.com/38905609/178088943-5dfe19ec-048b-4a71-8993-0432c7f6158a.png)

- 新しいプロジェクトを選択します。
![image](https://user-images.githubusercontent.com/38905609/178089005-ef6db2fa-844b-4571-ad58-dc5262127dc1.png)

- プロジェクト名を指定してプロジェクトを作成します。
![image](https://user-images.githubusercontent.com/38905609/178089073-ca793d03-72b0-4bf0-a32e-af06d5a3d6bf.png)

- 作成したプロジェクトを選択し、APIとサービスからOAuth同意画面を指定します。
![image](https://user-images.githubusercontent.com/38905609/178089126-e469f01f-cf00-4316-bac9-9a9c36ce6d28.png)

- User Type に外部を指定し、作成を実行します。
![image](https://user-images.githubusercontent.com/38905609/178089182-13d6f091-96d6-410f-9063-733b8d583db9.png)

- スコープに email profile openid を指定します。
![image](https://user-images.githubusercontent.com/38905609/178089282-6baa5009-be6a-4291-8d99-e0bc8df08037.png)

- 認証情報を作成から、OAuthクライアントIDを選択します。
![image](https://user-images.githubusercontent.com/38905609/178089374-f2a29220-bdbd-48df-ac82-aee075144ec7.png)

- アプリケーションの種類にウェブアプリケーションを指定します。  
- 承認済のJavaScript生成元に上記[Cognitoドメインの取得]で取得したURLを指定します。  
- 承認済のリダイレクトURLに上記[Cognitoドメインの取得]で取得したURLに続けて[`/oauth2/idpresponse`]を指定します。
![image](https://user-images.githubusercontent.com/38905609/178089520-cab568ef-27ca-4815-929e-67997b4b0ed2.png)

- OAuthクライアントのクライアントIDとクライアントシークレットを取得します。
![image](https://user-images.githubusercontent.com/38905609/178089685-385ef868-e959-43f3-a1a0-99efb8d636c8.png)

- Cognitoユーザプール設定からアイデンティティプロバイダーを追加を選択します。
![image](https://user-images.githubusercontent.com/38905609/178089840-b53ea310-a6c8-405a-a86f-a1ae59d4c45e.png)

- アイデンティティプロバイダーにGoogleを指定します。
![image](https://user-images.githubusercontent.com/38905609/178089896-46a9e6b4-66b6-4323-ac39-141c0a9945b0.png)

- クライアント IDに上記OAuthクライアントのクライアントIDを指定します。
- クライアントのシークレットに上記OAuthクライアントクライアントシークレットを指定します。
- 許可されたスコープに[`profile email openid`]を指定します。
- Google属性にemailを指定します。
![image](https://user-images.githubusercontent.com/38905609/178089995-0b3539cb-3cdb-4894-b53e-0359c5b7ac32.png)

- Cognitoユーザプールのアプリケーションの統合タブを選択します。
![image](https://user-images.githubusercontent.com/38905609/178090085-e77c8995-e393-44cd-b485-07775242b6fa.png)

- アプリケーションクライアントを選択します。
![image](https://user-images.githubusercontent.com/38905609/178090125-557234af-b5a1-4883-92ea-faedd709591a.png)

- ホストされた UI の編集を選択します。
![image](https://user-images.githubusercontent.com/38905609/178090175-28926db7-4cbc-4d32-afbb-783d867583db.png)

- IDプロバイダーでGoogleを選択します。
![image](https://user-images.githubusercontent.com/38905609/178090241-c43c162f-0dba-475e-be21-e9c4ebf6fc52.png)
![image](https://user-images.githubusercontent.com/38905609/178090280-88e926c5-a6d0-428b-914c-3b9ff74ef874.png)

- 変更を保存します。
![image](https://user-images.githubusercontent.com/38905609/178090308-f3ff820a-b82a-4b9c-8d12-927158bd5213.png)

## 動作確認

- Googleログインがログイン画面に追加されます。
![image](https://user-images.githubusercontent.com/38905609/178090360-a834f104-0b55-4917-a3cd-3b9644e11c7d.png)

## 👇前提記事

- [AWS Cognito ユーザープールを認証制御に利用してLambda関数を呼び出す](https://docusaurus.plant11.com/AWS/cognito_auth)

## 👇関連記事

- [AWS Cognito ユーザープールにLINEサインイン連携を設定する](https://docusaurus.plant11.com/AWS/cognito_line)

## 👇参考URL

- [Google クラウドプラットフォームコンソール](https://console.cloud.google.com/home/dashboard)
- [ユーザープールへのソーシャル ID プロバイダーの追加](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-social-idp.html)