AWS Cognitoでサインアップ・サインインを実装してみました
名前とパスワードを入力すれば簡単に登録できるものを作成しました。
今回はJavaScriptを使って実装してます
S3を使ってホスティングしているので、サーバーレスでの運用が可能です。
Cognitoの設定
ユーザープール
コンソールから、Cogitoへいきます
ユーザープールの管理 をクリック
ユーザープールの作成を行います。
名前は何でも良いです。
今回はtestHacknoteとします
必須の標準属性からすべてチェックを外します。
ここでパスワードの強度を設定します。
デフォルトで進めます。
MFA、メッセージのカスタマイズ、タグ、デバイスはデフォルトで大丈夫ですので、省略します。
メールアドレスアドレス認証などをするときはここを設定しなければいけません。
つぎにアプリクライアントです。
アプリクライアントを追加をクリックします。
アプリクライアント名を適当に入力して、クライアントシークレットを生成のチェックを外します
これを外さなければ、JavaScriptの場合エラーが出ます。
こちらで作成したアプリクライアントIDは後ほど使うので、メモしておきます。(あとでも見れますが)
トリガーも特に何もせず、次へ進みます。
これで確認します。
作成されたユーザープールID と アプリクライアントIdをメモしておきます。
フェデレーティッドアイデンティティ
左上のフェデレーティッドアイデンティティをクリックして、新しいIDプールの作成をクリックします
IDプール名を適当に入力します(この画像ではすでに動作確認のために、testHacknoteを作成していたため、testHacknote2になっています。)
認可されていないID と 基本フローを許可するにチェックを入れます
そして認証プロバイダーのCognitoに先程のユーザープールID と アプリクライアントIdを入力します。
入力したら、プールの作成で完了です。
実装
必要なライブラリのダウンロード
wgetコマンドを使って、ダウンロードします。
AWSのSDKはzipでダウンロード出来ます。
Cognito SDK
https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.min.js
https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js
http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn.js
http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn2.js
https://raw.githubusercontent.com/bitwiseshiftleft/sjcl/master/sjcl.js
http://momentjs.com/downloads/moment.js
AWSのSDK
https://github.com/aws/aws-sdk-js/releases/download/v2.6.6/browser.zip
JQuery
https://code.jquery.com/jquery-3.1.1.min.js
サインアップ・サインインのためにコードを書きます。
https://github.com/t-sakurai816/aws-cognito-test/
詳細はGitHubをご覧ください。
submit.html,login.html,submit_info.js,login_info.jsを観ていただければわかるかと思います。
S3ホスティング
書いたコードをS3にアップロードして、ホスティングの設定を行います。
Amazon S3 で静的なウェブページを公開してみた。を観ていただければ、S3でのホスティングが出来ると思います
動作確認
/submit.htmlでユーザー名とパスワードを入れると登録出来ます
Cognitoのユーザープールからユーザーとグループで確認できます。
現時点ではステータスがUNCONFIRMEDになっているので、ユーザー名をクリックして、ユーザーの確認を押すことでログインが出来る様になります。
SMSやメールアドレスで認証が出来るように設定すればこの確認は不要です。
/login.htmlにアクセスして、認証済みユーザーでアクセスすると、ログイン出来ます。
このあとにページ遷移などをさせて、会員限定ページなどを置けば会員限定のぺージにアクセスさせることが出来ますね。
おわりに
このコードはユーザー名に日本語を使用することも出来ます。
同じユーザー名があれば、弾いてくれます。
面倒な認証機能を作成せずに、実装出来るので便利ですね。
今回はS3でホスティングしているので、サーバーレスでユーザー登録とログインが出来るようになりました。
これにCloudFront, Route53, ACMを組み合わせれば、独自ドメインでHTTPS対応のサイトが作れるようになります。
