Amazon Cognitoを使ったサインイン画面をつくってみる~サインアップ編~

Pocket

同じ部署のメンバーとAWSのサービスを使ったWebアプリを開発することになったのですが、どうせやるならサーバーレスでやりたい!サーバーレスかっこいい!という満場一致の可決により、サーバーレスなWebアプリを開発することになりました。

Webアプリと言えば、やはり一番最初の入口はサインイン画面になるわけですが、はて、どうやったらかっこよくできるのか?と考えて調べた結果、どうやらAmazon Cognitoというものが使えそうだということに。画面はHTML/CSS/JavaScriptで開発しようと決めていたのですが、Amazon CognitoはJavaScriptからも使えるとのこと!

ということで、今回はJavaScriptからAmazon Cognitoを使ってみたいと思います。

Amazon Cognitoとは

そもそもAmazon Cognito(コグニート)とは何者なのか?ですが、AWSのサイトでは以下のように説明されています。

Amazon Cognito は、ウェブアプリケーションやモバイルアプリケーションの認証、許可、ユーザー管理をサポートしています。ユーザーは、ユーザー名とパスワードを使用して直接サインインするか、Facebook、Amazon、Google などのサードパーティーを通じてサインインできます。

さらに、Amazon CognitoにはユーザープールIDプールという2つのプールがあり、

ユーザープールは、アプリユーザーのサインアップとサインインオプションを提供するユーザーディレクトリです。ID プールは、AWS の他のサービスに対するアクセスをユーザーに許可します。ID プールとユーザープールは別々に使用することも、一緒に使用することもできます。

とのことです。

私が個人的に気になるのはサインアップ(アカウント作成)ができるという点で、ユーザーの新規登録も簡単にできるかも!と、期待に胸が膨らみます。もちろんサインインもできますが、まずはサインアップを実装してみたいと思います。

ユーザープールの作成

まずはユーザープールを作成します。AWSコンソールにサインインし、サービスから「Cognito」を検索して開きます。開いたら、「ユーザープールの管理」ボタンをクリックします。

次に「ユーザープールを作成する」ボタンをクリックし、作成画面に遷移したら任意のプール名を入力し、「デフォルトを確認する」ボタンをクリックします。

左サイドメニューから「属性」を開き、ユーザープロファイルで管理したい属性を選択します。まずエンドユーザーをどのようにサインインさせるかについては、デフォルトだと「ユーザー名」が選択された状態になっています。今回はEメールアドレスをユーザー名としてアカウント管理したいので、「Eメールアドレスおよび電話番号」を選択し、さらに「Eメールアドレスを許可」を選択します。

これでEメールアドレスは必須項目となったわけですが、それ以外の属性も好きなように追加できます。今回は氏名も管理したいので、「family name」と「given name」を選択します。ちなみにユーザープールの作成後に属性を追加することはできないようなので、この時点で仕様を決めておく必要があります。追加したい属性を選択したら、「次のステップ」ボタンをクリックします。

次に、ポリシーを設定します。今回はパスワードの強度を少しだけ緩めに、特殊文字は要求しないようにしてみました。「変更の保存」ボタンをクリックし、設定を保存します。

次に、左サイドメニューから「アプリクライアント」を開き、「アプリクライアントの追加」リンクをクリックします。各項目に必要事項を入力し、「アプリクライアントの作成」ボタンをクリックします。設定時のポイントは以下2点です。「クライアントシークレットを生成」のチェックを外さないと、JavaScriptからAmazon Cognitoを使った認証をする際にうまくいかないようです。

  • クライアントシークレットを生成: チェックを外す 
  • サーバーベースの認証でサインイン API を有効にする (ADMIN_NO_SRP_AUTH): チェックを入れる 

必要な設定を終えたら、左サイドメニューから「確認」を開き、「プールの作成」ボタンをクリックします。プールが正常に作成されたら、プールIDが発行されるのでメモっておきます。

また、アプリクライアントIDも発行されているのでこちらもメモっておきます。アプリクライアントIDは、左サイドメニューの「アプリクライアント」を開くと確認できます。

これでユーザープール作成完了です!

IDプールの作成

ユーザープールができたら、次はIDプールを作成します。画面上部のヘッダに表示されているリンク「フェデレーティッドアイデンティティ」をクリックし、遷移先の画面で「新しいIDプールの作成」ボタンをクリックします。

IDプールの作成画面で、各項目に必要事項を入力します。

  • 新しいIDプールの作成
    • IDプール名: 任意の名前
  • 認証プロバイダー
    • Cognito
      • ユーザープールID: 作成したユーザープールのプールID
      • アプリクライアントID: 作成したアプリクライアントのアプリクライアントID

入力したら、「プールの作成」ボタンをクリックします。

次の画面で、「詳細を表示」リンクをクリックすると、作成されるロールの情報が表示されます。基本的にはデフォルトでOKで、そのまま「許可」ボタンをクリックします。

「許可」ボタンをクリックして遷移する画面で「IDプールのID」(IdentityPoolId)を確認できるので、これもメモっておきます。これでIDプール作成完了です!

クライアントアプリの作成

Amazon Cognitoの準備ができたので、クライアントアプリを実装したいと思います。まずはサインアップ画面を実装します。JavaScriptからAmazon Cognitoを使用するにあたり必要なJavaScriptライブラリは以下です。

とっても簡易的ですが、上記のHTMLをブラウザで開くと以下のような画面になります。

次に、サインアップ処理を行うJavaScriptを実装します。

入力チェックもほとんど実装していませんが、これでサインアップできるようになりました。ユーザープールID、アプリクライアントID、IDプールのIDについては、それぞれユーザープールやIDプールを作成したときに発行されたIDを設定してください。

「Create Account」ボタンの押下時に呼び出される処理としてsignUp関数を実装しています。ユーザーID(Eメールアドレス)とパスワードに加え、ユーザープール作成時に追加した属性はユーザー属性リスト(attributeList)として指定してあげる必要があります。今回の場合、family_nameとgiven_nameから成る属性リストを生成しています。Name属性に指定する固定値(ここでいう「family_name」や「given_name」)については、こちらをご参考ください。

動作確認

それでは実際に動かしてみます。signup.htmlを開き、各項目を入力し、「Create Account」ボタンをクリックします。

現状のソースでは見た目上何も起こりませんが、ユーザープールの管理コンソール画面を開き、左サイドメニューから「ユーザーとグループ」を開くと…

ユーザーが作成されています!!

しかし、このユーザーのステータスは「UNCONFIRMED」となっており、今のままではまだこのユーザーは使用できません。このユーザーを使えるようにするには、アクティベーション処理を実装する必要があります。実は、ユーザーが作成されたタイミングで、登録したEメールアドレスに検証コードが書かれたメールが送信されており、この検証コードを使用してアクティベーションを行います。

次はアクティベーション処理の実装…と言いたいところですが、長くなってしまったので今回はここまで!次回はアクティベーション処理と、有効化されたユーザーでのサインイン処理を実装したいと思います。

執筆者プロフィール

Yamazaki Naoko
Yamazaki Naokotdi IT技術推進部
社内の開発プロジェクトの技術支援や、新技術の検証に従事しています。主にアプリケーション開発系支援担当で、Java&サーバサイドが得意です。最近は、ブロックチェーンと仲良くなるべく鋭意検証中です。
Pocket

関連記事