React reCAPTCHA v2 사용 방법

안녕하세요, 스코리아입니다.

오늘은 저번시간에 이어서 React(FE)에서 reCAPTCHA v2를 적용하는 방법에 대해서 소개해드리겠습니다.

Google reCAPTCHA v2

 

이전 포스팅에서 구글 reCAPTCHA에 대한 소개 및 자바 스프링(BE)에서 적용하는 방법에 대해서 말씀드렸습니다. 이전 내용과 이어질 예정이니, 아래 포스팅을 꼭 참고해 주세요!

 

[이전 내용] 스프링에서 reCAPTCHA v2 사용하기 : 바로가기

 

1. npm 설치

우선 react 내에 react-google-recaptcha 패키지를 설치합니다.

설치, 사용 방법 등 자세한 내용은 npm 공식 문서를 참고하세요 : https://www.npmjs.com/package/react-google-recaptcha

npm install --save react-google-recaptcha

 

 

2. 사이트 키 적용 - env

.env 파일에 아래와 같이 reCAPTCHA 생성 시 발급받았던 사이트 키를 등록합니다.

CRA(create-react-app)으로 React 프로젝트를 생성하신 분들은 key prefix에 REACT_APP 접두사가 필히 들어가야 합니다.

REACT_APP_RECAPTCHA_SITE_KEY=사이트키

 

 

3. "로봇이 아닙니다" 체크박스 적용

먼저 아래처럼 recaptchaRef 이름의 useRef를 만들어줍니다.

const recaptchaRef = useRef(null);

 

그리고 react-google-recaptcha 패키지의 ReCAPTCHA를 가져와서 다음과 같이 구글 reCAPTCHA v2 "로봇이 아닙니다" 체크 박스를 만들 수 있습니다.

import ReCAPTCHA from "react-google-recaptcha";

<ReCAPTCHA
  ref={recaptchaRef}
  sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
/>

 

API를 호출하는 상황에서는 아래처럼 작성이 가능합니다. 전체적인 코드를 보여드리겠습니다.

import ReCAPTCHA from "react-google-recaptcha";
import { useForm } from "react-hook-form";
import { Button } from "../../../component/Button";=
import { EmailInput, UserIdInput } from "../../../component/MemberInput";
import { useRef } from "react";

const FindPassword = () => {
  const recaptchaRef = useRef(null);

  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm();

  const onValid = async ({ userId, email }) => {
  	// 현재 reCAPTCHA response (token값)
    const recaptchaResponse = recaptchaRef.current.getValue();

    if (recaptchaResponse === "") { // 구글 캡챠가 진행되지 않았을 경우
      alert("구글 캡챠 인증을 진행해주세요.");
    } else {
      const response = await findPasswordByEmailSendEmailAPI({
        userId,
        email,
        recaptchaResponse,
      }); // API 호출

      if (response.status) {
        // 통과
      } else {
      	// 실패
        recaptchaRef.current.reset(); // reCAPTCHA 초기화
        alert(response.statusMessage);
      }
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit(onValid)} className="space-y-3">
        <div>
          <UserIdInput
            register={register}
            errors={errors}
            isDisabled={false}
          />
          <EmailInput
            register={register}
            errors={errors}
            isDisabled={false}
          />
          <div className="flex justify-center mt-3">
            <ReCAPTCHA
              ref={recaptchaRef}
              sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
            />
          </div>
        </div>
        <div className="mt-3">
          <Button color="green">
            이메일 주소로 비밀번호 찾기
          </Button>
        </div>
    </>
  );
};

export default FindPassword;

 

recaptchaRef.current.getValue(); 로 현재 reCAPTCHA response(응답 키) 값을 받아올 수 있습니다.

이 값을 API(BE)로 보내어, BE에서 reCAPTCHA가 정상적으로 풀어졌는지 검사하고 응답을 받습니다. API가 에러를 뿜는다면, 사용자가 reCAPTCHA를 다시 풀도록 초기화하는 과정이 필요합니다. 이때 recaptchaRef.current.reset(); 로 현재 reCAPTCHA를 초기화할 수 있습니다.

reCAPTCHA 적용 사진

 

---

이상으로 React에서 reCAPTCHA v2를 적용하는 방법에 대해서 알아보았습니다.

읽어주셔서, 감사합니다.