reCAPTCHA v3는 사용자를 방해하지 않고 각 요청에 대한 점수를 반환합니다. 점수는 사이트와의 상호작용을 기반으로 하며 이를 기준으로 사이트에 적절한 조치를 취할 수 있습니다. reCAPTCHA 관리 콘솔에서 reCAPTCHA v3 키를 등록합니다.
이 페이지에서는 웹페이지에서 reCAPTCHA v3를 사용 설정하고 맞춤설정하는 방법을 설명합니다.
웹사이트에서 삽입 위치
reCAPTCHA v3는 사용자를 방해하지 않으므로 전환에 영향을 주지 않고 원할 때 언제든지 실행할 수 있습니다. reCAPTCHA는 적법한 동작과 악의적인 동작을 모두 인식하여 사이트와의 상호작용에 대한 컨텍스트가 가장 많을 때 가장 효과적입니다. 따라서 분석할 페이지의 백그라운드뿐만 아니라 양식이나 작업에도 reCAPTCHA 인증을 포함하는 것이 좋습니다.
동일한 페이지에서 원하는 만큼 많은 작업에 대해 reCAPTCHA를 실행할 수 있습니다.
챌린지를 버튼에 자동으로 바인딩
페이지에서 reCAPTCHA v3를 사용하는 가장 쉬운 방법은 필요한 JavaScript 리소스를 포함하고 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
}
팁
- reCAPTCHA 라이브러리가 로드되면
grecaptcha.ready()
가 함수를 실행합니다.api.js
와의 경합 상태를 방지하려면 grecaptcha를 호출하는 스크립트 앞에api.js
를 포함하거나 v2 API로 정의된 onload 콜백을 계속 사용합니다. - 등록, 비밀번호 재설정, 구매, 재생과 같이 흥미롭거나 민감한 작업에
execute
호출을 연결합니다. https://www.google.com/recaptcha/api.js?trustedtypes=true
를 사용하여 신뢰할 수 있는 유형과 호환되는 코드를 로드합니다.