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단계 인증 또는 이메일 인증을 요구합니다. |
소셜 | 악의적인 사용자로부터 응답하지 않은 친구 요청을 제한하고 위험한 댓글을 신고하세요. |
전자상거래 | 봇보다 실제 매출을 우선적으로 고려하고 위험한 거래를 파악합니다. |
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
}
팁
- reCAPTCHA 라이브러리가 로드되면
grecaptcha.ready()
가 함수를 실행합니다. 받는사람api.js
로 경합 상태를 피하려면api.js
을 grecaptcha를 호출하거나 onload 콜백을 호출합니다. - 다음과 같이 흥미롭거나 민감한 작업에
execute
호출을 끌어 보세요. 등록, 비밀번호 재설정, 구매 또는 재생 https://www.google.com/recaptcha/api.js?trustedtypes=true
사용 용도 신뢰할 수 있는 유형과 호환되는 코드를 로드합니다.