개발이야기/개발

Google reCAPTCHA API 적용하기(구글리캡챠)

2016.08.26 21:13

오늘 소개 해드릴 API 는 구글의 reCAPTCHA 입니다. 사진이 역동적이네요 ^^


사실 캡챠라는 기술은 예전부터 많이 사용 되어 왔던 기술입니다.


https://ko.wikipedia.org/wiki/CAPTCHA 에 가보시면 자세한 설명이 있습니다.

CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart, 완전 자동화된 사람과 컴퓨터 판별,캡차)는 HIP(Human Interaction Proof) 기술의 일종으로, 어떠한 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법이다. 


대개 이런 모양입니다. 


오픈소스로도 많이 공개 되어있고, 유료 버전도 있고 다양한 기술들이 있지만, 오늘 알아볼 기술은 캡챠중에서도 Google에서 제공하는 reCAPTCHA 입니다.


구글은 언제나 앞선 기술로 개발자들을 즐겁게해줍니다. 그것도 꽁자로요,,
방식도 기존의 방식과는 다르게 심플하게 체크버튼 한번 해주면 된다고합니다.
아니 이걸로 어떻게 판단을 하지 ?? 하겠지만 구글의 수많은 스팸 DB와 패턴 분석으로 강력한 보안을 자랑한다고 합니다!
저 서버에 알파고가 있을지도 ㅎㅎ;;

각설하고, 설명드리겠습니다.
제일 먼저 해야할 일은 사이트에가서 키값을 발급받는 일입니다.

https://www.google.com/recaptcha/intro/index.html

상단의 Get reCAPTCHA 버튼을 클릭하시면 아래와 같은 페이지가 보입니다.

Register a new site 라는 창에 값을 넣어줍니다.
Label 에는 여개를 생성 하였을때 구분 할 수 있는 이름을 적고,
Domains 에는 사용하게 될 사이트의 도메인 주소를 적어줍니다.
다중으로 적을 수 있으니 참고하시면 될거같습니다.

Register 를 누르시면
아래와 같은 화면이 보입니다.

주욱 보시면 Step별로 적용하시면 됩니다.
끝입니다. 사실 적용이 매우 간단합니다. 매력적이에요.ㅎㅎㅎ;

하지만 이렇게만 하면 너무 성의가 없어서 실제 적용 해 보면서 몇가지 팁들을 소개하도록 하겠습니다.



https://developers.google.com/recaptcha/docs/verify


위의 링크는 docs입니다. 저희가 보고있는 reCAPTCHA는 2.0 (new)버전입니다.
테마 및 Secur Token 값을 주고 받을 수 있는 기능들이 나와있습니다.

우선 테마 적용 부터 보겠습니다.

소스 상단에 스크립트를 넣어줍니다.
처음 스텝별 설명에 나온것과는 소스가 약간 다릅니다.

<script src="https://www.google.com/reCAPTCHA/api.js?onload=onloadCallback&render=explicit"async defer></script> 

<script type="text/javascript">

      var onloadCallback = function() {

        greCAPTCHA.render('html_element', {

          'sitekey' : '6Ld6eigTAAAddlfj3932KT1cAHdfK2Nj4akOus',

          'theme' : 'light'

        });

      };

</script>

그리고 실제 리캡챠가 들어갈 영역에는 아래의 코드를 넣어줍니다.

<div id="html_element" ></div>

딱 봐도 아시겠지만, 상단의 스크립트에서 여러가지를 제어해줄 수 있습니다.
제어할 수 있는 부분은 상당히 제한적이긴 합니다.
우선 스크립트가 로드될때 주는 파라메터 값에서 언어선택할 수있습니다. hl이라는 파라메터에 Language Codes를 넣어주면 해당 언어로 셋팅입니다.

theme : 밝은색이나, 어두운색 두가지

type : 이미지 타입으로 갈지, 오디오 타입으로 갈지

size : 자동 인증에 실패 하였을 경우 위젯의 사이즈


외적인 것들을 셋팅하고, Submit 스크립트에 아래와 같이 적용 해주시면 필터링이 됩니다.


if (typeof(greCAPTCHA) != 'undefined') {

if (greCAPTCHA.getResponse() == "") {

alert("스팸방지코드를 확인해 주세요.");

       return;

}

 }

아주 쉽습니다 ㅎㅎ


그러나 위에처럼 앞단의 스크립트에서만 체크를 해준다면 해킹으로 부터는 안전할수가 없기때문에 리턴되는 값을 가지고, 서버단에서 한번더 체크를 해줍니다.

바로 Secure Token 부분인데요.
사용자가 인증을 하게되는 순간 구글의 서버로 부터 보안 토큰을 부여 받습니다.
위의 필터링 소스에서보이는 greCAPTCHA.getResponse(); 이부분인데, 이값을 가져와서 실행 소스단에서 값을 불러올 수 있습니다.

토큰값은

Fg2rtWDZ6kf_Cc1fZs5xKJWnkkVvZgNCF-5fVhPS5_r1fB2NRXPg3WobIUUsyOvfN-ElyBz3zz29lK5v9NE0ByWrGzicUWecnoV8hwSb6W4Fg2rtWDZ6kf_Cc1fZs5xKJWnkkVvZgNCF-5fVhPS5_r1fB2NRXPg3WobIUUsyOvfN-ElyBz3zz29lK5v9NE0ByWrGzicUWecnoV8hwSb6W4

요렇게 생겼습니다. 매우 길더라구요.. 
위의 토큰 값을 입력되는 값과 함께 실행 페이지로 넘겨줍니다.

그 다음 실행 단에서 JSON 통신을 해서 true 값을 받아올 수있습니다.

Step 2 에서 본 화면인데요,

JSON 통신값

URL: https://www.google.com/recaptcha/api/siteverify

Parameters
secret(필수) - 최초 등록시 받음
response(필수) - 앞단의 체크시 구글 서버에서 받음
remoteip(옵션) - 서버단 IP체크

리턴값
{

  "success": true|false,

  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)

  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved

  "error-codes": [...]        // optional

}

리턴 값을 받아와서 success 값을가지고 맞는지 안맞는지를 체크 해 주시면 됩니다. 


막상 글을 써보니 길어졌네요,,

저같은 경우는 부트스트랩 기반의 modal팝업 위에서 reCAPTCHA를 적용했었는데, 봇을 체크하는 부분은 문제가 없는데 봇임을 의심할 경우 나오는 이미지 선택란에서 버튼이 disable되는 버그가 있었습니다. google 링을 해보았지만 이부분은 아직 해결하지 못한것 같더라구요.

혹시나 해결 방법이 있으면 알려주시면 감사하겠습니다.

일반적으로 사용하는 캡차를 보면 글씨를 외곡시키다 보니 약간 보기에 혐오? 스럽고 징그러웠는데
이번 구글의 reCAPTCHA를 보면서 심플하고, 재미있고, 강력하기까지 해보여서 좋았습니다.

특히 봇을 체크하는 방식이 색다르고 재미있습니다.
이미지를 나열하고, 이중에서 나무가 있는 사진을 골라라,,강이 있는 사진을 골라라...등등 각박한 세상에 봇체크하면서 재미를 주더라구요.ㅎㅎ

작업을 하다보니 제가 지속적으로 시도를 하니깐, 스펨으로 인식해서 저희 회사 아이피 대역이 봇으로 의심 받았습니다.
풀리는데는 하루정도 걸리더라구요.

이외에도 소소한 기능들이 있지만, 스크롤의 압박으로 그만쓰도록 하겠습니다.

궁금하시거나 틀린 부분있으면 뎃글주세요.

감사합니다.



저작자 표시 비영리 변경 금지
신고

작성자

Posted by 구르는石

공유

태그

태그 , , , , , , ,

댓글 0