2016年9月30日金曜日

AWS Cognito を使ってユーザのサインアップを試してみた

概要

AWS Cognito はユーザ管理やフェデレーションをサポートしてくれるサービスです
今回は Cognito を使ってユーザのサインアップを試してみました

環境

  • Mac OS X 10.11.6
  • AWS Cognito 2016/09/30 時点
  • Apache httpd 2.4.18
  • Google Chrome 53.0.2785.116 (動作確認用)

User Pools の作成

まず User Pool を作成します
Cognito にログインしたページから「Manage Your User Pools」を選択します
try_cognito_login.png

まだ 1 つも User Pool が作成されていないと思います
「Click here to create a user pool.」を選択します
try_cognito_creating_user_pool.png

まずは User Pool の名前を決定します
好きな名前を入力してください
名前を入力したら今回は右側の「Step through settings」を選択してください
こちらを選択すると User Pool の設定を各項目ごとに設定することができます
try_cognito_naming_user_pool.png

で、設定時のポイントは 1 つです
初めの Attributes の設定で email にチェックが入っているのでこれを外してください
try_cognito_setting_user_pool.png

あとは特に気にすることなく Next step していけば OK です
今回は以下のような感じで User Pool が作成されました
try_cognito_created_user_pool.png

一番上の Pool Id は後で使用するのでメモしておいてください

Apps の作成

実際に Cognito を使ってアクセスするアプリを作成します
今回は Cognito を使って認証するためのアプリとユーザをサインアップするための 2 つのアプリを作成します

左メニューから「Apps」を選択したら「Add an app」を選択します
try_cognito_adding_apps.png

今回作成するアプリは「cognito」と「signup_app」にします
作成時のポイントとしては Generate client secret にチェックを入れないようにしてください
入力できたら「Create app」を選択します
try_cognito_naming_apps.png

同じように signup_app も作成しましょう
以下のようになれば OK です
try_cognito_created_apps.png

作成時に発行される App client id は後で使うのでメモしておいてください
これで User Pool の作成は完了です

Federated Identities の作成

次に Federated Identities を作成していきます
User Pool の画面上部に「Federated Identities」へのリンクがあるのでここから移動してください
try_cognito_move_page_fi.png

まだ、Federated Identities は作成されていないと思うので作成していきます
まず、好きな名前を入力し「Enable access to unauthenticated identities」にチェックを入れてください
try_cognito_naming_fi.png

そのすぐ下に「Authentication providers」という項目があるので開きます
この項目の Cognito のタブにある「User Pool ID」と「App Client ID」に先ほど User Pool で作成した cognito アプリの情報を入力します
「User Pool ID」には User Pool 作成時に取得できた Pool Id を入力し「App Cient ID」には cognito アプリ作成時に発行された App client id を入力してください
入力できたら「Create Pool」で OK です
try_cognito_setting_auth_user_pool.png

作成が完了したら「Edit identity pool」から Identity pool ID を確認しておきましょう
これもあとで使用します
try_cognito_confirm_identity_pool_id.png

これで Federated Identities の作成は完了です
アプリから Cognito を使う準備も整いました
では、実際に Javascript のクライアントアプリを作成してみましょう

ワークスペースの作成

今回は Mac 上にインストールした httpd の DocumentRoot 配下で作業していきます

  • cd /Library/WebServer/Documents
  • sudo mkdir cognito
  • cd cognito

各種必要なライブラリのダウンロード

wget で必要なライブラリを取得していきます

サインアップ処理の実装

では実際にコーディングしていきます
ユーザを登録するためのサインアップ画面を実装します

  • cd /Library/WebServer/Documents/cognito
  • vim signup.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>signup</title>
  <script src="js/jsbn.js"></script>
  <script src="js/jsbn2.js"></script>
  <script src="js/sjcl.js"></script>
  <script src="js/moment.js"></script>
  <script src="js/aws-cognito-sdk.min.js"></script>
  <script src="js/amazon-cognito-identity.min.js"></script>
  <script src="js/aws-sdk.min.js"></script>
  <script src='js/jquery-3.1.1.min.js'></script>
  <script src='js/signup.js'></script>
</head>
<body>
<div>
<form>
  <h2>サインアップ</h2>
  <div id="message" style="display:none;"></div>
  <label for="inputUsername" >ユーザー名</label>
  <input type="text" id="inputUsername" placeholder="User name" required autofocus></input>
  <label for="inputPassword">パスワード</label>
  <input type="password" id="inputPassword" placeholder="Password" required></input>
  <br/>
  <input type="button" id="user_add_btn" value="ユーザーを作成する"></input>
</form>
</div>
</body>
</html>

必要な js ファイルを読み込んでユーザ名とパスワードを送信するためのフォームを作成しています

  • vim js/signup.js
AWS.config.region = 'ap-northeast-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
});
AWSCognito.config.region = 'ap-northeast-1';
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
});
var data = {
  UserPoolId: 'ap-northeast-1_xxxxxxxxx',
  ClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
};
var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
var attributeList = [];
var cognitoUser;

$(function() {
  $("#user_add_btn").click(function(e) {
    username = $("#inputUsername").val();
    password = $("#inputPassword").val();
    if(!username || !password) { return false; }
    userPool.signUp(username, password, attributeList, null, function(err, result){
        if (err) {
            console.log(err);
            message_text = err;
            message_class = "alert-danger";
        } else {
            cognitoUser = result.user;
            console.log('user name is ' + cognitoUser.getUsername());
            message_text = cognitoUser.getUsername() + "が作成されました";
            message_class = "alert-success";
        }
        $("#message").text(message_text);
        $("#message").addClass(message_class);
        $('#message').show();
        setTimeout(function() {
          $('#message').fadeOut();
          $("#message").removeClass(message_class);
        }, 5000);
    });
  });
});

この Javascript ファイルが実際に AWS Cognito と通信を行うロジックファイルになります
設定するべき箇所は IdentityPoolId, UserPoolId, ClientId の 3 つです

IdentityPoolId は Federated Identities 作成時に発行された「Identity pool ID」を指定します
UserPoolId は User Pool 作成時に発行された「Pool Id」を指定します
ClientId は User Pool の Apps 作成時に「signup_app」と名付けたアプリの「App client id」を指定します

処理としても簡単で HTML 内のフォームボタンが押されたら jQuery 内で signUp メソッドをコールしているだけです
あとは、結果によって表示する内容を変更しています

これで基本は動作するはずなので httpd を起動してブラウザで http://localhost/cognito/signup.html にアクセスして動作確認してみましょう

動作確認

パスワードのポリシーが

  • 8 文字以上
  • 半角英数字、大文字小文字を含む
  • 半角数字を含む
  • 記号を含む

という条件になっているのでご注意ください
ポリシーをクリアしていないとエラーが返ってくるのでわかると思います

問題なくユーザ登録が完了すると以下のようになります　
try_cognito_signup.png

また User Pool の Users 項目を確認すると登録できたユーザが存在していると思います
try_cognito_signup_ret.png

これで Cognito を使ったユーザのサインアップ処理が完成しました

最後に

Web にあるサンプルが bootstrap やらいろいろとアレンジしているのが多かったのでシンプルな感じのやつを紹介しました

自画自賛ですが、わりとわかりやすい説明ができたかなと思います

今回は単純な認証しか試していませんが、Cognito は Facebook や Google などと連携して初めて効果をはっきするサービスだと思います
また、Federated Identities は IAM のロールとも連携しておりログインしたユーザが制御できる AWS のリソースを設定することもできます

次回は作成したユーザで実際にログインするところをやってみたいと思います

参考サイト

時刻:
ラベル:

1 件のコメント:

登録: コメントの投稿 (Atom)