[API] 로봇이 아닙니다 reCAPTCHA 발급, 적용하기

 

 

 

웹 사이트를 돌아다니다 보면 이미지를 한 번쯤은 보았던 '로봇이 아닙니다' g-recaptcha 발급 및 적용 방법을 알아보자.

reCAPTCHA ?

Google reCAPTCHA는 웹사이트에서 로봇이 아닌 실제 사용자와 상호 작용하는지를 확인하기 위해 사용되는 보안 기술. 스팸 및 악의적인 로봇으로부터의 공격을 방지하고 웹사이트의 보안을 강화할 수 있다.

 

reCAPTCHA 적용

1. 적용할 사이트 등록 (사이트 키, 비밀 키 발급 해준다)
2. 적용할 페이지에 g-recaptcha 스크립트를 로드하여 token 발급
3. token + 비밀 키 값으로 g-recaptcha 검증 페이지에 검증 요청
4. 응답으로 score 및 success 값 리턴 받아 사람, 로봇인지 판별하여 서비스 차단 또는 진행

 

1. 사이트 등록

https://www.google.com/recaptcha/admin/create

로그인 - Google 계정

 

g-recaptcha 이용과 사이트 등록을 위해선 Google 계정이 있어야 한다.

계정이 이미 존재 한다면 위 링크에 가서 적용할 도메인 및 추가 정보를 입력해준다.

 

정상적으로 등록이 되었다면 g-recaptcha 토큰 발급과 검증 처리 시 필요한 사이트 키, 비밀 키 값을 확인 할 수 있다.

 

비밀 키 는 외부에 공개 되면 안되는 값임 ! (검증 시 해당 키의 값이 필요)

 

 

 

2. 토큰 발급

사이트 등록 후 발급 받은 사이트 키 값으로 g-recaptcha 스크립트 로드 및 token 값을 발급 받는다. 

사이트 키 값은 등록한 도메인에 매핑되므로 등록 하지 않은 도메인에 적용할 경우 무조건 실패.

 

스크립트 로드

<script src="https://www.google.com/recaptcha/api.js?render=[사이트 키]"></script>

 

 

 

3. 검증

발급 받은 token 값과 비밀 키 값으로 검증 처리를 진행한다. (서버단에서 진행)

 

1.검증 요청

검증 주소로 토큰 값, 비밀 키 설정하여 POST 요청을 수행하여 리턴 값으로 성공/실패 여부 판단

$token      >> 발급 받은 토큰 값
$secret_key >> 비밀 키
$verify_url >> 토큰 검증 주소 (https://www.google.com/recaptcha/api/siteverify)

 

---

HTML 폼에 reCAPTCHA 적용

 

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

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

 

로봇이 아닙니다.  넣을 위치에 다음 코드를 넣는다.

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

 

data-sitekey 속성 값에 사이트 키를 넣는다.

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

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

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

• data-callback 속성 값과 함수 이름이 같아야 함. 꼭 recaptcha일 필요는 없음.
• 함수의 파라미터는 토큰. 회원 가입 폼을 처리할 때 이 토큰도 서버에 전달해야 함.
• 토큰 유무로 "로봇이 아닙니다"를 체크했는지를 확인하는 로직을 구현.

recaptcha 구조