React AWS Cognito：電子郵件身份驗證設定指南（第二部分）

在上一篇文章中，我們處理了 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：電子郵件身份驗證設定指南（第二部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！