보이지 않는 reCAPTCHA

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

보이지 않는 reCAPTCHA를 호출하려면 다음 중 하나를 실행하면 됩니다.

보이지 않는 reCAPTCHA를 맞춤설정하는 방법은 구성을 참고하세요. 예를 들어 언어 또는 배지 위치를 지정할 수 있습니다.

사용자가 보안문자를 풀었는지 확인하려면 사용자의 응답 인증하기를 참고하세요.

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

페이지에서 보이지 않는 reCAPTCHA 위젯을 사용하는 가장 쉬운 방법은 필요한 JavaScript 리소스를 포함하고 html 버튼에 몇 가지 속성을 추가하는 것입니다. 필요한 속성은 클래스 이름 'g-recaptcha', data-sitekey 속성의 사이트 키, data-callback 속성의 보안문자 완료를 처리하기 위한 JavaScript 콜백의 이름입니다.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

스크립트는 HTTPS 프로토콜을 사용하여 로드되어야 하며 페이지의 어느 위치에서나 제한 없이 포함될 수 있습니다.

챌린지를 버튼에 프로그래매틱 방식으로 바인딩하거나 챌린지를 호출합니다.

onload 콜백 함수를 지정하고 JavaScript 리소스에 매개변수를 추가하여 결합을 연기할 수 있습니다. 이는 일반 reCAPTCHA 챌린지와 동일하게 작동합니다.

챌린지를 프로그래매틱 방식으로 호출합니다.

data-size="invisible" 속성을 사용하여 div에서 챌린지를 렌더링하고 프로그래매틱 방식으로 실행을 호출하여 프로그래매틱 방식으로 reCAPTCHA 인증을 호출할 수 있습니다.

  1. data-size="invisible"로 div를 만듭니다.

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. 자바스크립트 메서드에서 grecaptcha.execute를 호출합니다.

    grecaptcha.execute();

    콜백이 실행될 때 JavaScript API에서 grecaptcha.render 메서드를 호출할 수 있습니다.

    <ph type="x-smartling-placeholder">

구성

JavaScript 리소스(api.js) 매개변수

매개변수 값 설명
onload 선택사항입니다. 모든 종속 항목이 로드되면 실행될 콜백 함수의 이름입니다.
render 명시적
onload		 선택사항. 위젯을 명시적으로 렌더링할지의 여부입니다. 기본적으로 onload로, 발견된 첫 번째 g-recaptcha 태그에서 위젯을 렌더링합니다.
hl 언어 코드 참조 선택사항. 위젯이 특정 언어로 렌더링되도록 합니다. 지정하지 않았으면 사용자의 언어를 자동으로 감지합니다.

g-recaptcha 태그 속성 및 grecaptcha.render 매개변수

g-recaptcha 태그 속성 grecaptcha.render 매개변수 값 기본값 설명
data-sitekey sitekey sitekey입니다.
data-badge 배지 bottomright bottomleft inline bottomright 선택사항. reCAPTCHA 배지 위치를 변경합니다. 'inline'[인라인] CSS를 사용하여 광고 소재를 배치할 수 있습니다.
data-size 크기 숨김 선택사항입니다. div에 바인딩되고 프로그래매틱 방식으로 실행되는 보이지 않는 위젯을 만드는 데 사용됩니다.
data-tabindex tabIndex 0 선택사항입니다. 챌린지의 tabindex입니다. 페이지의 다른 요소에 tabindex가 사용되는 경우 사용자 탐색이 쉽도록 설정해야 합니다.
data-callback 콜백 선택사항. 사용자가 성공 응답을 제출할 때 실행되는 콜백 함수의 이름입니다. g-recaptcha-response 토큰이 콜백에 전달됩니다.
data-expired-callback expired-callback 선택사항. reCAPTCHA 응답이 만료되어 사용자가 다시 확인을 수행해야 할 때 실행되는 콜백 함수의 이름입니다.
data-error-callback error-callback 선택사항. reCAPTCHA에 오류(일반적으로 네트워크 연결)가 발생하여 연결이 복원될 때까지 계속할 수 없는 경우 콜백 함수의 이름입니다. 여기에 기능을 지정하면 귀하는 사용자에게 재시도하도록 알려야 할 책임이 있습니다.
고립 거짓 선택사항입니다. 플러그인 소유자가 페이지의 기존 reCAPTCHA 설치를 방해하지 않습니다. true인 경우 이 reCAPTCHA 인스턴스는 별도의 ID 공간에 포함됩니다.

JavaScript API

방법 설명
grecaptcha.render (
)
container,
매개변수
상속
) 		컨테이너를 reCAPTCHA 위젯으로 렌더링하고 새로 생성된 위젯의 ID를 리턴합니다.
컨테이너
reCAPTCHA 위젯을 렌더링하기 위한 HTML 요소.  컨테이너의 ID(문자열)나 DOM 요소 자체를 지정하십시오.
매개변수
  {"sitekey": "your_site_key", "theme": "light"}와 같이 key=value 쌍으로 매개변수를 포함하는 객체입니다. grecaptcha.render 매개변수를 참고하세요.
상속
해당 매개변수가 지정되지 않은 경우 요소에서 기존 data-* 속성을 사용합니다. 매개변수가 속성보다 우선 적용됩니다.
grecaptcha.execute(
opt_widget_id
) 		reCAPTCHA 검사를 프로그래매틱 방식으로 호출합니다. 보이지 않는 reCAPTCHA가 버튼이 아닌 div에 있는 경우 사용됩니다.
opt_widget_id
  선택적 위젯 ID로, 지정되지 않은 경우 생성되는 첫 번째 위젯의 기본값이 사용됩니다.
grecaptcha.reset(
opt_widget_id
) 		reCAPTCHA 위젯을 재설정합니다.
opt_widget_id
  선택적 위젯 ID로, 지정되지 않은 경우 생성되는 첫 번째 위젯의 기본값이 사용됩니다.
grecaptcha.getResponse(
opt_widget_id
) 		reCAPTCHA 위젯의 응답을 가져옵니다.
opt_widget_id
선택적 위젯 ID로, 지정되지 않은 경우 생성된 첫 번째 위젯이 기본값입니다.

예

onload 콜백 후 명시적 렌더링

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

클라이언트 측 유효성 검사 후 보이지 않는 reCAPTCHA 챌린지를 호출합니다.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>