React reCaptcha v2를 사용하는 AWS Cognito

AWS 코그니토

Cognito는 AWS에서 제공하는 사용자 관리를 위한 관리형 서비스입니다. 처음에는 완벽해 보이지만 사용할 수 없는 몇 가지 기능이 있습니다. 보안 문자, 비밀번호 회전, 비밀번호 만료.

그러나 일부 작업에 대해 Lambda 트리거를 제공합니다. Cognito가 사전 인증 및 사후 인증과 같은 작업을 수행할 때 트리거되는 함수를 작성하여 기능을 확장할 수 있습니다.

가입/로그인 흐름에 관한 일반적인 요구 사항은 봇이 가입하거나 로그인하는 것을 방지하는 보안 문자입니다.

이를 위해 AWS Amplify를 사용할 것입니다.

AWS 람다

Lambda는 AWS에서 서버리스 코드를 실행하는 방법입니다. 이러한 코드를 실행하기 위해 컴퓨트 인스턴스를 프로비저닝할 필요가 없습니다.

리캡차 v2

Recaptcha는 Google의 보안 문자 서비스입니다. reCaptcha가 올바르게 작동하려면 사이트 키와 비밀 키를 얻으려면 Google 계정이 필요합니다. 우리는 reCaptcha v2를 사용할 것입니다.

등록할 때 클라이언트 측에 있을 사이트 키와 서버 측에 있을 비밀 키를 기록해 두십시오.

이를 위해 react-google-recaptcha를 사용할 것입니다.

React용 reCaptcha 설치

reCaptcha 라이브러리를 프로젝트 종속성에 설치합니다.

npm i react-google-recaptcha

reCaptcha 렌더링

import ReCAPTCHA from "react-google-recaptcha";

function onChange(value) {
  console.log("Captcha value: ", value);
}

<ReCAPTCHA
  sitekey="YOUR SITE KEY HERE"
  onChange={onChange}
/>

여기에서 reCaptcha 토큰을 얻을 수 있습니다. 이제 확인을 위해 사용자 자격 증명과 함께 AWS Cognito로 보내야 합니다.

AWS Cognito에 토큰 전달

import { Auth } from "aws-amplify";

Auth.signIn(username, password, {
        captcha: token,
      }).then...

사용자 이름과 비밀번호가 사용자 입력 자격 증명인 경우 마지막 매개변수는 clientMetadata이라고 하며 이는 AWS에 저장되지 않으며 Lambda의 트리거에서만 사용됩니다.

"captcha"키를 사용하여 토큰 값을 추가한 것을 볼 수 있으며 다음에 이 값을 사용하는 방법을 볼 수 있습니다.

Lambda 함수 생성

AWS Lambda에 로그인하고 NodeJS로 새 함수를 생성합니다.

const axios = require("axios");

const config = {
  recaptcha: {
    secretKey: process.env.SECRET_KEY,
  },
};

exports.handler = async(event) => {
  console.log(event);
  if (!event.request.validationData) {
    throw new Error("Missing validation data");
  }
  try {
    const payload = {
      secret: config.recaptcha.secretKey,
      response: event.request.validationData.captcha,
      remoteip: undefined,
    };
    const verifyResponse = await axios({
      method: "post",
      url: "https://www.google.com/recaptcha/api/siteverify",
      params: payload,
    });
    if (verifyResponse.data.success) {
      return event;
    }
    else {
      throw new Error("Recaptcha verification failed");
    }
  }
  catch (error) {
    console.error(error);
    throw error;
  }
};

또한 Lambda 페이지의 환경 변수에 reCaptcha 비밀 키를 추가해야 합니다.



Lambda에 이 코드를 추가한 후 이 Lambda 함수를 AWS Cognito 사용자 풀의 사전 인증 트리거에 추가하십시오.



이제 트리거와 함수가 준비되었으므로 애플리케이션에서 로그인 흐름을 시도하면 오류 400이 수신된다는 것을 알게 될 것입니다.

이는 Lambda가 함수에 대한 종속성을 필요로 하기 때문입니다. 이 경우에는 Axios입니다.

코드 업로드

Lambda를 사용하면 종속성이 있는 코드를 압축하고 업로드할 수 있습니다. 여기서 해야 할 일은 위의 코드를 .js 파일에 복사하고 node_modules에 설치Axios하고 압축한 다음 업로드하는 것입니다.

드디어!

그리고 끝났습니다! 방금 Lambda와 보안 문자를 포함하도록 AWS Cognito의 인증 흐름을 약간 변경했습니다!

트리거를 사용하여 요구 사항을 달성하고, 다른 트리거를 탐색하고, Lambda로 사용자 지정하는 방법에는 여러 가지가 있습니다!

건배!