recaptcha는 스패머를 막기 위한 한가지 방법이다.
SPA(Single Page Application)에 적용하는 방법을 간단히 설명한다.

create apikey

https://www.google.com/recaptcha/admin#list 에 들어가서 사이트 정보를 입력하고 키를 생성한다. Site key와 Secret key가 생성이 된다.

client side integration

https://oclazyload.readme.io/ angularjs에서 requirejs 처럼 필요한 모듈만 동적으로 로드 할 수 있는 라이브러리
https://github.com/VividCortex/angular-recaptcha recaptcha를 angularjs용으로 wrapping한 라이브러리

// html
<div vc-recaptcha key="'site key'"></div>
<!-- 꼭 홑따옴표 넣어야 됨 -->

// oclazyload
{name: 'vcRecaptcha', files: ['//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit', 'angular-recaptcha.js'], cache: true}

// controller
// vcRecaptchaService di해서 사용한다.
// response를 얻기 위한 방법
var response = vcRecaptchaService.getResponse();
// 한번 로드한 recaptcha를 재활용하는 방법
vcRecaptchaService.reload();

issue

//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit
위 파일이 딱 한번만 로딩 되도록 해야 한다. 여러번 로드하게 되면 cliendId를 잃어버린다.

server side integration

서버 쪽은 간단하다. 전달 받은 response와 secretkey 그리고 remoteip 값을 post로 전송해서 응답을 받으면 된다.

var verifyCaptchaResponse = HTTP.post('https://www.google.com/recaptcha/api/siteverify', {
    params: {
      secret: 'your secretkey',
      response: response,
      remoteip: remoteip
    }
  });
// 결과확인
verifyCaptchaResponse.data.success // true, false

resource

https://developers.google.com/recaptcha/intro