Cognitoを使ったソーシャルプロバイダとのID連携（Google）

## はじめに

今回は、Cognitoを使ったID連携の挙動を確認してみます！

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-identity-federation.html

### ID連携とは？

シングルサインオンの方が馴染みあるかもですが、ユーザーが複数のサービスを利用する際に同じ一つのIDだけで利用できる仕組みのことです。

「Xでログイン」みたいなやつですね。

https://cybersecurity-jp.com/security-words/108420

## やってみます！

今回はGoogleアカウントでのログインで検証してみました。

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-social-idp.html

### Google Auth Platformの構成

まずは、Google側の設定をします。
Googleの場合、`Google Auth Platform`の設定が必要みたいです。

初めて利用する場合、以下のような未構成状態なので、画面案内に沿って構成していきます！

![スクリーンショット 2025-05-02 6.09.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/ee47dc0a-5593-4e2e-8d20-895274e519eb.png)


アプリ名とユーザサポートメールアドレスの設定
![スクリーンショット 2025-05-02 6.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/2ec8abf3-0e1b-4b00-adbd-8966b8d6eb0c.png)

対象は今回は`外部`にしておきます。
![スクリーンショット 2025-05-02 6.10.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/72c6cb47-26b6-4073-8ece-e7913675e1d0.png)

連絡先の設定。
![スクリーンショット 2025-05-02 6.11.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/1c9ee48d-b7d3-4a27-adf2-7efbf90c9d38.png)

これで完了。
![スクリーンショット 2025-05-02 6.11.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/a9af962e-6ee7-4d9c-a669-91ec2bf4b749.png)

### データアクセス設定

次に、データアクセスの設定を行います。

ID連携したユーザの情報をどこまで公開するかの設定です。

![スクリーンショット 2025-05-02 6.16.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/1508d242-2fea-4821-884e-bab6ae57243a.png)

対象は以下を選択します。

* `.../auth/userinfo.email`
* `.../auth/userinfo.profile`
* `openid`

![スクリーンショット 2025-05-02 6.18.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/8755c966-d207-4164-99d7-9ee36d011c94.png)

### クライアント作成

次にクライアントを作成します。

クライアントとは、認証サーバーとやり取りをするアプリケーションのことで、ユーザーの代わりに、認証サーバーからの認証と認可の処理を行ってくれます。

![スクリーンショット 2025-05-02 6.19.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/ad02f0b3-db5e-483a-8e34-ebccb03ad414.png)

アプリケーションの種類は`ウェブアプリケーション`を選択し、名前は適当に設定します。

![スクリーンショット 2025-05-02 6.20.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/289bc773-186e-4bb2-851f-4e2ceff3ca54.png)

`承認済みの JavaScript 生成元`及び、`承認済みのリダイレクト URI`は以下の値を設定します。

|項目|設定値|
|--|--|
|承認済みの JavaScript 生成元|https://[ドメイン名].auth.ap-northeast-1.amazoncognito.com|
|承認済みのリダイレクト URI|https://[ドメイン名].auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse|

![スクリーンショット 2025-05-02 6.25.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/f7233bfe-abb7-49ef-9b44-189b2d44583b.png)

ドメイン名は以下で確認できますが、カスタムドメインを使わない場合は、ユーザプールIDを入れることになります。

![スクリーンショット 2025-05-03 3.45.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/518271af-a132-4a60-aef7-b614f89dd743.png)

ここまで作成すると、クライアントIDとクライアントシークレットが作成されるので、これを覚えておきます。（後からも確認可能です。）

![スクリーンショット 2025-05-02 6.25.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/73b71c68-f631-4690-9f47-cfd42a62aef4.png)

これでGC側の設定は完了になります！

### Cognitoの設定

次にCognito側の設定をします。

ユーザプールの`ソーシャルプロバイダーとカスタムプロバイダー`の`アイデンティティプロバイダーの追加`からGoogleを追加します。

GC側で作ったクラアントID及びクライアントシークレットを設定し、許可されたスコープには`profile email openid`を設定しておきます。

![スクリーンショット 2025-05-03 3.54.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/a12e63e7-bb1f-45ab-81b5-c29c4039eb6d.png)

![スクリーンショット 2025-05-03 4.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/b970d6d2-67c2-4de1-b76e-5be98363769d.png)

属性のマッピングの設定が必要な場合、適切な設定をしておきます。

![スクリーンショット 2025-05-03 4.15.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/d0f85b16-e4d8-4021-8520-ef3b08253ea6.png)

最後にクライアントのIDプロバイダーに先ほど作成した`Google`を追加すれば完了です！

![スクリーンショット 2025-05-03 4.17.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/ed3f46c3-850d-4950-ab75-bb1a203e54cd.png)

## 動作確認

マネージドログイン画面を表示すると、`Googleでサインイン`が出てきました。

![スクリーンショット 2025-05-03 4.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/35bc7115-c6d9-4581-ab63-27db69e37472.png)

ログイン操作を進めると、以下のような見慣れた画面が表示され、ログインが成功しました！

![スクリーンショット 2025-05-03 4.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894042/5a9f98ac-f3a6-4b4f-b309-b716accda4e0.png)

IDトークンの中身を見ると、Googleアカウントでログインできてそうです！

```json
{
  "at_hash": "lLfqLkQXnm-mnybTuA6dbQ",
  "sub": "11111111-c011-7004-ef22-444444444444",
  "cognito:groups": [
    "ap-northeast-1_XXXXXXXXX_Google"
  ],
  "iss": "https://cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_NN5Ct2qua",
  "cognito:username": "google_1111111111111111111111",
  "nonce": "8HIZ7ypLB7ZyUHVKsQBGXSwL2kOGj5XxS3ai7lQ5pNNCPDpMjmz4XgHupmiUyHqxjtFVoMPwqCGwOYj9zV34jgvbWjwHCXqCSzp28eHy-fHXbD4MUks1SLb7Msp8r358waoQrOeQUzeaLFpaNnjPbqmSTm_vrnLmpkS8ycuoGOs",
  "origin_jti": "6d7be651-b393-4689-a92a-98ffe7dbc98b",
  "aud": "ar4sjg7u1g1t16cah2rjdddd",
  "identities": [
    {
      "dateCreated": "1745787680798",
      "userId": "1111111111111111111111",
      "providerName": "Google",
      "providerType": "Google",
      "issuer": null,
      "primary": "true"
    }
  ],
  "token_use": "id",
  "auth_time": 1746213920,
  "name": "Satoshi Moriyama",
  "exp": 1746217520,
  "iat": 1746213920,
  "jti": "08b75547-a27d-4828-b5e8-5943163b0bc1"
}
```
## まとめ

簡単にID連携が実装できました！
あとGCを触ることが出来たのが個人的に良かったです！