サインアップ、サインイン、サインアウトの有効化

このガイドでは、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テキストメッセージで送信されたコードを入力するよう求めることで行われます。自動確認を有効にして、このステップをスキップし、サインアップ後にユーザーを自動的に確認することもできます。これは、Amazon Cognitoドキュメントで説明されているpre sign-up Lambdaトリガーを使用して実現されます。

これらの決定を念頭に置いたら、サインアップ、サインイン、サインアウトを有効にする準備が整いました。

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

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

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

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

サインアップ

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

import { signUp } from 'aws-amplify/auth';

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

async function handleSignUp({
  username,
  password,
  email,
  phone_number
}: SignUpParameters) {
  try {
    const { isSignUpComplete, userId, nextStep } = await signUp({
      username,
      password,
      options: {
        userAttributes: {
          email,
          phone_number // E.164 number convention
        },
        // optional
        autoSignIn: true // or SignInOptions e.g { authFlowType: "USER_SRP_AUTH" }
      }
    });

    console.log(userId);
  } catch (error) {
    console.log('error signing up:', error);
  }
}

import { signUp } from 'aws-amplify/auth';

async function handleSignUp({ username, password, email, phone_number }) {
  try {
    const { isSignUpComplete, userId, nextStep } = await signUp({
      username,
      password,
      options: {
        userAttributes: {
          email,
          phone_number // E.164 number convention
        },
        // optional
        autoSignIn: true // or SignInOptions e.g { authFlowType: "USER_SRP_AUTH" }
      }
    });

    console.log(userId);
  } catch (error) {
    console.log('error signing up:', error);
  }
}

signUp APIレスポンスにはnextStepプロパティが含まれます。これを使用して、さらなるアクションが必要かどうかを判定できます。次のステップを返す可能性があります：

• CONFIRM_SIGN_UP - サインアップは、ユーザーからコードを収集してconfirmSignUpを呼び出すことで確認される必要があります。
• DONE - サインアッププロセスが完全に完了しました。
• COMPLETE_AUTO_SIGN_IN - サインアッププロセスはautoSignIn APIを呼び出して完了する必要があります。

サインアップを確認する

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

import { confirmSignUp, type ConfirmSignUpInput } from 'aws-amplify/auth';

async function handleSignUpConfirmation({
  username,
  confirmationCode
}: ConfirmSignUpInput) {
  try {
    const { isSignUpComplete, nextStep } = await confirmSignUp({
      username,
      confirmationCode
    });
  } catch (error) {
    console.log('error confirming sign up', error);
  }
}

import { confirmSignUp } from 'aws-amplify/auth';

async function handleSignUpConfirmation({ username, confirmationCode }) {
  try {
    const { isSignUpComplete, nextStep } = await confirmSignUp({
      username,
      confirmationCode
    });
  } catch (error) {
    console.log('error confirming sign up', error);
  }
}

自動サインイン

autoSignIn APIは、以前にsignUp APIで有効にされ、次のいずれかのケースが完了した後に、ユーザーを自動的にサインインします：

• ユーザーが電話またはメールに送信された検証コードでアカウントを確認しました（デフォルトオプション）。
• ユーザーが電話またはメールに送信された検証リンクでアカウントを確認しました。このオプションを有効にするには、Amazon Cognitoコンソールに移動し、ユーザープールを探して、Messagingタブに移動し、Verification messageオプション内でlinkモードを有効にします。最後に、Auth設定のCognitoオプション内でsignUpVerificationMethodをlinkに定義する必要があります。

import { autoSignIn } from 'aws-amplify/auth';

async function handleAutoSignIn() {
  try {
    const signInOutput = await autoSignIn();
    // handle sign-in steps
  } catch (error) {
    console.log(error);
  }
}

サインイン

ユーザー名とパスワードをsignIn APIに渡して、エンドユーザーをサインインします。

import { signIn, type SignInInput } from 'aws-amplify/auth';

async function handleSignIn({ username, password }: SignInInput) {
  try {
    const { isSignedIn, nextStep } = await signIn({ username, password });
  } catch (error) {
    console.log('error signing in', error);
  }
}

import { signIn } from 'aws-amplify/auth';

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

signIn APIレスポンスにはnextStepプロパティが含まれます。これを使用して、さらなるアクションが必要かどうかを判定できます。次のステップを返す可能性があります：

• CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED - ユーザーは一時パスワードで作成されており、新しいパスワードを設定する必要があります。confirmSignInでプロセスを完了します。
• CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE - サインインはカスタムチャレンジレスポンスで確認される必要があります。confirmSignInでプロセスを完了します。
• CONFIRM_SIGN_IN_WITH_TOTP_CODE - サインインはユーザーからのTOTPコードで確認される必要があります。confirmSignInでプロセスを完了します。
• CONTINUE_SIGN_IN_WITH_TOTP_SETUP - TOTPセットアップのプロセスを続ける必要があります。confirmSignInでプロセスを完了します。
• CONFIRM_SIGN_IN_WITH_SMS_CODE - サインインはユーザーからのSMSコードで確認される必要があります。confirmSignInでプロセスを完了します。
• CONTINUE_SIGN_IN_WITH_MFA_SELECTION - ユーザーはサインインする前にMFA検証方法を選択する必要があります。confirmSignInでプロセスを完了します。
• RESET_PASSWORD - ユーザーはresetPasswordを介してパスワードをリセットする必要があります。
• CONFIRM_SIGN_UP - ユーザーはサインアップフローを完全に完了していないため、confirmSignUpで確認する必要があります。
• DONE - サインインプロセスが完了しました。

TOTPおよびMFAステップの処理の詳細については、「多要素認証」を参照してください。

サインアウト

ユーザーをアプリケーションからサインアウトするには、signOut APIを使用できます。

import { signOut } from 'aws-amplify/auth';

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

import { signOut } from 'aws-amplify/auth';

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

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

import { signOut } from 'aws-amplify/auth';

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

import { signOut } from 'aws-amplify/auth';

async function handleSignOut() {
  try {
    await 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の設定を完了したので、追加機能を追加することもできます。以下をお勧めします：

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