구글 reCAPTCHA 적용

기업 고객을 대상으로 쓰리래빗츠 북을 판매합니다. 제품에 관심을 갖고 쓰리래빗츠 홈페이지에 가입 하는 사람 수는 적습니다. 그런데 얼마 전부터 주기적으로 수십 명에서 수백 명이 회원 가입을 했습니다. 봇에 의한 것임을 눈치챘습니다.

처음에는 그 때 그 때 이렇게 가입한 계정을 삭제했습니다. 빈도와 규모가 늘자 다른 방법을 찾아야 했습니다. 그래서 구글 reCAPTCHA를(이하 reCAPTCHA) 적용했습니다.

쓰리래빗츠 홈페이지 회원 가입 폼에 reCAPTCHA의 다양한 기능 중에 버전 2에서 제공하는 "로봇이 아닙니다."를 적용했습니다.

reCAPTCHA는 다음과 같은 구조를 갖습니다.

다음 순서로 회원 가입 폼에 reCAPTCHA를 적용합니다.

1. 다음 주소로 이동합니다.

2. 1reCAPTCHA v2와 2"로봇이 아닙니다." 체크박스를 선택합니다.

3. 3도메인에 reCAPTCHA를 적용할 도메인을 입력합니다.

등록을 하면 사이트 키와 비밀 키를 확인할 수 있습니다.

사이트 키

HTML에서 자바스크립트를 이용해서 구글로부터 토큰을 받아올 때 전달하는 키입니다.

비밀 키

사이트 키를 이용해서 구글로부터 받은 토큰을 서버(여기서는 쓰리래빗츠 홈페이지)에 전달합니다. 서버는 이 토큰을 구글에 전달해서 유효성 검증을 해야 합니다. 이 때 비밀 키를 함께 전달합니다.

회원 가입 폼이 있는 HTML 코드에 다음 스크립트를 삽입합니다.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<1 로봇이 아닙니다.> 넣을 위치에 다음 코드를 넣습니다.

<div class="g-recaptcha" data-sitekey="6LfdNbgZAAAAAI3otR4Gh5yysu..." data-callback="recaptcha"></div>

data-sitekey 속성 값에 사이트 키를 넣습니다. data-callback 속성에 사용자가 "로봇이 아닙니다."를 클릭한 이후에 호출할 콜백 함수를 설정합니다.

recaptcha 함수를 구현할 때 다음을 참고합니다.

function recaptcha(token) {
    // token에 대한 처리
}

• data-callback 속성 값과 함수 이름이 같아야 합니다. 꼭 recaptcha일 필요는 없습니다.

• 함수의 파라미터는 토큰입니다. 회원 가입 폼을 처리할 때 이 토큰도 서버에 전달해야 합니다.

• 토큰 유무로 "로봇이 아닙니다"를 체크했는지를 확인하는 로직을 구현합니다.

서버에서 회원 가입 폼의 요청을 처리할 때 구글이 제공하는 API를 호출해서 토큰을 검증합니다.

• 구글 API 주소: https://www.google.com/recaptcha/api/siteverify

• 파라미터: 다음 파라미터를 전달해야 합니다.

  • secret: 비밀 키

  • response: 토큰

구글 API는 JSON 객체로 응답합니다. 이 JSON 객체의 success 필드가 true이면 검증 성공입니다.

{
    "success": true
}