이 문서에서는 reCAPTCHA 스크립트 태그를 로드하기 위한 권장사항을 설명합니다. 이 정보는 reCAPTCHA v2와 v3 모두에 적용됩니다.
reCAPTCHA를 비동기식으로 로드하기
reCAPTCHA의 모든 버전은 비동기식으로 로드할 수 있습니다. reCAPTCHA 로드 중 의심스러운 트래픽을 식별하는 기능에 영향을 주지 않습니다. 기한 비동기 스크립트의 성능 이점, reCAPTCHA 로드 비동기식으로 사용하는 것이 좋습니다.
<script async src="https://www.google.com/recaptcha/api.js">
reCAPTCHA를 비동기식으로 로드할 때는 reCAPTCHA가 사용할 수 없습니다. 예를 들어 다음 코드는 휴식 시간:
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// If reCAPTCHA is still loading, grecaptcha will be undefined.
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
어떤 경우에는 스크립트 순서를 조정해도 경합을 방지할 수 있습니다.
조건일 수 있습니다 또는
reCAPTCHA를 로드하는 페이지의 다음 코드 스니펫을 사용하세요.
grecaptcha.ready()로 API 호출을 래핑하려면 다음 코드 스니펫을 추가하여
reCAPTCHA를 언제든지 호출할 수 있습니다.
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// How this code snippet works:
// This logic overwrites the default behavior of `grecaptcha.ready()` to
// ensure that it can be safely called at any time. When `grecaptcha.ready()`
// is called before reCAPTCHA is loaded, the callback function that is passed
// by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
// loaded.
if(typeof grecaptcha === 'undefined') {
grecaptcha = {};
}
grecaptcha.ready = function(cb){
if(typeof grecaptcha === 'undefined') {
// window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
// configuration. By default, any functions listed in its 'fns' property
// are automatically executed when reCAPTCHA loads.
const c = '___grecaptcha_cfg';
window[c] = window[c] || {};
(window[c]['fns'] = window[c]['fns']||[]).push(cb);
} else {
cb();
}
}
// Usage
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
대신 v2 API를 사용하는 사이트에서는
onload 콜백 reCAPTCHA가 완료되면 onload 콜백이 실행됩니다.
있습니다. reCAPTCHA를 로드하기 전에 onload 콜백을 정의해야 합니다.
있습니다.
<script>
const onloadCallback = function() {
console.log("reCAPTCHA has loaded!");
grecaptcha.reset();
};
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onloadCallback”></script>
reCAPTCHA를 비동기식으로 로드할 수 없는 경우(preconnect 포함)
reCAPTCHA용 리소스 힌트를 사용하는 것이 좋습니다. 이렇게 하면
스크립트 다운로드가 파서를 차단하는 데 걸리는 시간
리소스 힌트 사용
문서의 <head>에 다음과 같은 리소스 힌트를 포함하면 됩니다.
가상 머신이 사용하는 리소스를 전달하는 데 걸리는 시간을
reCAPTCHA를 사용합니다. preconnect 리소스 힌트는 브라우저에
서드 파티 출처와의 조기 연결
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
지연 로드
일반적으로 reCAPTCHA에 페이지에 관한 컨텍스트가 많을수록 좋습니다. 사용자의 행동이 합법적인지 판단하기 위한 것입니다. 이것은 사용자에게 의존하지 않는 reCAPTCHA 버전을 사용할 때 특히 그러함 해결할 수 있습니다 따라서 특정 제한된 작업까지 reCAPTCHA 로드 대기 양식 제출 등)는 일반적으로 권장되지 않습니다.