리액트(React)에서 구글 리캡차(reCAPTCHA) 연결하기

1. reCAPTCHA 란?

 투표를 하거나, 사이트에 새로 가입할 경우 이 "로봇이 아닙니다" 박스를 종종 보게 되는데, 이게 리캡차(reCAPTCHA)이다.

reCAPTCHA(리캡차)는 구글에서 개발한 자동화된 프로그램이나 봇으로부터 웹사이트를 보호하기 위한 보안 기술 중 하나. 주로 웹 양식의 자동 제출을 방지하고, 스팸 댓글을 막는 등의 목적으로 사용된다. 즉, 사용자가 사람인지 봇인지를 판별해준다.

 

2. reCAPTCHA flow

 

플로우는 위의 사진에 적힌 순서대로 이루어진다.

1. 화면에서 사용자가 어떤 동작을 했을때(회원가입, 글작성 등) 구글에 토큰을 요청한다.
2. 구글에서 화면으로 토큰을 전달한다.
3. 전달된 토큰을 백엔드 서버로 전송한다.
4. 백엔드 서버는 구글서버에 토큰을 전달한다.
5. 구글에서 사용자의 동작을 점수로 매긴 계산결과를 바탕으로 true/false 값과 에러 코드를 백엔드에 전달한다.
6. 백엔드에서 그 결과값을 이용해 상태코드를 화면으로 보내준다.

 

3. 구현 방법

1. 구글 리캡차 사이트에 들어가 이용할 사이트를 등록해 시크릿 키를 발급 받는다.

https://www.google.com/recaptcha/about/

 

리캡차의 종류는 테스트를 통해 확인하는 v2 인증 배지 / 체크박스 그리고 사용자의 동작을 통해 점수를 계산하는 v3가 있다.

이번에 연동할 리캡차는 v2의 체크박스이다.

 

2. 리캡차용 리액트 라이브러리 설치

npm install react-google-recaptcha

 

https://www.npmjs.com/package/react-google-recaptcha

react-google-recaptcha

여러가지 옵션을 제공하며, 쉽고 간편하게 리캡차를 구현할 수  있다.

3. 발급된 토큰을 서버로 전송

현 사이트는 form을 활용해 회원가입을 진행하고 있어, form에 토큰값을 넣어서 보내는 방식으로 구현했다.

1번에서 발급했던 시크릿키를 env에 넣어 설정해준 후 onChange를 통해 체크박스에 체크가 되면 토큰을 받아 form 값에 등록한다.

 

<FormGroupInput ver="v1">
    <div className="frm_div">
      <ReCAPTCHA sitekey={process.env.REACT_APP_RECAPTCHA_KEY} onChange={(e) => handleRecaptcha(e, setFieldValue)} />
      <FieldMessageErrorClick name="recaptcha" />
    </div>
 </FormGroupInput>

  /**로봇이 아님니다 검증 */
  const handleRecaptcha = (e, setFieldValue) => {
    setFieldValue("recaptcha", e);
  };

 

전송하면 끝!

onChange의 event를 콘솔에 찍어보면 얻은 토큰 값을 확인할 수 있음.