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

보이지 않는 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 인증을 호출할 수 있습니다.

data-size="invisible"를 사용하여 div를 만듭니다.

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

자바스크립트 메서드에서 grecaptcha.execute를 호출합니다.
```
grecaptcha.execute();
```
콜백이 실행되면 JavaScript API에서 grecaptcha.render 메서드를 호출할 수 있습니다.
<ph type="x-smartling-placeholder">
</ph> reCAPTCHA API가 로드되기 전에 onload 콜백 함수를 정의해야 합니다. 경합 상태가 없는지 확인하려면 다음을 실행합니다. <ph type="x-smartling-placeholder">
- 먼저 콜백으로 스크립트를 정렬한 후 reCAPTCHA
- `script` 태그에 `async` 및 `defer` 매개변수 사용

구성

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

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

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

g-recaptcha 태그 속성	grecaptcha.render 매개변수	값	기본	설명
data-sitekey	sitekey			사이트 키
데이터 배지	배지	bottomright bottomleft inline	bottomright	선택사항. reCAPTCHA 배지 위치를 변경합니다. 'inline'[인라인] CSS를 사용하여 광고 소재를 배치할 수 있습니다.
data-size	크기	숨김		선택사항입니다. div에 바인딩되고 프로그래매틱 방식으로 실행되는 보이지 않는 위젯을 만드는 데 사용됩니다.
data-tabindex	tabIndex		0	선택사항입니다. 챌린지의 tabindex입니다. 페이지의 다른 요소에 tabindex가 사용되는 경우 사용자 탐색이 쉽도록 설정해야 합니다.
data-callback	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>