CognitoユーザープールにGoogle認証を追加する手順

# 目次

- [はじめに](#はじめに)
- [この記事で扱うこと](#この記事で扱うこと)
- [この記事で扱わないこと](#この記事で扱わないこと)
- [前提条件](#前提条件)
- [Google認証をCognitoに追加する手順](#google認証をcognitoに追加する手順)
    - [Googleへの設定](#googleへの設定)
    - [Cognitoユーザプールへの設定](#cognitoへの設定)
- [動作確認](#動作確認)

# はじめに

業務でAWS　Cognitoユーザープールの技術検証として、CognitoへのGoogle認証追加を行なったため、備忘録として残します。

# この記事で扱うこと

- Google認証をCognitoに追加する手順

# この記事で扱わないこと

- AWSユーザープールの作成手順及び概要説明等
- Google管理者アカウントの作成方法

# 前提条件

既にユーザプールを作成済みであること、ユーザプールにてEmailの登録を必須としていることが条件となります。
[作り方の参考記事](https://qiita.com/Naoki1126/items/51fc6467157f4e6ee01e)

# Google認証をCognitoに追加する手順

[AWSの公式ドキュメント](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-configuring-federation-with-social-idp.html)に沿って、手順を記載していきます。
Google認証を追加するにあたり、GoogleとAWSそれぞれへの設定追加が必要となります。

## Googleへの設定

### 1.Google管理者ページへの遷移及びログイン

以下のURLに遷移しログインを行う
https://console.cloud.google.com/home/dashboard

### 2.新規プロジェクトの作成

上部のナビゲーションバーより「新しいプロジェクト」を選択し、プロジェクトを作成する
![スクリーンショット 2023-05-02 17.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/d6999fde-3903-76bc-f536-70bd70553888.png)

作成後
![google_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/5aea5601-d1a0-d590-1113-0209688c0cbb.png)

### 3.左側のナビゲーションより「Oauth同意画面」を選択

![スクリーンショット 2023-05-02 17.14.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/7b0ed097-f22d-bb97-4ade-b9f4868f6b6f.png)

### 4.User Type

- 「外部」を選択
![Oauth_create_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/eff05ae5-df0a-d522-e4ab-1b7daf414ce6.png)

### 5.「アプリ登録の編集」
- 「アプリ名」にはGoogle認証時に表示されるアプリ名を入力（基本的には作成したアプリケーション名を入力すれば良い）
- 「ユーザーサポートメール」に自分のメールアドレスを入力
- 「承認済みドメイン」に「amazoncognito.com」を入力
- デベロッパーの連絡先には自分のメールアドレスを入力
![oauth_create3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/6015514c-77ea-9d67-fff1-5287a877edae.png)
![oauth_create2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/91981562-d501-c5ce-c66f-6a7d38fab577.png)

### 6.スコープ

- 「スコープを追加または削除」を選択後、右に表示される項目より以下を選択(CognitoがGoogleより取得する情報を選択する)
    - email
    - profile
    - openid
![oauth_create4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/3b06a533-36a1-2b6d-50b7-262a8b28406d.png)

更新を押した後、間違いがなければ保存して次へを選択

![oauth_create5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/6dc3b059-da82-8084-72e2-50f6d1f1d2e2.png)

### 7.アプリ登録の編集
デフォルトのまま保存して次へを選択
![oauth_create6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/4b9d2c2a-d547-171c-8543-8c850080cc9f.png)


### 8.設定内容の確認

間違いがないことを確認
![oauth_create7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/4aab6322-fc69-21f8-ad35-eb7dfc82753c.png)
![oauth_create8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/0d972d1d-ec04-4049-331f-99265e6584d6.png)

### 9.左側のナビゲーションから「認証情報」を選択

![oauth_create9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/544aa2ea-44a7-cb25-1544-bafcdacfda35.png)

### 10.「認証情報を作成」→「OauthクライアントID」を選択

![oauth_crate10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/199a846f-b74f-b6f8-0cb3-83bae4f07852.png)

### 11.OauthクライアントIDの作成にて設定値を入力

- 「アプリケーションの種類」は「ウェブアプリケーション」を選択
- 「名前」は好きな名前を入力
- 「承認済みのJavaScript生成元」にはCognitoのドメインを入力（詳細は2枚目の画像のCognitoドメインを参照）
- 「承認済みのリダイレクトURI」にはドメイン + oauth2/idpresponseを入力
    - Googleから発行される認可コードのエンドポイントになります
![スクリーンショット 2023-05-02 17.49.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/81175853-7f49-629f-963b-01122906ebe8.png)

![user_pool_id.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/60910a15-e00f-f623-48cf-431b6342ace9.png)


### 12.JSONダウンロード
これにてGoogleでの設定は完了です
クライアントIDとクライアントシークレットはCognitoで使用します。忘れずにJSONをダウンロードしておきましょう
![スクリーンショット 2023-05-02 17.50.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/582b3665-23bc-ad0a-7f1b-b3b19a475fdf.png)

## Cognitoへの設定

### 1.　対象のユーザープール設定画面にて「アイデンティティプロパイダーを追加」を選択
![oauth_cognito1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/12ebe1e1-afbe-a7dc-c13f-71a07fe9ceb1.png)

### 2.アイデンティティプロパイダ−の追加設定

- 「アイデンティティプロパイダー」でGoogleを選択
![oauth_cognito2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/b46866c0-3f57-08fa-c715-befbe8614d68.png)


- クライアントIDとクライアントのシークレットに、Googleで発行したクライアントIDとクライアントシークレットを入力
- 「許可されたスコープ」にはGoogleにて設定した「email profile openid」を記載
- 「Googleとユーザプール間で属性をマッピング」にはユーザープールの属性と、Googleから取得する情報でマッピングする項目を選択
    - Googleから取得したemailが、Cognitoユーザープールにて作成されるユーザ情報のemailとして保存されるようなイメージです
- 入力が完了したら「アイデンティティプロパイダーを追加」を押下
![oauth_cognito3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/a045aea7-5cd1-7cd6-09dd-055cc6b73035.png)


### 3.アプリケーションクライアントのHosted UI編集画面にてIDプロパイダ(Google)の追加

手順2までではまだGoogleがログイン画面に表示されません。
最後に以下の設定をする必要があります。


アプリケーションの統合を選択後、最下部の「アプリケーションクライアント名」から対象のクライアントを選択
![スクリーンショット 2023-05-02 18.26.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/194d7c49-fd3d-7caa-a349-a34a9d22339f.png)
![スクリーンショット 2023-05-02 18.26.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/48f03930-1a74-1e97-fc76-0b25f0cc2595.png)

遷移後「ホストされたUI」の「編集」を選択
![スクリーンショット 2023-05-02 18.29.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/2527898f-da3c-0789-e21d-6dff149949af.png)


IDプロパイダーのプルダウンを選択
![スクリーンショット 2023-05-02 18.31.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/b4b42bad-6342-c866-e8f0-34eeaf9c52db.png)

Googleを選択し、ページ最下部の「変更を保存」ボタンを押下
![スクリーンショット 2023-05-02 18.31.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/6e64da8e-46c3-5874-7ca7-fddee1520cd5.png)

以上で完了です。

# 動作確認
試しにHosted UIを開いてみます。

## Google追加前
![スクリーンショット 2023-05-02 18.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/c38ed762-88bd-7e96-0b2b-4a87230246f1.png)


## Google追加後

無事追加されていることが確認できました。
![スクリーンショット 2023-05-02 18.34.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/7019373a-47c9-3c5b-62a1-a6c4e84e4ebe.png)

## ログインしてみる
お馴染みのGoogle認証画面が表示されました。
![スクリーンショット 2023-05-02 18.36.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/597de5ed-1b3e-0149-9f50-01e5dd161309.png)
アプリケーションへのログインも完了しました。
![スクリーンショット 2023-05-02 18.36.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/038548de-a556-bb1f-a600-6f101ebfdfca.png)

ユーザープールへの登録も確認できました。
![スクリーンショット 2023-05-02 18.39.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661300/21b6f748-82b5-ee27-61a1-f0cbdca0a360.png)

# まとめ

以上がGoogle認証の追加方法です。
私と同じように、細かいことはいいからとにかく追加して技術検証したい！みたいな人の助けになればと思います。
こちらの記事でEmail認証ユーザとGoogle認証ユーザを統合する方法を記載しているので、ご興味あればご覧ください。
https://qiita.com/Naoki1126/items/e6294f0ed189344a5bd7