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 중국어 웹사이트의 기타 관련 기사를 참조하세요!