AWS CognitoとSlack認証を連携させてみた

# はじめに
AWS CognitoとSlack認証（Sign in with Slack）を連携させたのでメモを残します。
Slack認証は数年前はOpenID Connect準拠していなかったので、Cognitoと連携するには自前でOpenID Providerを用意する必要がありました。しかし、今はOpenID Connect準拠で作られたものがあるので、単体でCognitoと連携できます。

## この記事でわかること
- AWS CognitoとSlackの連携について

## この記事でわからないこと
- Cognitoの詳しい解説
- OpenID Connectの解説
- Cognitoと開発するアプリケーションの連携

## 注意
あくまで自分が作成するアプリケーションとの連携になります。
各設定は環境に応じて一部変更する必要がありますのでご注意ください。

# Slack側設定-1
Slack APIのサイトから「Create New App」をクリック。
https://api.slack.com/apps

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/99cd8d4e-995b-beaa-d956-ca48db28b8ad.png)

自分は「From an app manifest」を使用しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/c971d674-900c-469e-1ad2-018518d82724.png)

認証を実現したいワークスペースを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/29303fda-939d-0571-e9ff-358bbf4edb94.png)

「display_information」の「name」を任意の値で、あとは初期設定のままにしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/68189a57-10ca-0e7a-d8dc-2b51c9fa5a58.png)

Createをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/fdc8b78a-6abf-17ad-6d8e-9e3c0da951c8.png)

そうするとアプリの設定画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/4c32433b-0b0f-c870-107c-0e0527ae9011.png)

下の方にスクロールするとClient IDやClient Secretが表示されています。
Cognitoとの連携で使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/a879993a-5658-36c2-557c-a6d19e2ea499.png)

# Cognito側設定
Cognitoのトップページにアクセスし、「ユーザープールの管理」をクリック。
https://ap-northeast-1.console.aws.amazon.com/cognito/home

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/d057032e-1514-67d8-6c40-9838f3ef0a2a.png)

「ユーザープールを作成する」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/6f5a0e86-7c45-8c29-c63d-720d90dece22.png)

プール名を任意の値で入力し、「デフォルトを確認する」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/32d04f19-8a6e-c3a7-834f-244843ef1cd8.png)

必須の属性やパスワードの設定を変更することができますが、Slack認証を行うのが目的なので今回はスキップ。
「プールの作成」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/c743bbf4-9ac3-ac8b-be76-9d0a482feb48.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/912cb941-cb83-b53a-b56c-537ce5623b47.png)

ユーザープールが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/8cb19b86-d6bf-3c9e-dd7a-8e581d0dd165.png)

サイドバーの「アプリの統合」の「ドメイン名」をクリック。
ドメイン名を使用するか設定できます。
ドメイン名のプレフィックスを任意の値をクリックして、「使用可能かチェック」をクリック。
「このドメインは利用できます」と表示されれば、「変更の保存」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/6e5e6392-682e-9908-4cd1-aba95f1317f6.png)

サイドバーの「フェデレーション」の「IDプロバイダー」をクリックしてください。
Slack認証（Sign in with Slack）はOpenID Connect準拠なので「OpenID Connect」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/5a4b2552-87c9-ca12-963b-b6d3b5fd77c9.png)

以下のように入力してください！
```
プロバイダ名：Slack
クライアントのID:{SlackのClient ID}
クライアントのシークレッット：　{SlackのClient Secret}
属性のリクエストメソッド：　GET
承認スコープ：　今回はprofile email openidとしました
発行者： https://slack.com
```

発行者を入力したら「検出の実行」をクリックして、「openid 設定エンドポイントを正常に取得しました。」と表示されたら「プロバイダーの作成」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/6c1988c4-f779-5180-a113-36a72c2f1432.png)

サイドバーの「全般設定」「アプリクライアント」をクリックし、「アプリクライアントの追加」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/a77896d5-0fe1-81b9-b408-b4515387423b.png)

「アプリクライアント名」を任意の値で設定し、他を一旦デフォルト値のままで、「アプリクライアントの作成」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/36d830bd-d1df-bb4f-a44b-021804bd16e2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/70832f56-a2ec-8c6c-ffd9-0d471d3cbd24.png)

「アプリの統合」「アプリクライアントの設定」をクリック。
「有効なIDプロバイダ」を一旦全て選択してください。

「サインインとサインアウトのURL」では運用したいアプリに応じて設定してください。
- 「コールバックURL」はサインイン後に表示するURL
- 「サインアウトURL」はサインアウト後に表示するURL
今回は両方ともhttps://example.com/とします。

自分が開発中のWEBアプリケーションはSPA構成のWEBアプリです。
「許可されているOAuthフロー」は認可コードフローの「Authorization code grant」を選択します。
運用するアプリに応じて選択してください。

「許可されているOAuthスコープ」は「email」、「openid」、「profile」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/713effe1-11ae-feaa-cbb8-f133f40b558d.png)

サイドバーの「フェデレーション」「属性マッピング」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/5c54f77f-e508-c0b7-4217-07ee0e19a1df.png)

「OIDC属性」をemail、ユーザープール属性を「email」で一旦属性追加してください。
（属性を追加することで、様々なユーザー情報を取得できます）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/00ac6a6e-9c32-b4a5-ca91-f1a5587e3af4.png)

# Slack側設定-2
Slack側の設定に戻ります。
サイドバーの「Features」「OAuth & Permissions」をクリック。
「Redirect URLs」の「Add New Redirect URL」をクリックし、URLを以下の通り追加してください。
```
{Cognitoで作成したドメイン}/oauth2/idpresponse
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/24e45d48-bb68-17a9-9458-f666a8dc7188.png)

下の方にスクロールし、「User Token Scopes」に以下のScopeを追加
- users:read
- users:email
追加したら、上の方に黄色枠で警告が出るので「reinstall your app」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/8ff570e4-4409-f049-896d-13ba48f234c2.png)

「許可する」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/6e12e82e-c26a-02a5-47ab-edb30a6a827c.png)

# 認証する
準備ができたので実際にSlack認証してみます。
Cognitoの「アプリの統合」「アプリクライアントの設定」をクリック。
「ホストされたUI」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/a211657d-3247-c416-512e-c693c0a87305.png)

「Slack」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/0f17ca4b-42f1-c3dd-ffc1-6a9016e20236.png)

「許可する」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/557d2c4b-9a00-cd8b-652a-628a89cbc5ac.png)

コールバックURLに設定したExample.comが表示され、URLにerrorが返ることなく、codeが返ればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/a148ae31-0070-0beb-87dd-1438810fa920.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/276fefd1-28e2-6cc0-0574-c8e87f1972da.png)

Cognitoのユーザーとグループを作成し、自分のアカウントが取得できれば認証成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/e12e26dc-89d0-b3a0-e2ac-d3848b1a9d52.png)

# 最後に
CognitoとSlack認証を連携させることができました。
開発するWEBアプリケーションとCognitoの連携ができたら、その解説記事も書きたいです。

# 参考
OpenID Connectに準拠する前のSlack認証とCognitoとの連携について解説されています。
GoogleやLINEとの連携についても解説があります。

https://blog.linkode.co.jp/entry/2020/03/17/143612