google captcha 쓰는 방법

최근 로그인 페이지를 만들면서 많은 것들을 배우고 있다.

그중하나다 바로 로봇방지 기능이라고 불리는 captcha이다.

평소에 많이 보기는 했지만 직접 구현해 본것은 이번이 처음이다.

본 captcha를 쓰는 클라이언트에서 쓰는 방법은 아래의 링크에 잘 나와있다.

http://son10001.blogspot.kr/2015/12/api-google-recaptcha.html

문제는 내가 구현하는 로그인 페이지에는 가입 페이지까지 같이 들어가 있어서 한 페이지에 두개의 captcha를 구현해야 했다.

하지만 위의 링크의 방법으로는 하나의 captcha밖에 구현되지 않았다.

그래서 좀더 찾아 보았더니 아래의 링크에 그 방법이 나와있었다.

http://mycodde.blogspot.kr/2014/12/multiple-recaptcha-demo-same-page.html

결론적으로 cdn도 조금 다르게 해주어야 하고, 스크립트도 약간 추가해야 한다.

클라이언트단에서 captcha를 구현해도 어느정도 방지가 되지만,

불안정한 요소가 있어 서버단까지 세팅을 해주면 좋다고 한다.

그래서 node.js를 이용하여 서버에서의 인증도 구현해 주었다.

서버단에서는 클라이언트에서 전송된 토큰과 google에서 발급해준 secret key 값을 이용하여

ttps://www.google.com/recaptcha/api/siteverify 사이트에 요청을 보내면 object를 반환해 준다.

토큰은 클라이언트 사이드에서 grecaptcha.getResponse() 라는 함수로 보내는데, 2개의 captcha를 써줄때는 안에 변수를 써서 해당 captcha가 무엇인지 구분해야 했다.

자세한 사항은 아래 링크에 나와 있다.

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

연결이 성공했으면 해당 object의 success 속성이 true로 되어있다.

그 속성을 이용하여 성공 실패 여부를 판단해주어 다시 클라이언트에 보내주면 된다.

본 과정은 아래의 링크에 잘 정리되어 있다.

https://codeforgeek.com/2016/03/google-recaptcha-node-js-tutorial/

추가로 captcha의 체크박스가 체크되어 있는지 확인하려면 아래의 링크를 참고하면 된다.

http://ourcodeworld.com/articles/read/153/how-to-check-if-the-user-has-already-checked-google-recaptcha-checkbox