Dev AWSome Day 2018の復習② ～Amazon Cognito編～

Dev AWSome Day 2018の復習②　～Amazon Cognito編～:

前回に続き、「Dev AWSome Day 2018」の復習として、「Amazon Cognito」を勉強し直します。

「Amazon Cognito」とは

シンプルで安全なユーザーサインアップ、サインイン、およびアクセス制御の機能をウェブアプリケーションやモバイルアプリケーションに素早く簡単に追加することができるサービスで、以下の機能があります。

• Amazon Cognito ユーザープール
  
  
  • 認証機能を担当
• Amazon Cognito フェデレーテッドアイデンティティ
  
  
  • 認可機能を担当
• Amazon Cognito Sync
  
  
  • デバイス上のデータとCogntino 間でユーザデータを同期

今回のハンズオンでは「ユーザプール」と「フェデレーテッドアイデンティティ」を使ってみました。

ユーザープールの作成

ユーザープールを利用すると、アプリケーションのユーザを管理し、アプリケーションにサインアップとサインインの機能を追加できます。

早速、ユーザープールの作成の仕方を、手順を追って説明していきます。

1. マネージメントコンソールを開く
2. 「Cognito」を選択
   
   
   
   
3. 「ユーザープールの管理」ボタンをクリック
4. 「ユーザープールを作成する」ボタンをクリック
5. 「プール名」を入力し、「デフォルトを確認する」を選択
6. 「プールの作成」ボタンをクリック
7. 「プールID」を保存（後で使います）

続けて、「アプリクライアント」というものを作成します。

1. 「アプリクライアント」を選択
2. 「アプリクライアントの追加」を選択
3. 「アプリクライアント名」を入力し、「クライアントシークレットを生成」のチェックを外します
   ※今回Webベースのアプリケーションを作成するのですが、Webベースアプリケーションでは、クライアントシークレットはサポートしていないそうです
4. 「アプリクライアントの作成」ボタンをクリック
5. 「アプリクライアントID」を保存（後で使います）

フェデレーテッドアイデンティティの作成

フェデレーテッドアイデンティティを利用すると、認証を受けたユーザに対して、AWS に対してどのような操作が可能かのアクセス制御機能(認可) を追加できます。アクセスコントロールには、IAM ロールが利用されます。

では作成の仕方を、手順を追って説明していきます。

1. 前回の状態から、「フェデレーティッドアイデンティティ」を選択
   ※マネージメントコンソールを開き、「Cognito」を選択した状態です
2. 「IDプール名」を入力し、「認証プロバイダー」を選択して展開し「Cognito」タブを選択、先程保存しておいた「ユーザプールID」と「アプリクライアントID」を入力します
   ※これで認証先に認可が繋がります
3. 「プールの作成」ボタンをクリック
4. 「詳細を表示」を選択して展開し、上の認証済みのアカウントに適用できるIAMロールと、下の認証受けていないユーザに適用できるIAMロールを設定します
   今回は後で設定するため、ここでは何も変更しません
5. 「許可」ボタンをクリック
6. 「ID プールの編集」を選択
7. 「ID プールのID」を保存（後で使います）

アプリケーションでの設定

今回はWebページにログイン画面を表示し、そことCognitoでやり取りをするため、JavaScript用のSDKを使用します。

JavaScript用のSDK の一つとして、ウェブまたはモバイルプラットフォームでクラウド接続アプリケーションを構築する開発者向けの開発ツールとして、AWS Amplifyというものがあり、今回はこれを使用します。

また画面制御は「React」フレームワークを使用します。

こんな感じのログイン画面が表示されます。

Amplifyを利用するためには、まずimportする必要があります。

import Amplify from 'aws-amplify'; 
import { Authenticator } from 'aws-amplify-react'; 
import { amplify_config } from './config' 
 
Amplify.configure(amplify_config); 

次に、Auth、API、および、Strorageモジュールを利用するため、それぞれの設定を記述していきます。

Auth: { 
    identityPoolId: 'us-west-2:ffa58e4e-f1f9-4eef-9187-e0ca1234567', 
    region: 'us-west-2', 
    userPoolId: 'us-west-2_2ROe123456', 
    userPoolWebClientId: 'h21stsu5su3mi91234567' 
}, 
API: { 
    endpoints: [{ 
        name: 'DevAWSomeDayAPI', 
        endpoint: 'https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/prod', 
        region: 'us-west-2' 
    }] 
}, 
Storage: { 
    bucket: 'devawsome-photo-xxxxx', 
    region: 'us-west-2' 
} 

この中のidentityPoolId、userPoolId、および、userPoolWebClientIdに、先ほど控えておいた、IDプールのID、プールID、および、アプリクライアントIDを設定します。

（API、および、Storageは後で設定します）

※実際にCognitoとやり取りしているJavaScriptのコードは、ハンズオン中に見ることはありませんでした

ちゃんとJavaScript（React）から呼び出せるようになると、ログインはもちろんのこと、ユーザ登録もできます。（登録時にメールアドレスを設定し、そこに送られてくるコードを入力して登録完了となります）

まとめ

このあたりから、自分が何をしているのかよくわからないまま手を動かしている状況になってきました。

とりあえずここでは、Cognitoの設定（認証と認可）は理解できました。

ただ、その呼び出し方は結局わからず．．．

JavaScriptとReactの知識が必要な感じです。