Google reCAPTCHA v3을 실행해 봅니다.

현시점(2018년 6월 하순)에서는 아직 β버전인 것 같습니다만, reCAPTCHA v3를 문서대로 움직여 보았습니다.

문서

reCAPTCHA v3

v3이란?

사용자 작업 없음

점수를 반환합니다

라고 써 있습니다. 과연, 시코시코와 자동차의 그림을 찾을 필요는 없네요.

웹페이지에 도입하는 흐름

절차는 세 가지입니다.

Load the JavaScript api with your sitekey

Call grecaptcha.execute on an action or when the page loads

Send the token to your backend with the request to verify(←Google API)

0. Register(Key 취득)

reCAPTCHA v3를 도입하기 위해서는 우선은 js read나 토큰 취득을 위한 Key가 필요하게 됩니다.
상기 문서에 링크가 있어 거기에서 추적해 갈 수 있습니다.



키는 두 가지가 있습니다.

Site Key : HTML에 붙여 넣을 때에 사용한다

Secret Key : Google에 점수를 문의 할 때 사용됩니다.

어느 쪽인가 하면, Secret Key 의 취급에 주의가 필요하네요.

덧붙여서 이 화면, 실제 화면에서 보면 오른쪽 하단에 "reCAPTCHA로 보호되고 있습니다"라고 나옵니다.



즉, reCAPTCHA 설정 화면에 reCAPTCHA가 도입되었습니다!

1. Frontend integration(HTML에 넣어 토큰 취득)

어떤 액션이나 웹 페이지를 로드한 시점에서 토큰을 얻습니다.

문서에는

js 로딩

토큰 취득

방법을 설명합니다.

  <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
  <script>
  grecaptcha.ready(function() {
      grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
         ...
      });
  });
  </script>

Key를 취득하는 곳에서는 실제의 site_key 가 포함된 상태의 샘플이 실려 있으므로 편리합니다.
동작 확인이므로 동일하게 넣습니다.

2. API Request/Response(스코어 쿼리)

문서 : Verifying the user's response

API 문의 방법도 그리 어렵지 않습니다.

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "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
}

action 라는 곳은 grecaptcha.execute 때로 지정할 수 있습니다.
엄격한 검증이라는 의미에서는 이 action, challenge_ts, hostname 당 체크해 두는 것도 필요합니다.

3. Interpreting the score(스코어에 따른 처리)

이른바 「퍼즐을 돌파하면 오!」인 방법이 아니기 때문에, 실제의 제품에 넣어 가는 것을 생각하면 여기가 제일 소중하네요.
문서에는 Use case/Recommendation 으로서 bot 판정에의 사용법 같은 것이 쓰고 있습니다.

동작 확인용 웹 페이지

h tps : // 레카 pt 짱 mp ぇ. 아 ps포 t. 코m/ <- 돈이 들기 때문에 멈췄습니다. Elixir (Phoenix) 소스 코드는 htps : // 기주 b. 코 m / 리토 / 에우 r-re pt 짱-에 mp

취득한 토큰을 자신에게 던져 검증 결과를 표시하는 사람입니다.

자주 사용하는 브라우저에서 시도하면 높은 점수가 되었습니다.



시크릿 윈도우라면 낮아졌습니다.



bot에서는 시도하지 않지만 언젠가 할 것입니다.

이상입니다.