Amazon Cognitoを使ったサインイン画面をつくってみる~アクティベーション&サインイン編~

Pocket

前回は、Amazon Cognitoを使ってサインアップ画面を実装しました。

サインアップしたはいいものの、アクティベーション処理をしなければ作成したユーザーは使うことができません。今回の記事では、前回の続きでアクティベーション処理とサインイン処理を実装したいと思います。今回は、HTMLやJavaScriptを用いたクライアントアプリの実装がメインになります。

前回のおさらい

簡単に前回のおさらいをします。サインアップすると、Amazon Cognitoのユーザープールにユーザーが作成されます。ただし、ステータスが「UNCONFIRMED」となっています。

そして、登録したEメールアドレスに検証コードが書かれたメールが送信されてきます。

この検証コードでアクティベーション処理を行い、完了後にはサインインができるようになります。

アクティベーション処理の実装

まずはアクティベーション処理を実装します。まずはアクティベーション画面の実装ですが、必要なJavaScriptライブラリは前回と同じです。

上記のHTMLをブラウザで開くと以下のような画面になります。

今回はEメールアドレスをユーザー名としてアカウント管理しているので、Eメールアドレスがユーザーを一意に特定できる情報となります。アクティベーションでは、Eメールアドレス(ユーザーを一意に特定できる情報)とアクティベーションキーをパラメータとして渡す必要があります。ここで言う「アクティベーションキー」は、先程のおさらいでも出てきた検証コードのことです。(「アクティベーション」という言葉に合わせて、言い方を変えています)

では、次にJavaScriptでアクティベーション処理を実装します。

ユーザープールやプロバイダーの初期化はサインアップ機能を実装したときと同じでOKです。アクティベーションするには、CognitoUser#confirmRegistration関数を呼び出します。アクティベーションに失敗した場合は変数errとしてエラー情報オブジェクトが渡されてくるので、それをもとに成功/失敗を判断します。

それでは動作確認をしてみます。サインアップしてユーザーをつくると、冒頭でおさらいしたとおり、ステータスが「UNCONFIRMED」のユーザーが作成されます。

アクティベーション画面を開き、登録したメールアドレスに送信された検証コードでアクティベーションします。アクティベーション後、再度ユーザーのステータスを確認してみると…

ステータスが「CONFIRMED」に変わります!これでユーザー登録完了です。

サインイン処理の実装

それでは次に、サインイン処理を実装します。まずは画面です。

上記のHTMLをブラウザで開くと以下のような画面になります。

では、次にJavaScriptでサインイン処理を実装します。

ユーザープールやプロバイダーの初期化はアクティベーション機能の実装と同じでOKです。画面で入力されたデータ(ここではEメールアドレスとパスワード)をもとに認証データ(authenticationData、40~43行目)を作成し、CognitoUser#authenticateUser関数を呼び出してユーザー認証します。認証成功時の処理はonSuccess関数(54~64行目)、認証失敗時の処理はonFailure関数(66~71行目)として定義します。

認証に成功すると、Amazon Cognitoから3つのトークンが返されます。それぞれIDトークン、アクセストークン、更新トークンと言い、上記ソース内の変数idToken(55行目)、accessToken(56行目)、refreshToken(57行目)がそれに当たります。それぞれのトークンについて、AWSのサイトでは以下のように説明されています。

  • ID トークンには、name、email、phone_number といった、認証されたユーザーの ID に関するクレームが含まれます。

  • アクセストークンは、認証されたリソースへのアクセスを付与します。

  • 更新トークンには、新しい ID またはアクセストークンの取得に必要な情報が含まれます。

今回はこれらのトークンの詳細については触れませんが、例えばWeb APIの認証にIDトークンを使うなど、別のAWSサービスにアクセスする際の一時的な認証情報としてトークンを使うことができます。

それでは動作確認をしてみます。ブラウザでサインイン画面を開き、登録したユーザーでサインインします。Eメールアドレスとパスワードを入力し、「Sign In」ボタンをクリックします。

現段階では認証に成功しても画面遷移をしない(JavaScript処理を参照)ので画面上では何も起こりませんが、開発者ツールでコンソールに出力されているログを確認すると、前述した3つのトークンが発行されていることが確認できます。(トークンの値はマスクしているので少しわかりにくいかもしれませんが、赤く囲った3つです)

まとめ

前回と今回の記事で、サインアップでユーザー登録するところから、サインインで認証が成功するまでを実装してみました。Amazon Cognitoは、概念や仕組みを理解するのがやや難しいところもありますが、ユーザー登録の仕組みや認証基盤をスピーディに構築できるという点は大変便利だと思います。「AWSのサービスを使ったアプリを作ってみたい」、「やるならサーバーレスでやってみたい」と考えている方は、ぜひ認証基盤としてAmazon Cognitoを選択されてみてはいかがでしょうか。

お問い合わせ先

執筆者プロフィール

Yamazaki Naoko
Yamazaki Naokotdi デジタルイノベーション技術部
社内の開発プロジェクトの技術支援や、新技術の検証に従事しています。主にアプリケーション開発系支援担当で、Java&サーバサイドが得意です。最近は、サーバーレスonAWSを推進しています。
Pocket

関連記事