[JQUERY] 구글 reCAPTCHA를 어떻게 요구하려면?

구글 reCAPTCHA를 어떻게 요구하려면?

해결법

1. ---

   1.당신은 reCAPTCHA를 응답 전화 등을 확인 사용해야합니다. 이런 식으로 뭔가 : <스크립트 SRC = 'HTTPS : //www.google.com/recaptcha/api.js 온로드 = reCaptchaCallback 및 렌더링 = 명시 적으로'>

   당신은 reCAPTCHA를 응답 전화 등을 확인 사용해야합니다. 이런 식으로 뭔가 : <스크립트 SRC = 'HTTPS : //www.google.com/recaptcha/api.js 온로드 = reCaptchaCallback 및 렌더링 = 명시 적으로'>

   var RC2KEY = 'sitekey',
       doSubmit = false;
   
   function reCaptchaVerify(response) {
       if (response === document.querySelector('.g-recaptcha-response').value) {
           doSubmit = true;
       }
   }
   
   function reCaptchaExpired () {
       /* do something when it expires */
   }
   
   function reCaptchaCallback () {
       /* this must be in the global scope for google to get access */
       grecaptcha.render('id', {
           'sitekey': RC2KEY,
           'callback': reCaptchaVerify,
           'expired-callback': reCaptchaExpired
       });
   }
   
   document.forms['form-name'].addEventListener('submit',function(e){
       if (doSubmit) {
           /* submit form or do something else */
       }
   })
   

2. ---

   2.ParsleyJS 위해 당신은 약간의 해결 방법을 수행하는 것입니다 :

   ParsleyJS 위해 당신은 약간의 해결 방법을 수행하는 것입니다 :

   1.Add 숨겨진 입력 필드, 데이터 파슬리 필수로 = "참"값 = ""이 같은

   <input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
   

   2.Add 오류 용기 (바로 아래 또는 g-reCAPTCHA를 div에 아래)

   <span id='errorContainer'></span>
   

   당신의 JS 코드에서이 간단한 기능 어딘가를 3.Add :

   function recaptchaCallback() {
       document.getElementById('myField').value = 'nonEmpty';
   }
   

   커스텀 기능의 값을 갖는 속성 데이터 콜백 4.Add :

   <div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>
   

3. ---

   3.현재 다른 작업 예를 찾을 수 있습니다 https://codepen.io/reactionmedia/pen/JVdmbB

   현재 다른 작업 예를 찾을 수 있습니다 https://codepen.io/reactionmedia/pen/JVdmbB

   이 예를 들어 나는 형태로 내부에 두 개의 HTML 요소를 만들려고하고있다 :

   <div id="botvalidator"></div>
   <div id="captchaerrors"></div>
   

   botvalidator은 "나는 아니다 로봇"체크 박스 내부와 구글의 reCAPTCHA를은 iframe이 포함됩니다. 해당 사용자를 확인하는 것은은 "나는 로봇이 아니다"체크 박스를 클릭하지 후 captchaerrors 오류가 포함됩니다.

   중요 : 검증 삽입하기 전에 DOM 새로운 노드가 더 이상 유효하지 않기 때문에 구글의 reCAPTCHA를가 DOM에 새로운 g-reCAPTCHA를 응답 텍스트 영역 요소를 추가하지 않을 경우 알기 위해 우리는 arrive.js 라이브러리를 사용하고 있습니다. reCAPTCHA를 몇 분의 페이지에로드 된 후이 이벤트가 발생합니다.

   당신은 arrive.js 라이브러리에서 다운로드 할 수 있습니다 : https://github.com/uzairfarooq/arrive/

   또는 예를 들어, CDN 업체에서 직접 삽입 : https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js

   피할 오류에 jQuery 라이브러리를로드 한 후 모든 라이브러리를 삽입해야합니다. 나는 JQuery와 2.2.4 버전을 사용하고 있습니다

   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
   

   또 다른 중요한 점은 "수동"reCAPTCHA를을 로딩 reCAPTCHA를 한 후 onloadCallback 기능을 실행하고 렌더링하기 위해, 이런 식으로 로딩 reCAPTCHA를 라이브러리를 기억하는 것입니다

   <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
   

   여기에 코드입니다 :

   VAR onloadCallback = 함수 () { / ** * 우리가로드 페이지로하려고하면 우리가 부하 reCAPTCHA를 할 필요가 없습니다 축하 메시지를 표시합니다. * / 경우 ($ ( "#의 botvalidator"). 길이> 0) { grecaptcha.render ( 'botvalidator', { 'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' '콜백'cleanErrors를 }); addCaptchaValidation (); / ** * 우리는 새로운 구글의 reCAPTCHA를을 확인하기 위해 라이브러리에 도착 사용하려고 * 현재 한 이후에 추가 요소가 만료 된 후 우리는 그 요소에 대한 새로운 속성을 생성합니다. 만료 - 콜백 구글의 reCAPTCHA를가 작동하지 *, 아마도 그것은 요소 생성하기 전에 실행됩니다. * https://github.com/uzairfarooq/arrive/ * / $ (문서) .arrive ( "# g-reCAPTCHA를 응답"함수 () { // '이'새로 만든 요소를 ​​참조 addCaptchaValidation (); }); } }; / ** 우리는 컨테이너에서 모든 오류를 제거하는 것입니다. * / VAR의 cleanErrors = 함수 () { $ ( "#의 captchaerrors") 비어 ().; }; VAR addCaptchaValidation = 함수 () { ( "보안 문자 유효성 검사를 추가") CONSOLE.LOG; cleanErrors (); $ ( '# myForm을') 파슬리 () (파괴)..; $ ( '# g-reCAPTCHA를 응답') ATTR ( '필요', TRUE).; // 우리는 파슬리에 새로운 유효성 검사기를 만들려고하고있다 $ ( '# g-reCAPTCHA를 응답') ATTR ( '데이터 파슬리 - 보안 문자 - 검증', TRUE).; $ ( '# g-reCAPTCHA를 응답') ATTR ( '데이터 파슬리 오류 메시지', "우리는 그것을 알고 있지만, 우리는 당신이 로봇되지 않습니다 감사합니다 확인을해야합니다..."); $ ( '# g-reCAPTCHA를 응답') ATTR ( '데이터 파슬리 - 에러 - 용기 ","#captchaerrors. "); $ ( '# myForm을') 파슬리 ().; }; / ** 우리는 새로운 파슬리 검사기를 추가 할 예정이 유효성 검사에서 호출 # g-reCAPTCHA를 응답 제출 버튼을 클릭 한 후 * / window.Parsley.addValidator ( 'captchaValidation', { validateString : 함수 (값) { 경우 (디버그)을 console.log ( "보안 문자 검증", 값); 경우 (value.length> 0) { true를 반환; } 다른 { false를 반환; } }, 메시지 : {EN : '우리는 그것을 알고 있지만, 우리는 당신이 로봇 없습니다 확인을해야합니다. 감사.'} });

   파슬리 구글 reCAPTCHA를 실시 예 <형태 ID = "myForm을"> 이름
   

   
   <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.2/parsley.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"> <스크립트 SRC = "https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit">

   즉 모든 사람들입니다.

4. ---

   4.규칙 만들기 https://laravel.com/docs/5.7/validation#custom-validation-rules

   규칙 만들기 https://laravel.com/docs/5.7/validation#custom-validation-rules

   그런 다음 컨트롤러에서 사용

   // validation
   $this->validate( $request, array(
       'g_recaptcha_response' => ['required', 'string', new Captcha()]
   ));
   

from https://stackoverflow.com/questions/29612879/google-recaptcha-how-to-make-required by cc-by-sa and MIT license