メニュー
Amazon Cognito
開発者ガイド (Version 最終更新日: 2017 年 8 月 26 日)

チュートリアル: JavaScript アプリのユーザープールを統合する

このチュートリアルでは、JavaScript 用 Amazon Cognito SDK を使用して、ユーザープールの使用を開始できます。

ステップ 1: コンソールを使用して JavaScript アプリのユーザープールのコンソールを作成する

以下の手順では、ユーザープールを作成してアプリで使用する方法を説明します。この手順では、ユーザープール ID およびアプリケーション クライアント ID を作成します。これらの設定のカスタマイズについては、「AWS マネジメントコンソールでの Amazon Cognito ユーザープール設定ステップ」を参照してください。

アプリのユーザープールを作成するには

  1. Amazon Cognito コンソールにサインインします。

  2. [Manage your User Pools] を選択します。

  3. [Create a User Pool] を選択します。

  4. [Pool name] で、プールの名前を入力して [Review defaults] を選択します。これにより、デフォルト設定でプールが作成されます。

  5. 左のナビゲーションペインから、[Attributes] を選択し、必要な属性とエイリアスとして使用する属性を指定します。次の属性を設定した後、プール内のユーザーがメールアドレスを確認すると、それらのユーザーは自分のユーザー名またはメールアドレスを使用してサインインできます。

    1. [email] で、[Required] と [Alias] を選択します。

    2. [phone number] で、[Required] と [Alias] を選択します。

    3. [given name] で、[Required] を選択します。

    4. [Save changes] を選択します。

  6. 左のナビゲーションペインから、[Policies] を選択してパスワードポリシーを指定します。このチュートリアルでは、デフォルト設定を使用します。

  7. 左のナビゲーションペインから、[Verifications] を選択します。このページでは、プール内のユーザーに送信されるメッセージをカスタマイズして確認コードを配信できます。このチュートリアルでは、デフォルト設定を使用します。

  8. 左のナビゲーションペインから、[Apps] を選択し、[Add an app] を選択します。ユーザープールに複数のアプリクライアントを作成し、プラットフォームごとに 1 つのアプリを作成できます。

  9. [App name] に、アプリの名前を入力します。[Generate client secret] チェックボックスがオフになっていることを確認してから、[Set attribute read and write permissions] を選択します。書き込み権限が必要な属性を選択します。必要な属性は、常に書き込み権です。

    注記

    Amazon Cognito JavaScript SDK はアプリのクライアントシークレットを使用しません。アプリのクライアントシークレットとともにユーザープールのアプリのクライアントを設定する場合は、SDK が例外をスローします。

  10. [Create app] を選択し、[Save changes] を選択します。

  11. 左のナビゲーションバーから、[Review] を選択して [Create pool] を選択します。

  12. プール ID とクライアント ID をメモします。左のナビゲーションバーにある [Apps] にアプリのクライアント ID が表示されます。

ステップ 2: アプリケーションにユーザープールオブジェクトを作成する

ユーザープールオブジェクトを作成するには、ステップ 1 で取得したプール ID およびクライアント ID が必要です。以下の例では、CognitoUserPool オブジェクトを作成する方法を示します。JavaScript SDK はアプリのクライアントシークレットをサポートしていません。アプリのクライアントシークレットとともにユーザープールのアプリのクライアントを設定する場合は、SDK が例外をスローします。

Copy
AWSCognito.config.region = 'us-east-1'; var poolData = { UserPoolId : '...', // your user pool id here ClientId : '...' // your app client id here }; var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData); var userData = { Username : '...', // your username here Pool : userPool };

ステップ 3: アプリ用にユーザーをサインアップする

ユーザープールオブジェクトを作成した後に、ユーザーはアプリにサインアップすることができます。ユーザー情報は Web UI を通して集められ、signUp 呼び出しで渡された CognitoUserAttribute オブジェクトを入力するのに使用できます。

Copy
var attributeList = []; var dataEmail = { Name : 'email', Value : '...' // your email here }; var dataPhoneNumber = { Name : 'phone_number', Value : '...' // your phone number here with +country code and no delimiters in front }; var attributeEmail = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataEmail); var attributePhoneNumber = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserAttribute(dataPhoneNumber); attributeList.push(attributeEmail); attributeList.push(attributePhoneNumber); var cognitoUser; userPool.signUp('username', 'password', attributeList, null, function(err, result){ if (err) { alert(err); return; } cognitoUser = result.user; console.log('user name is ' + cognitoUser.getUsername()); });

ステップ 4: アプリ用のユーザーを確認する

サインアップの後で、SMS または電子メールで送られたコードを入力してサインアップを確認します (ユーザープールの設定に基づく)。または、PreSignUp AWS Lambda 機能を使用して自動的にユーザーを確認できます。サインアップを確認するには、ユーザーが受け取るコード (次の例では「123456」) を収集し、次のように使用する必要があります。

Copy
cognitoUser.confirmRegistration('123456', true, function(err, result) { if (err) { alert(err); return; } console.log('call result: ' + result); });

登録コードは、cognitoUser オブジェクトの resendConfirmationCode メソッドを使用して、再送信することができます。これは認証されていない呼び出しで、ユーザー名、クライアント ID およびユーザープール情報のみ必要です。

ステップ 5: ユーザーをアプリにサインインする

確認済みユーザーはサインインしてセッションを取得します。セッションには、ユーザークレームを含む ID トークン、認証された呼び出しを内部的に実行するために使用されるアクセストークン、各時間で有効期限が切れた後にセッションを更新するために内部的に使用される更新トークンを格納します。トークンの詳細については、ユーザープールのトークンの使用 を参照してください。サインインが成功する場合、onSuccess コールバックが呼び出されます。サインインが失敗した場合、onFailure コールバックが呼び出されます。サインインに MFA が必要な場合、mfaRequiredコールバックが呼び出され cognitoUser オブジェクトの sendMFACode を呼び出す必要があります。受け取った認証コードはユーザーに渡す必要があり、その後ユーザーがサインインします。

Copy
var authenticationData = { Username : '...', // your username here Password : '...', // your password here }; var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData); var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData); cognitoUser.authenticateUser(authenticationDetails, { onSuccess: function (result) { console.log('access token + ' + result.getAccessToken().getJwtToken()); }, onFailure: function(err) { alert(err); }, mfaRequired: function(codeDeliveryDetails) { var verificationCode = prompt('Please input verification code' ,''); cognitoUser.sendMFACode(verificationCode, this); } });

ステップ 6: ユーザーの詳細を取得する

サインインの後ユーザーが、ユーザー属性の取得、ユーザー属性の検証 (検証されていない E メールアドレスなど)、ユーザー属性の削除、ユーザー属性の更新、ユーザーパスワードの変更、ユーザーアカウントの削除などの、承認されたオペレーションを実行できます。オプションの MFA 設定のあるユーザープールについては、ユーザーは自分で MFA を有効にしたり無効にしたりできます。アプリからサインアウトすると、ローカルのユーザーセッションがクリアされ、新しいセッションを確立するにはユーザーは再度サインインする必要があります。

ユーザーがパスワードを忘れた場合、パスワードを忘れた場合のフローを開始できます。コードがユーザーに送信されます。ユーザーは新しいパスワードとともにこのコードを使用し、フローを完了します。関連する呼び出しは認証されていない cognitoUser オブジェクトの forgotPassword です。関連コールバックを次の例に示します。

Copy
cognitoUser.forgotPassword({ onSuccess: function (result) { console.log('call result: ' + result); }, onFailure: function(err) { alert(err); }, inputVerificationCode() { var verificationCode = prompt('Please input verification code ' ,''); var newPassword = prompt('Enter new password ' ,''); cognitoUser.confirmPassword(verificationCode, newPassword, this); } });

ステップ 7: アプリユーザーが AWS リソースにアクセスするための認証情報を取得する

他の AWS サービスを使用する場合、最初に Amazon Cognito ID プールを作成する必要があります。この ID プールを作成すると、ユーザーにサインインする時に ID プールの ID と (先に取得した) ID トークンを渡して AWS 認証情報を取得することができます。次の例では、IdentityPoolId を入力し Logins マップを介して ID トークンを渡す方法を示します。

Copy
AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: 'us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', Logins: { 'cognito-idp.us-east-1.amazonaws.com/us-east-1_XXXXXXXXX': result.getIdToken().getJwtToken() } }); AWS.config.credentials.get(function(err){ if (err) { alert(err); } });

次のステップ

このチュートリアルで使用するコードの例と概要については、Amazon Cognito ID JavaScript GitHub リポジトリを参照してください。