Amazon Cognitoとは？ログイン画面の作り方もサンプルコードをまじえて紹介！

2021.01.17

この記事を読むと以下の3つのことがわかります。
・「Amazon Cognit」とは何か
・Cognitoを利用したログイン画面を実装する手順
・Cognitoを利用したログイン画面を実装するサンプルコード

多種多様なWebサービスが公開されている現代、ユーザを認証するためのログイン機能はどのサービスにも必ず必要な機能の1つです。一方で、ログイン操作は作る側にとっても使う側にとっても煩わしいもの。利用者は複数のサービスを利用していることがほとんどで、それぞれのサービスに毎回ログインするのは煩わしいですし、サービスを作る側にとってもログイン機能を実装するのは複雑なコードを書かなければならないので煩わしいです。そこで近年注目されているのがAWSのサービスとして提供されているCognito。今回はCognitoとは何なのかを紹介し、そしてCognitoのチュートリアルに沿ってログイン画面を実装してみます。

Amazon Cognitoとは？

公式ホームページによると、Amazon Cognitoは以下のように紹介されています。

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

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

*注1

要約すると、「Webサービスのログイン機能を簡単に提供できる」ということになります。

Cognitoを利用してログイン画面を実装してみる

それでは、本当に簡単に実装できるのかどうか、Amazonが提供しているチュートリアルを利用して検証してみましょう。*注2
今回はログインする前の段階のユーザ登録するところまでを実装してきます。
文言はそのままチュートリアルのものを使用しています。なお、画面は英語版ですが日本語の場合でもクリックする場所は同じですので参考までにご覧ください。

チュートリアル：ユーザープールの作成

1.Amazon Cognito コンソールに移動します。AWS 認証情報を要求される場合があります。
https://console.aws.amazon.com/cognito/home

2.[ユーザープールの管理] を選択します。

3.[Create a user pool] を選択します。

4.ユーザープールの名前を入力し、[デフォルトを確認する] を選択して、名前を保存します。

5.[確認] ページで、[プールの作成] を選択します。

チュートリアル：IDプールの作成

1.Amazon Cognito コンソールに移動します。AWS 認証情報を要求される場合があります。

2.[Manage Identity Pools (ID プールの管理)] を選択します。

3.[Create new identity pool] を選択します。

4.ID プールの名前を入力します。

5.認証されていないIDを有効にするには、[認証されていない ID] 折りたたみセクションの [認証されていないIDに対してアクセスを有効にする] を選択します。

6.[Create Pool] を選択します。

7.AWS リソースへのアクセスが求められます。

[許可] を選択して、ID プールに関連付けられた 2 つのデフォルトロール (1 つは認証されていないユーザー用、もう 1 つは認証されたユーザー用) を作成します。これらのデフォルトのロールは、Amazon Cognito Sync へのIDプールアクセスを提供します。IDプールに関連付けられたロールは、IAMコンソールで変更できます。

8.IDプールのID番号をメモしておきます。ポリシーを設定して他のAWSサービス(Amazon Simple Storage ServiceやDynamoDBなど)へのアクセスをアプリユーザーに許可する際に、このID番号が必要になります。

テスト用アプリクライアントの作成

ここまでチュートリアルに沿って紹介してきましたが、実装にあたってはアプリクライアントを作成しておく必要があります。Cognitoの管理コンソールへログイン後、先程作成したユーザープールの管理画面を開いて、画面左側のApp Clientsメニューから任意の名前で作成しておいてください。
尚、[Generate client secret]のチェックボックスはOFFにしてください。ここで発行されるクライアントIDは後ほどソースコードに埋め込む必要がありますので、控えておきましょう。

ソースコードの準備

これでAWS側の準備ができましたので、ソースコードを準備します。今回はあくまで機能をテストするだけの目的ですので、必要最低限の要素のみを書き込みます。

読み込むJavaScriptのライブラリはあらかじめダウンロードするなど用意をしておいてください。
ソースコードは以下のとおりです。*注3

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<!-- Javascript SDK-->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 

<script src="js/amazon-cognito-auth.min.js"></script>

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.7.16.min.js"></script> 

<script src="js/amazon-cognito-identity.min.js"></script> 

</head>


<body>

<h1 class="h3 mb-3 font-weight-normal" id="titleheader">Register an Account</h1>

<input type="personalname" class="form-control" id="personalnameRegister" placeholder="Name" pattern=".*" required>
<input type="email" class="form-control" id="emailInputRegister" placeholder="Email" pattern=".*" required>
<input type="password" class="form-control" id="passwordInputRegister" placeholder="Password" pattern=".*" required>
<button id="mainbutton" class="btn btn-lg btn-primary btn-block" type="button" onclick="registerButton()" >Register</button>

<script>



var username;
var password;
var personalname;
var poolData;

function registerButton() {

personalnamename = document.getElementById("personalnameRegister").value; 
username = document.getElementById("emailInputRegister").value;
password = document.getElementById("passwordInputRegister").value; 

poolData = {
UserPoolId : "プールID”,
ClientId : "クライアントID" 
}; 

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

var attributeList = [];

var dataEmail = {
Name : 'email', 
Value : username, 
};

var dataPersonalName = {
Name : 'name', 
Value : personalname,
};

var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);
var attributePersonalName = new AmazonCognitoIdentity.CognitoUserAttribute(dataPersonalName);


attributeList.push(attributeEmail);
attributeList.push(attributePersonalName);

userPool.signUp(username, password, attributeList, null, function(err, result){
if (err) {
alert(err.message || JSON.stringify(err));
return;
}
cognitoUser = result.user;
console.log('user name is ' + cognitoUser.getUsername());
document.getElementById("titleheader").innerHTML = "Check your email for a verification link";

});
}

</script>

</body>

</html>

動作テスト

準備ができたhtmlファイルをブラウザで開くと、以下の画面が表示されます。
名前、メールアドレス、パスワードを入力して「Register」ボタンを押してみましょう。

その後、Cognitoの管理画面に戻りUser一覧をみてみると、入力したメールアドレスをユーザ名として登録されていることがわかります。

この時点ではアカウントステータスが「Unconfirmed」ですので、完全に登録を完了するためには、登録したメールアドレス宛に送られてきているコードを使って、有効化操作が必要です。

以上で、ユーザ登録処理が簡単に実装できることが確認できました。
あくまでテスト実装ですのでパスワードの整合性チェックやユーザの重複チェックはしていません。

尚、今回は新規にユーザを登録する場合を想定して紹介しましたが、更に設定を作り込むことでGoogleやFacebook、Appleなどの他のサービスと連携してユーザ登録や認証機能を提供することも可能です。

IDプール及びユーザープールの削除

それほど難しくない操作なので画面ショットは省略しますが、削除の操作もチュートリアルに従って実施することで簡単にできます。IDプールやユーザープールが不要になったら、それぞれの管理画面に削除ボタンがありますのでクリックして削除してください。尚、ユーザープールを削除する際には画面の指示に従って、テキストボックスに「delete」と入力する必要があります。

まとめ

いかがでしたか？
今回はAmazon Cognitoでログイン画面を実装する手順を解説しました。

ユーザの登録やログイン操作は、現代のサービスには必ず存在する必要不可欠な機能です。Amazon Cognitoを利用することで、これらの処理をとても簡単に実装することができます。ユーザの情報や一覧はAWS上に保存されるので、DB自体を自分で管理する必要がありません。

また、常にアップデートが行われ続けるクラウドサービスですので、セキュアである点も強みといえるのではないでしょうか。

Amazon Cognitoを利用してログイン機能を実装することによって工数の削減にもつながるので、サービス実装の過程ではその分のコストを他の部分に充当することができます。
興味がでてきた方はサンプルコードをコピペするところからはじめて、ご自身のサービスに実装してみてください。今回紹介したチュートリアルの内容をなぞるだけであれば無料で実施することができます。