이 페이지는 Cloud Translation API를 통해 번역되었습니다.

reCAPTCHA v3

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

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

웹사이트에서 삽입 위치

reCAPTCHA v3는 사용자를 방해하지 않으므로 전환에 영향을 주지 않고 원할 때 언제든지 실행할 수 있습니다. reCAPTCHA는 적법한 행동과 악의적인 행동을 모두 확인했을 때 사이트와의 상호작용에 관한 컨텍스트가 가장 많을수록 가장 효과적입니다. 따라서 분석을 위해 페이지 배경뿐 아니라 양식이나 작업에 reCAPTCHA 인증을 포함하는 것이 좋습니다.

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

버튼에 챌린지 자동 결합

페이지에서 reCAPTCHA v3를 사용하는 가장 쉬운 방법은 필요한 자바스크립트 리소스를 포함하고 html 버튼에 몇 가지 속성을 추가하는 것입니다.

JavaScript API를 로드합니다.

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

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

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

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

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

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

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

사이트 키를 사용하여 JavaScript API를 로드합니다.

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

보호하려는 각 작업에서 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>

확인 요청을 통해 토큰을 즉시 백엔드로 전송합니다.

점수 해석

reCAPTCHA v3는 점수를 반환합니다 (1.0은 정상적인 상호작용, 0.0은 봇일 가능성이 큼). 이 점수를 바탕으로 사이트 상황에 따라 다양한 조치를 취할 수 있습니다. 사이트마다 다르긴 하지만 다음은 사이트에서 점수를 사용하는 몇 가지 예입니다. 아래 예에서와 같이 사이트를 더욱 안전하게 보호하기 위해 트래픽을 차단하는 대신 백그라운드에서 조치를 취하세요.

사용 사례	추천
홈페이지	스크래퍼를 필터링하면서 관리 콘솔에서 통합 트래픽을 확인합니다.
로그인	점수가 낮을 경우 사용자 인증 정보 반복 입력 공격을 방지하기 위해 2단계 인증 또는 이메일 인증이 필요합니다.
social	불량 사용자의 답변되지 않은 친구 요청을 제한하고 위험한 댓글을 검토합니다.
전자상거래	봇보다 실제 매출을 우선적으로 고려하고 위험한 거래를 파악합니다.

reCAPTCHA는 사이트에서 실제 트래픽을 확인하여 학습합니다. 이러한 이유로 스테이징 환경 또는 구현 직후의 점수는 프로덕션 환경과 다를 수 있습니다. reCAPTCHA v3는 사용자 흐름을 중단하지 않으므로 먼저 조치를 취하지 않고 reCAPTCHA를 실행한 다음 관리 콘솔에서 트래픽을 확인하여 기준을 결정할 수 있습니다. 기본적으로 0.5의 임곗값을 사용할 수 있습니다.

작업

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

관리 콘솔에서 상위 10개 작업에 대한 데이터의 세부정보
악의적인 행동이 다를 수 있으므로 이 작업의 맥락에 기반한 적응형 위험 분석

중요한 점은 reCAPTCHA 응답을 확인할 때 작업 이름이 예상한 이름인지 확인해야 합니다.

사이트 확인 응답

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
}

팁

grecaptcha.ready()는 reCAPTCHA 라이브러리가 로드될 때 함수를 실행합니다. api.js로 경합 상태를 방지하려면 grecaptcha를 호출하는 스크립트 앞에 api.js를 포함하거나 v2 API로 정의된 onload 콜백을 계속 사용합니다.
등록, 비밀번호 재설정, 구매, Play와 같이 흥미롭거나 민감한 작업에 execute 호출을 연결해 보세요.
https://www.google.com/recaptcha/api.js?trustedtypes=true를 사용하여 신뢰할 수 있는 유형과 호환되는 코드를 로드합니다.