React AWS Cognito: 電子メール認証セットアップガイド (第 2 部)

前回の投稿では、AWS 側ですべてを処理しました。それでは、React に飛び込んでコードを設定しましょう。

AWS は、次の機能を含む npm パッケージ @aws-sdk/client-cognito-identity-provider を提供します。

• メールアドレスとパスワードを使用してアカウントを作成する
• AWS から送信されたコードによるメールの検証
• メールアドレスとパスワードでログイン

デモ ページをチェックして自分で試してみたり、GitHub リポジトリのコードを自由に見てください。

サインアップ

最初のステップはサインアップです

import { SignUpCommand } from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const signUp = async (email: string, password: string) => {
  const params = {
    ClientId: AWS_CLIENT_ID,
    Username: email,
    Password: password,
    UserAttributes: [
      {
        Name: "email",
        Value: email,
      },
    ],
  };

  const command = new SignUpCommand(params);

  try {
    await cognitoClient.send(command);
  } catch (error) {
    throw error;
  }
};

AWS_CLIENT_ID がどのように必要であるか、そしてこのヘルパー関数が電子メールとパスワードを受け取ることに注意してください。デモでは、両方の値がユーザーによってフォームに入力され、UI がこのメソッドを呼び出してそれらの値を渡します。

エラーが発生した場合は例外がスローされ、UI はそれに応じて例外を処理します。

確認

注: テスト中は、フォームで使用される電子メールを最初に検証する必要があります。これは運用環境では必要ありません。

SignUpCommand が実行されると、AWS はアカウントを登録し、電子メールで確認コードを送信します。そのため、次のステップは受信トレイを確認してコードをコピーすることです。

import { ConfirmSignUpCommand } from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const confirmSignUp = async (username: string, code: string) => {
  const params = {
    ClientId: AWS_CLIENT_ID,
    Username: username,
    ConfirmationCode: code,
  };

  const command = new ConfirmSignUpCommand(params);
  try {
    await cognitoClient.send(command);
  } catch (error) {
    throw error;
  }
};

confirmSignUpCommand には、AWS ClientId、ユーザー名 (電子メール)、および電子メールに送信された確認コードが必要であることに注意してください。

サインイン

confirmSignUpCommand が正常に完了すると、アカウントはログインできるようにすべて設定されているはずです。

import {
  AuthFlowType,
  SignUpCommand,
} from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const signIn = async (username: string, password: string) => {
  const params = {
    AuthFlow: AuthFlowType.USER_PASSWORD_AUTH,
    ClientId: AWS_CLIENT_ID,
    AuthParameters: {
      USERNAME: username,
      PASSWORD: password,
    },
  };
  const command = new InitiateAuthCommand(params);

  let AuthenticationResult;
  try {
    const response = await cognitoClient.send(command);
    AuthenticationResult = response.AuthenticationResult;
  } catch (error) {
    throw error;
  }

  if (!AuthenticationResult) {
    return;
  }

  sessionStorage.setItem("idToken", AuthenticationResult.IdToken || "");
  sessionStorage.setItem("accessToken", AuthenticationResult.AccessToken || "");
  sessionStorage.setItem(
    "refreshToken",
    AuthenticationResult.RefreshToken || ""
  );

  return AuthenticationResult;
};

InitiateAuthCommand では、AWS はユーザーがフォームを通じて提供した ClientId、ユーザー名 (電子メール)、およびパスワードを要求します。メールアドレスがすでに認証されている場合、ログインは成功します。

さらに、一部の値は将来の使用に備えて sessionStorage に保存されます。

結論

デモをチェックしてコードベースを探索してください。

Cognito はセットアップが比較的簡単でありながら強力です。アカウントの作成、検証、認証などの重要な作業を処理します。このための独自のサービスを構築することは可能ですが、適切な実装とメンテナンスには多大な労力が必要です。

プロジェクトを開始する場合、クラウド サービスにはこれらの責任が軽減されるという利点があり、たとえ依存関係が生じたとしても、中核となるビジネス ロジックに集中できます。

以上がReact AWS Cognito: 電子メール認証セットアップガイド (第 2 部)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。