AWS SDK for JavaScriptを使ってブラウザーからCognito User Poolsへサインアップしてみた

2016.05.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは植木和樹@上越妙高オフィスです。ゴールデンウィークということで、普段なかなか触る機会のないサービスを使って遊んでいます。

本日は先日発表されたCognito User Poolsを使ってみました。外部の認証基盤を使うことなく、AWSだけでユーザー管理や認証ができる優れものですね。

準備

Cognito User Poolsの作成

User Poolsは上記、諏訪さんのブログを参考に設定しておきます。今回はaws-cliで作成しましたが、aws-cliだと(現時点だと)細かいattributeの設定ができないので、画面から設定した方が良さそうです。

$ cat password_policy.json
{
  "PasswordPolicy": {
    "MinimumLength": 8,
    "RequireUppercase": true,
    "RequireLowercase": true,
    "RequireNumbers": true,
    "RequireSymbols": true
  }
}

$ aws cognito-idp create-user-pool --pool-name mypool --policies file://password_policy.json --alias-attributes preferred_username --region us-east-1

AppsはcognitomyAppの2つを作成しました。

20160504_cognito-userpools-javascript_01

JavaScript実行時に必要なのは次の情報です。

  • リージョン: us-east-1 (現在はVirgnia固定)
  • UserPoolId: UserPool作成後にPool Details画面で確認できます。us-east-1_で始まるIDです。
  • ClientId: UserPoolにAppsを登録するとApp client idとして確認できます。なおAppsを作るときにGenerate client secretのチェックはオフにしてください。

Cognito Identity Poolsの作成

Cognito Identity Poolsは、諏訪さんの別ブログを参考に。

[Amazon Cognito] Cognito の導入方法がより簡単になりました! | Developers.IO

20160504_cognito-userpools-javascript_02

Authentication providersCognitoのタブが増えています。User Pools作成時に控えておいた、UserPoolIdと"cognito" AppsのClientIdを入力しましょう。

またEnable access to unauthenticated identitiesのチェックをオンにするのを忘れずに! チェックがオフだとサインアップ自体ができなくなります。なおUnauthenticated role(未認証時に使われるRoleの権限)はデフォルトでもSignInのアクションは許可されているようです。

JavaScript実行時に必要なのは次の情報です。

  • IdentityPoolId: Identity Pool作成後に"Edit identity pool"の画面から確認できます。 us-east-1:で始まるIDです。

aws-cognito-sdkとamazon-cognito-identity のJavaScriptファイル

さて、あとはJavaScriptを記述するだけなのですが、AWSのドキュメントサンプル通りに書いても「動きません」

この辺はPublic Betaですからね。仕方ないですね。で、解決方法は下記のフォーラムで紹介されています。

つまりAWS SDK for JavaScriptとは別に、amazon-cognito-identity.jsなどいくつかのJavaScrptファイルを用意しないといけないようです。必要なファイルと入手元は aws/amazon-cognito-identity-js で紹介されているので、6つのファイルを入手してください。

  • amazon-cognito-identity.min.js
  • aws-cognito-sdk.min.js
  • jsbn.js
  • jsbn2.js
  • moment.js
  • sjcl.js

サインアップコードと実行結果

サンプルコード

フォーラムでサンプルコードも紹介されていますが、名前空間がAWSAWSCognitoと分かれていたり、IdentityPoolIdをそれぞれ指定しなければいけなかったりとまだまだ開発の真っ最中のようですね。2016/05/04現在の動くコードですが、しばらくしたら非推奨になる可能性が高いです。

実行結果

ユーザー名とパスワードを入力してボタンをクリックすると、

20160504_cognito-userpools-javascript_03

裏でCognitoとやりとりしてユーザーを作成してくれます!

20160504_cognito-userpools-javascript_04

作成したユーザーはマネージメントコンソールで確認することができます。

20160504_cognito-userpools-javascript_05

まとめ

初めてCognito UserPoolsを触ってみましたが、認証基盤を用意しないで良いのはとても楽でいいですね。JavaScript+ブラウザだけで操作ができるので、サーバーいらずなのもお手軽です。早くベータがとれないか心待ちにしましょう。

あと、普段シェルスクリプトばかりで真っ黒い画面ばかり見てて久々にJavaScript触ったので、ムダにJQueryとかBootstrap3とか組み込んでみました。ユーザー作成後にでる緑色のメッセージを数秒後にフェードアウトさせてみたりといろいろ遊んでいます。画面開発は楽しいなぁ。

参考資料