React AWS Cognito: 이메일 인증 설정 안내서(두 번째 부분)-JS 튜토리얼-php.cn

React AWS Cognito: 이메일 인증 설정 안내서(두 번째 부분)

Patricia Arquette

풀어 주다： 2024-11-21 09:11:10

원래의

308명이 탐색했습니다.

지난 게시물에서는 AWS 측의 모든 것을 처리했습니다. 이제 코드를 설정하기 위해 React를 살펴보겠습니다.

AWS는 다음 기능을 포함하는 npm 패키지 @aws-sdk/client-cognito-identity-provider를 제공합니다.

이메일과 비밀번호를 사용하여 계정 만들기
AWS에서 보낸 코드를 통해 이메일 확인
이메일과 비밀번호로 로그인

React AWS Cognito: Email Authentication Setup Guide (Second Part)

데모 페이지를 확인하여 직접 사용해 보고 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, 사용자 이름(이메일) 및 이메일로 전송된 확인 코드가 필요합니다.

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에 저장됩니다.