reCAPTCHA v3

reCAPTCHA v3는 사용자를 방해하지 않고 각 요청에 대한 점수를 반환합니다. 점수는 사이트와의 상호작용을 기반으로 하며 이를 기준으로 사이트에 적절한 조치를 취할 수 있습니다. reCAPTCHA 관리 콘솔에서 reCAPTCHA v3 키를 등록합니다.

이 페이지에서는 웹페이지에서 reCAPTCHA v3를 사용 설정하고 맞춤설정하는 방법을 설명합니다.

웹사이트에서 삽입 위치

reCAPTCHA v3는 사용자를 방해하지 않으므로 언제든지 영향을 미치지 않고 실행할 수 있습니다. 알 수 있습니다. reCAPTCHA는 사이트와의 상호작용에 관한 컨텍스트가 가장 있을 때 가장 잘 작동합니다. 이는 적법한 행동과 악의적인 행동을 모두 보는 데서 비롯됩니다. 따라서 페이지의 백그라운드에서 양식이나 작업에 대한 reCAPTCHA 인증을 분석.

동일한 페이지에서 원하는 만큼 많은 작업에 대해 reCAPTCHA를 실행할 수 있습니다.

챌린지를 버튼에 자동으로 바인딩

페이지에서 reCAPTCHA v3를 사용하는 가장 쉬운 방법은 필요한 JavaScript 리소스를 가져오고 html 버튼에 몇 가지 속성을 추가합니다.

  1. JavaScript API를 로드합니다.

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

  2. 토큰을 처리할 콜백 함수를 추가합니다.

     <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

  3. html 버튼에 속성을 추가합니다.

    <button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

프로그래매틱 방식으로 챌린지 호출

reCAPTCHA 실행 시점을 더욱 세밀하게 제어하려면 grecaptcha 객체의 execute 메서드 이렇게 하려면 reCAPTCHA 스크립트 로드에 render 매개변수를 추가해야 합니다.

  1. 사이트 키로 JavaScript API를 로드합니다.

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

  2. 보호하려는 각 작업에서 grecaptcha.execute를 호출합니다.

       <script>
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
  </script>

  3. 다음 요청과 함께 토큰을 즉시 백엔드로 전송합니다. 확인합니다.

점수 해석

reCAPTCHA v3는 점수를 반환합니다. 1.0은 정상적인 상호작용, 0.0은 봇일 가능성이 매우 높습니다. 이 점수를 바탕으로 사이트 상황에 따라 다양한 조치를 취할 수 있습니다. 모든 사이트는 다음은 사이트에서 점수를 사용하는 방법의 몇 가지 예입니다. 아래 예와 같이 트래픽을 차단하는 대신 백그라운드에서 조치를 취하여 사이트를 더 안전하게 보호할 수 있습니다.

사용 사례 추천
홈페이지 스크래퍼를 필터링하면서 관리 콘솔에서 일관된 트래픽 보기를 확인하세요.
로그인 점수가 낮을 경우 크리덴셜 스터핑 공격을 방지하기 위해 2단계 인증 또는 이메일 인증을 요구합니다.
소셜 악의적인 사용자로부터 응답하지 않은 친구 요청을 제한하고 위험한 댓글을 신고하세요.
전자상거래 봇보다 실제 매출을 우선적으로 고려하고 위험한 거래를 파악합니다.

reCAPTCHA는 사이트에서 실제 트래픽을 확인하여 학습합니다. 따라서 스테이징의 점수는 구현 직후에 프로덕션 환경과 다를 수 있습니다. reCAPTCHA v3는 사용자 플로우를 중단하면 먼저 조치를 취하지 않고 reCAPTCHA를 실행한 다음 관리 콘솔의 트래픽을 확인하여 기준점을 설정할 수 있습니다. 작성자: 기본적으로 0.5의 임계값을 사용할 수 있습니다.

작업

reCAPTCHA v3에는 새로운 개념인 작업이 도입되었습니다. 작업 이름을 지정하는 경우 reCAPTCHA를 실행하는 각 위치에서 다음과 같은 새로운 기능을 사용 설정합니다.

  • 상위 10개 액션에 대한 데이터를 관리 콘솔
  • 악의적인 행위와 감지하기 때문에 작업의 컨텍스트에 따른 적응형 위험 분석 다를 수 있습니다

중요한 점은 reCAPTCHA 응답을 확인할 때 action name은 예상하는 이름입니다.

사이트 인증 응답

reCAPTCHA v2와 마찬가지로 응답 토큰을 확인하도록 요청합니다. 보이지 않는 reCAPTCHA

응답은 JSON 객체입니다.

{
  "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
}

팁

  1. reCAPTCHA 라이브러리가 로드되면 grecaptcha.ready()가 함수를 실행합니다. 받는사람 api.js로 경합 상태를 피하려면 api.js을 grecaptcha를 호출하거나 onload 콜백을 호출합니다.
  2. 다음과 같이 흥미롭거나 민감한 작업에 execute 호출을 끌어 보세요. 등록, 비밀번호 재설정, 구매 또는 재생
  3. https://www.google.com/recaptcha/api.js?trustedtypes=true 사용 용도 신뢰할 수 있는 유형과 호환되는 코드를 로드합니다.