구글 reCAPTCHA 적용 하기

---

reCAPTCHA 구조

 

1. 웹 브라우저에서 사용자가 " 로봇이 아닙니다 " 를 클릭하면 구글에 토큰을 요청합니다. 사이트 키가 필요

2. 구글이 자바스크립트 콜백 함수 호출로 토큰을 전달합니다.

3. 사용자가 서버에 회원가입 폼 저장을 요청 합니다. 앞에서 받은 토큰을 전달 합니다.

4. 서버는 구글 API 를 호출하여 토큰을 검증하고 비밀키도 전달합니다.

5. 구글 API 는 JSON 객체로 결과를 반환 합니다.

 

---

⭐️   구글 사이트 등록하기 

 

1.

 https://www.google.com/recaptcha/admin/create 링크 접속

 

 

2. 

reCAPTCHA v2 와 로봇이 아닙니다. 체크박스 선택하기

3.

도메인에 적용할 도메인 입력

 

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

 

 

💡 사이트키

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

 

💡 비밀키

- 사이트 키를 이용해서 구글로부터 받은 토큰을 서버에에 전달합니다. 서버는 이 토큰을 구글에 전달해서 유효성 검증을 해야 합니다.

이때 비밀키를 함께 전달합니다.

 

 

5.

HTML 폼에 reCAPTCHA 적용

 

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

 

 

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

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

 

data-sitekey - " 사이트키 넣기 "

data-callback - " 로봇이 아닙니다 클릭 한 후 호출할 콜백 함수를 설정합니다 " 예시) recaptcha 함수 

 

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

 

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

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

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

 

 

6. 

서버에서의 검증

 

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

 

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

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

🍎 secret : 비밀 키

🍎 response : 토큰 

 

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

 

{
    "success": true
}