サインアップ、サインイン、サインアウトを有効にする

このガイドでは、Amplifyライブラリを使用してサインアップ、サインイン、サインアウトをセットアップし、この機能をテストします。これには、Amplifyが提供するサインアップ方法の確認、Amazon Cognitoが使用する特定のユーザー属性、初期サインアップ後のユーザー確認、ローカルサインアウトとグローバルサインアウトの違いが含まれます。セットアップが完了したら、この機能をフロントエンドUIに接続できます。

開始する前に、「Amplify Authのセットアップ」ガイドのバックエンドリソースのセットアップセクションを完了していることを確認してください。

構築前に決定する事項

サインアップ、サインイン、サインアウトを有効にする前に、プロセスを完了するためにいくつかの決定を行う必要があります。

サインアップにどのAmazon Cognito属性を渡しますか？

ユーザー属性（ユーザー名やメールアドレスなど）は、ユーザーを識別するために使用されます。これらはCognito User Poolを設定するときに設定され、追加後は名前を変更または削除することはできません。Amplify CLIを使用してユーザー属性を追加することも、Amazon Cognitoコンソールにアクセスすることもできます。CLIでユーザー属性を追加するには、新しいプロジェクトの場合はamplify add authコマンドを実行できます。既存のリソースが設定されている場合は、amplify update authを使用してください。その後、Amplify CLIから要求されたときにmanual configurationを選択できます。

? amplify update auth
? What do you want to do?
  'Walkthrough all the auth configurations'
# Accept defaults for everything else

# Select the attributes you want users to read/write
? Specify read attributes:
  'Birthdate, Email, Given Name'
? Specify write attributes:
  'Locale, Given Name'

サインアップ時にユーザーをどのように確認しますか？

初期サインアップが完了した後、ユーザーは確認してアカウントが有効になる前に連絡先情報を確認する必要があります。これは、初期サインアップ時に収集できるメールアドレスまたは電話番号で確認コードを送信することによって行われます。メール認証では、ユーザーにサインアップ時に提供したメールアドレスに送信されたリンクをクリックするか、コードを入力するよう求めます。電話認証は、ユーザーにSMSテキストメッセージで送信されたコードを入力するよう求めることによって行われます。自動確認を有効にして、このステップをスキップし、サインアップ後にユーザーを自動的に確認することもできます。これはpre sign-up Lambda トリガーを使用して実現されます。詳しくは、Amazon Cognitoドキュメントを参照してください。

これらの決定が頭の中にあれば、サインアップ、サインイン、サインアウトを有効にする準備ができています。

サインアップ、サインイン、サインアウト機能を追加する

Amplifyライブラリを使用して、サインアップ、サインイン、サインアウトを有効にする機能を追加できます。これを既存のUIに接続するか、独自のUIを作成できます。

多くのアプリでは、ユーザー名とパスワードを使用したユーザーのサインアップとサインインが必要なすべてです。認証後、アプリはAPIと通信してデータにアクセスして変更できます。

開始するために、ユーザー名とパスワード認証フローを使用します。サードパーティソーシャルプロバイダーフェデレーションと多要素認証の両方は、この初期セットアップ後に追加できます。

サインアップ

ユーザー名、パスワード、および他の属性をAuth.signUp()に渡すことで、バックエンドに新しいユーザーを作成できます。

import { Auth } from 'aws-amplify';

type SignUpParameters = {
  username: string;
  password: string;
  email: string;
  phone_number: string;
};

export async function signUp({
  username,
  password,
  email,
  phone_number
}: SignUpParameters) {
  try {
    const { user } = await Auth.signUp({
      username,
      password,
      attributes: {
        email, // optional
        phone_number // optional - E.164 number convention
        // other custom attributes
      },
      autoSignIn: {
        // optional - enables auto sign in after user is confirmed
        enabled: true
      }
    });
    console.log(user);
  } catch (error) {
    console.log('error signing up:', error);
  }
}

import { Auth } from 'aws-amplify';

async function signUp() {
  try {
    const { user } = await Auth.signUp({
      username,
      password,
      attributes: {
        email, // optional
        phone_number // optional - E.164 number convention
        // other custom attributes
      },
      autoSignIn: {
        // optional - enables auto sign in after user is confirmed
        enabled: true
      }
    });
    console.log(user);
  } catch (error) {
    console.log('error signing up:', error);
  }
}

サインアップを確認する

デフォルトでは、サインアップする各ユーザーは、メールまたは電話番号に送信された確認コードで確認するまで、未確認ステータスのままです。以下に示すように、ユーザーから確認コードを取得した後、サインアップを確認できます。

import { Auth } from 'aws-amplify';

type ConfirmSignUpParameters = {
  username: string;
  code: string;
};

export async function confirmSignUp({
  username,
  code
}: ConfirmSignUpParameters) {
  try {
    await Auth.confirmSignUp(username, code);
  } catch (error) {
    console.log('error confirming sign up', error);
  }
}

import { Auth } from 'aws-amplify';

async function confirmSignUp() {
  try {
    await Auth.confirmSignUp(username, code);
  } catch (error) {
    console.log('error confirming sign up', error);
  }
}

サインアップ後の自動サインイン

autoSignInを有効にした場合、sign up関数は正常な確認後にautoSignIn hubイベントをディスパッチします。認証が成功した場合、イベントはデータオブジェクト内にCognitoUserを含みます。自動サインインが失敗した場合、autoSignIn_failureイベントがディスパッチされます。

import { Hub } from 'aws-amplify';

function listenToAutoSignInEvent() {
  Hub.listen('auth', ({ payload }) => {
    const { event } = payload;
    if (event === 'autoSignIn') {
      const user = payload.data;
      // assign user
    } else if (event === 'autoSignIn_failure') {
      // redirect to sign in page
    }
  });
}

サインイン

ユーザー名とパスワードをAuthクラスのsignInメソッドに渡して、ユーザー名とパスワードのサインインを有効にします。

import { Auth } from 'aws-amplify';

type SignInParameters = {
  username: string;
  password: string;
};

export async function signIn({ username, password }: SignInParameters) {
  try {
    const user = await Auth.signIn(username, password);
  } catch (error) {
    console.log('error signing in', error);
  }
}

import { Auth } from 'aws-amplify';

async function signIn() {
  try {
    const user = await Auth.signIn(username, password);
  } catch (error) {
    console.log('error signing in', error);
  }
}

サインアウト

ローカルサインアウトをセットアップするには、AuthクラスのsignOutメソッドを使用します。

import { Auth } from 'aws-amplify';

export async function signOut() {
  try {
    await Auth.signOut();
  } catch (error) {
    console.log('error signing out: ', error);
  }
}

import { Auth } from 'aws-amplify';

async function signOut() {
  try {
    await Auth.signOut();
  } catch (error) {
    console.log('error signing out: ', error);
  }
}

グローバルサインアウトを追加することにより、ユーザーをすべてのデバイスからサインアウトできます。また、ユーザーに発行されたすべてのリフレッシュトークンも無効化されます。ユーザーの現在のアクセストークンとIDトークンは、リフレッシュトークンの有効期限が切れるまで他のデバイスで有効なままです（アクセストークンとIDトークンは発行から1時間後に有効期限切れになります）。

import { Auth } from 'aws-amplify';

export async function signOut() {
  try {
    await Auth.signOut({ global: true });
  } catch (error) {
    console.log('error signing out: ', error);
  }
}

import { Auth } from 'aws-amplify';

async function signOut() {
  try {
    await Auth.signOut({ global: true });
  } catch (error) {
    console.log('error signing out: ', error);
  }
}

Amplifyライブラリメソッドをアプリケーション内に実装すれば、サインアップ、サインイン、サインアウト機能をテストできます。

AWSコンソールで作成されたユーザーを表示する

サインアップ、サインイン、サインアウト機能をテストした後、Amazon Cognitoコンソールで作成されたユーザーを確認できます。これを行うには、amplify console authを使用してCLIからコンソールを直接開くか、既存のUser Poolsをコンソールで確認します。ユーザーを正常に確認した場合、ユーザーのステータスはCONFIRMEDである必要があります。ただし、ユーザーがまだ確認されていない場合はUNCONFIRMEDとなる場合があります。他の必須属性が正しく更新されていることを確認することもできます。

これで、認証のサインアップ、サインイン、サインアウトを有効にし、テストユーザーで機能を確認しました。

まとめ

おめでとうございます。サインアップ、サインイン、サインアウトを有効にするガイドを完了し、機能が期待通りに動作することを確認しました。

次のステップ

ユーザー名とパスワードを使用してAmplify Authのセットアップを完了したので、いくつかの追加機能を追加することもできます。推奨事項は次のとおりです。

• ソーシャルプロバイダーのサインインを追加する
• 多要素認証