「Amazon Cognito」を使ってログイン機能を作成する(SNS認証あり)

2019-04-23Amazon, AWS

はじめに

ログイン認証機能を実装するための方法をいくつか調査中。
候補として上がっているのは大きく2つ。

  • "Amazon Cognito"
  • "Firebase"

まずは Cognito の調査からすることにしました。

マニュアルを読みながら設定を進めて見ましたが、文章が多く初見殺しのイメージがあったので、設定時のスクリーンショットを残しておきました。
そちらを共有したいと思います。

Cognito の設定で躓いた方の参考になれば幸いです。

準備

僕はさっとAWSのマニュアルを読みました。
実際に行った作業も以下のマニュアルを元に進めました。

( 書かれている内容通りに進められる方は当エントリを参考にする必要はないかと思います。 )

Cognito アーキテクチャ

概念として認証・認可情報を管理する "ユーザープール""IDプール" というものを理解する必要があります。

いずれの概念もまだ掴みきれていないのですが、 マニュアルを読みつつ、触りつつ理解していこうと思います。
今回触るのは "ユーザープール" のみになります。

設定方法

早速設定を進めていきましょう。
先にも述べたとおり、 AWS が提供してくれているマニュアル通りに進めていきます。

ステップ 1.ユーザープールを使用してユーザーディレクトリを作成する

Amazon Cognito コンソール を開きます。

[ユーザープールの管理] を選択します。

ページの右上にある [ユーザープールを作成する] を選択します。

ユーザープールの名前を入力し、[デフォルトを確認する] を選択して、名前を保存します。

[属性] ページで、[E メールアドレスおよび電話番号] および [E メールアドレスを許可] を選択します。

設定ができたら、ページの下部にある [次のステップ] を選択して属性を保存します。


ページの左側のナビゲーションバーで、[Review (確認)] を選択します。

[Review (確認)] ページの下部で、[プールの作成] を選択します。

ステップ 2.アプリケーションを追加して、ホストされたウェブの UI を有効にする

ページの左側にあるナビゲーションバーで、[全般設定] の [アプリクライアント] を選択します。

[アプリクライアントの追加] を選択します。

アプリに名前を付けます。

設定ができたら「アプリクライアントの作成」をクリックします。

[アプリクライアント ID] を書き留めます。

ここではマスキングされていますが、文字列が表示されますので忘れずにメモしておきましょう! (あとで利用します。)

コンソールページの左側にあるナビゲーションバーで、[アプリクライアントの設定] を選択します。

[Cognito ユーザープール] を [有効な ID プロバイダー] の 1 つとして選択します。

SNS認証はもう少し設定を加えないとプロバイダの選択肢として表示されません。
このタイミングでは「Cognito User Pool」一択になります。

※(注意)上記設定について

設定できたら、 [変更の保存] を選択します。

[ドメイン名] ページで、利用可能なドメインプレフィックスを入力します。

結果、今回のCognito認証ドメインは以下になります。忘れずにメモしておきましょう!(あとで利用します。)

  • https://g-domain.auth.ap-northeast-1.amazoncognito.com

テスト:サインインページを表示してみる

ここまで行けば、Cognitoが提供するサインインページが利用可能となっているはずです。
サインインページのURLは以下のルールとなっています。

  • https://your_domain/login?response_type=code&client_id=your_app_client_id&redirect_uri=your_callback_url

今回作成されたサインインページのURLは以下になります。

ブラウザでアクセスすると以下のようなページが表示されるはずです。
アカウントの新規作成は「Sign up」のリンクから可能です。

アカウントの新規作成とログインが正常に行われると、コールバックページが表示(リダイレクト)されます。URLの後ろには code という識別子が付与されています。
( 以下のURLは実際にリダイレクトされたときのURLですが、一部マスキングしています。 )

  • 例) https://cognito.genzouw.com/callback.html?code=c6f31dc2-8aba-****-****-************

ユーザープールの情報を確認するとユーザが登録されていることがわかります。

ステップ 3.ユーザープールにソーシャルサインインを追加する (オプション)

ここでは Google を使ったソーシャルログインを設定します。

Google Developers ページを開きます。

[CONFIGURE A PROJECT (プロジェクトの設定)] を選択します。

プロジェクト名を入力し、[NEXT (次へ)] を選択します。

プロダクト名を入力し、[NEXT (次へ)] を選択します。

[OAuth client] の設定情報を入力します。

  • [Where are you calling from? (どちらからアクセスしていますか?)] ドロップダウンリストから [ウェブブラウザ] を選択します
  • [Authorized JavaScript origins (承認済みの JavaScript 生成元)] にユーザープールのドメインを入力します。

[CREATE (作成)] を選択します。

  • [クライアント ID] と [クライアントシークレット] は使用しないのでメモしなくても大丈夫です。
  • [API Console] をクリックします。

左のナビゲーションバーで、[認証情報] を選択します。

  • [認証情報を作成] ドロップダウンリストから [OAuth クライアント ID] を選択して、OAuth 2.0 認証情報を作成します。

設定情報を入力します。

※設定内容に注意しましょう!

  1. 「アプリケーションの種類」は「ウェブアプリケーション」とします。
  2. 「名前」は何でも構いません。
  3. 「承認済みの JavaScript 生成元」はユーザープールのドメインを入力します。
  4. 「承認済みのリダイレクト URI」はユーザープールのドメインに /oauth2/idpresponse を付与したものを入力します。

[OAuth クライアント ID] と [クライアントシークレット] を書き留めます。これらは次のセクションで必要になります。

Amazon Cognito コンソール に戻ります。

  1. 左のナビゲーションバーで、[ID プロバイダー] を選択します。
  2. ソーシャルIDプロバイダーとして [Google] を選択します。

前のセクションでソーシャル ID プロバイダーから取得したアプリのクライアント ID とクライアントシークレットを入力します。

  1. 承認スコープprofile email openid を設定します。
  2. [Googleの有効化] を選択します。

[属性マッピング] タブで、次のように最低でも必須属性 (通常は email) のマッピングを追加します。

[アプリクライアントの設定] で、[Google]を認証プロバイダとして追加します。

テスト

先程テストにために表示したサインインページを開いてみます。
[Google]による認証が可能となっているはずです。

ひとこと

スクリーンショットを貼っていくとすごい長いエントリになりました。読むのが大変ですね(汗)。

Cognitoで認証を行い、 code を取得するところまでを設定できました。
あとは code を使って各種アプリケーションにアクセスする部分を作り込まないといけません。

調査を続けます。

2019-04-23Amazon, AWS