AWS Cognito(2)JavaScriptによるクライアントの実装

前回のCognitoのAWS側の設定に続いて、今回はWebコンテンツ側でCognito認証を利用する際のJavascript SDKを用いた実装方法について確認する。AWS Javascript SDKを用いたCognitoの認証はサーバ側にスクリプトを用意する必要がなく、S3などを用いて安価にWebサーバを構築することが可能である。

なお、AWSの認証情報とパブリックログインプロバイダから取得したトークンは、一定期間後に認証切れとなる。Cognitoはトークンの再取得についての機能は提供していないが、多くのパブリックログインプロバイダはリフレッシュトークンを用いたトークンの再取得をサポートしている。

Javascriptによる実装

AWS Javascript SDKを用いたCognitoの認証とデータ同期の実装は以下の通り。

  • AWS Javascript SDK のインポート
  • Amazon Cognito Sync Manager for JavaScript の取得とインポート
    • Cognito Sync(データセットの同期)処理をライブラリで提供している
    • Github からライブラリファイルを取得し、配置する
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.2.6.min.js"></script>
    <script src="amazon-cognito.min.js"></script>
  • Credentials Objectを初期化する
    • AWS.CognitoIdentityCredentialsクラス を利用する
    • オブジェクト初期化には、Cognito Identity Pool IDとパブリックログインプロバイダのトークンを用いる
// Cognito認証を行う
    // 
    // @param {String} provider provider name
    // @param {String} token token
    // @param {Object} data data
    function getIdentityId(provider, token, data){

    		var logins = {};
    		// insert key of associative array in a variable
    		logins[provider] = token;
    		log("You have SUCCESSFULLY logged in. provider: " + provider + " token:" + token);
    		// region (tokyo)
    		AWS.config.region = 'ap-northeast-1';
    		// authentication providers
    		if(provider!=null && token!=null){
    			AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        				// identity pool id
        				IdentityPoolId: 'ap-northeast-1:**********',
        				// provider name and token
        				Logins: logins // object (associative array)
    			});
    		// unauthenticated identities
    		}else{	
    			AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        				IdentityPoolId: 'ap-northeast-1:**********',
    			});
    		}
    		//
    		// 以下に続く
    		//
    	}
  • 作成したCredentials Objectを用いて、Cognito IDを取得する
    • AWS.config.credentials.get()
    • Cognito IDは、 AWS.config.credentials.identityIdで取得できる
		AWS.config.credentials.get(function(err) {
            		if (!err) {
                			//
                			// データセット処理
                			//
            		}else{
                			log("Error Occurred: " + err);
            		}
    		});
  • データの保管と同期を行う( Amazon Cognito Sync Manager
    • syncClient.openOrCreateDataset()
    • dataset.put()
    • dataset.synchronize()
	AWS.config.credentials.get(function(err) {
            		if (!err) {
                			log("Cognito Identity Id: " + AWS.config.credentials.identityId);
    				var syncClient = new AWS.CognitoSyncManager();
    				if(data != null){
    					// open or create dataset
    					syncClient.openOrCreateDataset(provider, function(err, dataset) {
    						$.each(data, function (key, val) {
    							dataset.put(key, val, function(err, record){
                    						log("Put Dataset: { " + key + ": " + val + " }");
    							});
    						});
    						// synchronize dataset
    						dataset.synchronize({
    							onSuccess: function(data, newRecords) {	
                    						log("Syncronize Dataset: { " + provider + " }");
    							},
    							onFailure: function(err) {
                    						log("Error Occurred: " + err);
    							}
    						});
    					});
    				}else{
    					log("NOT Syncronize Dataset: no data");
    				}
    			}else{
    				log("Error Occurred: " + err);
    			}
    		});

Cognitoには各ユーザごとに保存領域が用意されており、各ユーザごとに複数のデータセット(テーブル)を持つことができる。ユーザデータは一旦ローカル上に保管されるため、通信状況には影響しない。ローカルに保存されたデータセットは、明示的に同期メソッドを実行した際にAWSと同期される。同期の際にデータが衝突した場合は、ローカルを優先するかAWSを優先するか選択することができる。詳細は、Amazon Cognito Sync Manager for JavaScriptに記述されている。

AWS Cognito(1)Cognitoの概要

Cognitoとは

Facebookなどのパブリックログインプロバイダ認証を元に、AWSの認証を得ることのできるサービス。このサービスを利用することで、例えば特定のSNSアカウントに紐づけられたユーザにのみS3へのアクセスを許可するなど、AWSリソースへのアクセスを設定することができる。また、各ユーザごとにkey, Value型のデータを保存することが可能であるので、例えばゲームの設定情報やスコア情報などを、デバイス間で共有することやバックアップすることも可能である。

アプリケーションユーザーの認証

  • 対応しているパブリックログインプロバイダ
    • Facebook
    • Google
    • Amazon
    • OpenID Connect
    • Twitter
    • Gigits
  • パブリックログインプロバイダから返されるOAuth や OpenID Connect のトークンを渡すと、Cognito IDと呼ばれる一意のIDが割り振られる
  • Cognito IDによって、AWSのリソースにアクセスすることが可能となる
  • パブリックログインプロバイダ認証は自分で実装する必要がある
    • Cognitoはプロバイダ認証の結果を受けて、プロバイダのトークンの確認やCognito IDとの紐づけを行う
  • AWSリソースへのアクセス権限はIAMで指定する
  • 未認証ゲストをサポートすることもできる

アプリケーションデータの保存

  • 各ユーザのデータ(データセット)は一度ユーザーのローカルデバイスに保存され、その後 AWS クラウドと同期される
    • アプリケーションデータを同期する際は、同期メソッドを明示的に呼び出す必要がある
  • データセットの取得や解析には、Kinesisストリームを利用する

課金

  • ストア容量とデータ同期回数に基づいて課金を行う
  • 1 か月につき 10 GB の同期ストア容量と 100 万回の同期オペレーションまでは無料枠が設定されている

Cognitoの設定

1. Identity Poolを作成する

  • 「Create new identity pool」をクリックする

Create new identity poolをクリック

Identity pools – Amazon Cognito – Amazon Web Services

2. 名称とプロバイダ情報を入力する

  1. 東京リージョンを選択する
  2. identity pool名を入力する
  3. 各種プロバイダ情報を入力する
  4. 登録を実行する

名称とプロバイダ情報を入力
New identity pool

3. ユーザのロールを設定

  • ダッシュボードから「Edit identity pool」をクリック
    • ダッシュボードには、各種データが表示される

ダッシュボード

  • 「Unauthenticated role」の「Create new role」をクリック
  • 「Authenticated role」の「Create new role」をクリック

Create new role

  • ロール名が自動入力されるので、作成ウィザードで登録を行う
    • Unauthenticated role
      Unauthenticated role
      –Authenticated role
      Authenticated role
  • IAMのロール一覧を開き、先ほど作成したロールを選択する
  • 作成済みのロールポリシーを確認する

{
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Action": [
                    "mobileanalytics:PutEvents",
                    "cognito-sync:*"
                ],
                "Resource": [
                    "*"
                ]
            }
        ]
    }

次回は、JavaScriptを用いたコンテンツ側の実装を確認する。