📡
CognitoユーザープールでのGoogle認証設定をわかりやすく解説！
はじめに
AWS Cognitoを活用してGoogle認証を実装する手順を、初心者にもわかりやすく解説します。この記事を読めば、Google認証の設定から実装までスムーズに進めることができます。
全体の流れ
- ユーザプールの作成は作成済みの前提 ※ユーザプールの作成はこちらを参照
- google Oauthの設定
- cognitoの設定
- コードの修正
- ログインの動作確認
2. Googleのプロジェクト作成 & OAuthの設定
1). cloud googleに移動してログインを行う(以下のURL)
👇APIとサービスを選択
2). 「プロジェクト作成」を選択
3). 「プロジェクト名」を入力して「作成」ボタンを押す
4). 「Oauth同意画面」に移動する
5). 「外部」を選択して作成する。
6). アプリ情報の 「ユーザサポートメール」、デベロッパーの連絡情報の「メールアドレス」を入力して、保存して次へを選択
7). 「スコープを追加または削除」を選択して email、 profile、 openidを選択して更新後、保存して次へを選択
8). そのまま保存して次へを選択
9). ダッシュボードに戻る
10). 「認証情報」を選択
11).「認証情報を作成」を選択して「OAuthクライアントＩＤ」を選択する。
12). アプリケーションの種類は「ウェブアプリケーション」を選択
1３). 名前を入力して作成する。
1４). クライアントID、クライアントシークレットは後ほど使用するのでダウンロードしておきます。
3. Cognitoの設定
こちらで設定したユーザプールを使用します。
1). cognitoのユーザプールのトップページに移動して、「ソーシャルプロバイダーと外部プロバイダー」を選択する。
2). 「アイデンティティプロバイダーを追加」を選択する。
3). アイデンティティプロバイダーを追加の設定
- アイデンティティプロバイダーの箇所で「Google」を選択する
- クライアントIDを入力 ※こちらでダウンロードしたjsonファイルから入力します。
- クライアントシークレットを入力
- 許可されたスコープに 「email, profile openid」を入力する
- 「アイデンティティプロバイダーの追加」を選択して完了する
4). 左タブからアプリケーションクライアントを選択する。
5). アプリケーションクライアント名を選択
6). 「ログインページ」を選択して、「編集」を選択
7). 「ID プロバイダー」の 「▼」を選択して「Google」にチェックをいれて、「変更を保存」する。
8). リダイレクトＵＲＬをgoogle側に設定する。
左サイドバー「ドメイン」を選択してドメインに「 /oauth2/idpresponse 」を組み合わせて、承認済みのリダイレクトURIを作成する
たとえば以下のようなＵＲＬになる。
作成したＵＲＬをgoogle認証情報の「承認済みのリダイレクトＵＲＩ」にコピーして保存をする。
4. コードの修正
「 Authenticator 」タグに「socialProviders={['google']} 」を追加する。
function Login() {
return (
<Authenticator
socialProviders={['google'] }
>
上記のコードを追加すると「googleでサインイン」ボタンが表示される。
5. ログインの動作確認
サインインボタンを押すとGoogle認証画面が表示されます。
ログイン成功！
おわりに
これで、AWS CognitoユーザープールにGoogle認証を追加する設定が完了しました。CognitoとGoogle OAuthを統合することで、ユーザーにとって便利なソーシャルログインを提供できます。さらに、セキュリティやUXを向上させるためのカスタマイズも可能です。ぜひ試してみてください！
Discussion