AWS Cognitoを使ってソーシャルログインを実現する(Google / Facebook / Apple)

# 0. はじめに
AWSのCognitoを使ってアプリのソーシャルログイン機能を実装する機会があったので、設定方法や勘所を残しておきます。
「Google→Facebook→Apple(SignInWithApple)→Cognito」の順に記載していきます。
名前やIDなどマスクせざるを得ない箇所が多いので見づらいと思いますが、なるべく画像を使ってわかりやすく書いていきます。

# 1. Google
GCPコンソールを使って設定していきます。アカウントが必要になります。

## OAuth2.0クライアント（APIとサービス>>認証情報>>OAuth2.0クライアント）
「認証情報を作成」→「OAuthクライアントID」より、OAuth2.0クライアントを作成します。
![スクリーンショット 2021-12-11 13.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/926db49e-dc5f-71ed-3aae-03aeffc0d46c.png)


- 名前  
任意の値を設定します。GCP上で識別するのに使う値なので分かりやすいものであれば何でもOKです。
- 承認済みリダイレクトURI  
`https://{cognitoユーザープールのドメイン}/oauth2/idpresponse`を設定します。<br>
ドメインにはcognitoで設定した値が入ります。デフォルトは「〇〇.auth.{リージョン}.amazoncognito.com」となっています。
![スクリーンショット 2021-12-11 14.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/2c3c11bd-a122-5c5e-72cc-5806862f6a1a.png)

## OAuth同意画面（APIとサービス>>OAuth同意画面）
Googleアカウントを使って会員登録しようとしたユーザーに表示される項目になります。

* アプリ名
* サポートメール
* ロゴ
* アプリドメイン  
ホームページ / プライバシーポリシー / 利用規約
* デベロッパー連絡先
![スクリーンショット 2021-12-11 14.14.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/325c5f4f-3fff-e31a-dba2-305a9a8984f2.png)


# 2. Facebook
[Facebook Developers](https://developers.facebook.com/)上で設定します。
Facebookアカウント、Facebookアプリが必要になります。

## ベーシック設定（設定>>ベーシック）
Facebookを使って会員登録しようとしたユーザーに表示される項目になります。

* 表示名
* 利用規約
* プライバシーポリシーのURL
* ユーザーデータ削除手順のURL
* アプリアイコン
![スクリーンショット 2021-12-11 13.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/64b5bf48-61c8-47d8-8583-b09574b6733c.png)

## Facebookログイン設定（Facebookログイン>>設定）
- 有効なOAuthリダイレクトURI  
`https://{cognitoユーザープールのドメイン}/oauth2/idpresponse`を設定します。<br>
ドメインにはcognitoで設定した値が入ります。デフォルトは「〇〇.auth.{リージョン名}.amazoncognito.com」となっています。
![スクリーンショット 2021-12-11 13.34.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/f11facb9-6837-1136-7ecc-cb88239c274c.png)

# 3. Apple
[Apple Developers](https://developer.apple.com/)で設定します。アカウントが必要になります。

## App ID（Certificates, Identifiers & Profiles>>Identifiers>>App IDs）
DescriptionとBundleIDを入力し、Capabilitiesの中から`SignInWithApple`にチェックを入れます。
ここで`SignInWithApple`に関して特に設定は不要です。

![スクリーンショット 2021-12-14 8.57.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/fc6d844f-ddd8-656d-4226-6cbaa846369a.png)

![スクリーンショット 2021-12-14 8.57.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/b87296a4-d180-9cfb-9322-39b519a945b1.png)



## Service ID （Certificates, Identifiers & Profiles>>Identifiers>>Service IDs）
- AppId  
上記で作成したAppIdを選択します。
- ReturnURLs  
`https://{cognitoユーザープールのドメイン}/oauth2/idpresponse`を設定します。<br>
ドメインにはcognitoで設定した値が入ります。デフォルトは「〇〇.auth.{リージョン名}.amazoncognito.com」となっています。

![スクリーンショット 2021-12-19 14.58.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/858f5f2e-30ae-3aae-a819-c4cf8b22a41a.png)

![スクリーンショット 2021-12-19 14.59.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/122780c8-2e72-1fb4-9ae1-7f4a5aa65f63.png)

## Key（Certificates, Identifiers & Profiles>>Keys）
Sign in with Appleを有効にして作成します。PrimaryAppIDには上述のAppIDを選択します。
作成したKeyはCognitoの設定の際に使うので、ダウンロードして保存しておきます。
![スクリーンショット 2021-12-19 16.58.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/8731155f-c1e8-37d5-d8ef-de7ef42b920c.png)
![スクリーンショット 2021-12-19 16.59.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/e6ea15ae-6c88-1dfc-e5da-d0d8b3109306.png)

# 4. Cognito
## フェデレーション設定（ユーザープール管理>>フェデレーション）
### IDプロバイダー
![スクリーンショット 2021-12-08 14.34.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/5e6663f6-dc94-952d-5e52-2dae6c81953c.png)

- Google
    - アプリID / アプリシークレット  
        上述のGoogleの設定の際に[GCPコンソール](https://console.cloud.google.com/)で作成したOAuth2.0クライアント（APIとサービス>>認証情報>>OAuth2.0クライアント）を設定します。
![スクリーンショット 2021-12-08 15.26.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/abca153c-131d-fac9-d741-724ecf7c8770.png)

    - 承認スコープ  
            「profile, email, openid」を設定します。
- Facebook
    - アプリID / アプリシークレット  
        上述のFacebookの設定の際に[Facebook Developersコンソール](https://developers.facebook.com/)で作成したアプリを使います。ベーシック設定（設定 > ベーシック）に表示されています。
![スクリーンショット 2021-12-08 15.34.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/9dbc464c-0eb7-3cd3-e7b5-2df3c407add7.png)

    - 承認スコープ  
        「public_profile, email」を設定します。
- Apple(Sign in with Apple)
    - チームID  
        [Apple Developers](https://developer.apple.com/)のCertificates, IDs & Profilesで画面の右上に表示されている値を設定します。
![スクリーンショット 2021-12-09 10.24.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/a647748c-b0fc-8a35-468a-e78641913045.png)

    - サービスID  
        上述のAppleの設定の際に作成したServiceIdを設定します。   
[Apple Developers](https://developer.apple.com/)のCertificates, IDs & Profiles>>Identifiers>>Services Idsに表示されています。
![スクリーンショット 2021-12-08 15.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/c1625ae5-7e63-76c1-d353-dbc35b8c2704.png)
    - キーID  
        上述のAppleの設定の際に作成したKeysを設定します。   
[Apple Developers](https://developer.apple.com/)のCertificates, IDs & Profiles>>Keysに表示されています。
![スクリーンショット 2021-12-11 13.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/6a84afd1-c92c-d3bc-915f-e7cba9617c3b.png)
    - プライベートキー  
        AppleDeveloperの設定でKeysを作成した際にダウンロードした.p8ファイルを設定します。
    - 承認スコープ  
        Eメール

### 属性マッピング
![スクリーンショット 2021-12-08 15.46.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264889/f8b36077-da53-0739-011d-cf9facfd07f4.png)  

- Google
    - sub ⇄ Username
    - email ⇄ Email
- Facebook
    - id ⇄ Username
    - email ⇄ Email
- Apple(Sign in with Apple)
    - sub ⇄ Username
    - email ⇄ Email

## アプリクライアント設定（ユーザープールの管理>>アプリの統合>>アプリクライアントの設定）
- IDプロバイダの有効設定  
    Facebook / Google / Apple(Sign in with Apple) / Cognito User Pool