여러 개의 Google Recaptcha with VueJS

Vue 구성 요소를 사용하여 AJAX 양식 제출을 사용할 때 Google의 Invisible Recaptcha 사용에 관한 질문이 있습니다. 당신이 볼 수 있듯이여러 개의 Google Recaptcha with VueJS

<template> 
    <div> 
     <div v-if="failed" style="color: red;"><strong>Sorry, the captcha validation failed. Please try again.</strong></div> 
     <div :id="name"></div> 

     <button :class="classes" type="button" @click="validate()"> 
      <slot>Submit</slot> 
     </button> 
    </div> 
</template> 

<script> 

export default { 
    props: { 
     name: { 
      type: String, 
      default: 'recaptcha', 
      required: false 
     }, 
     classes: { 
      type: String, 
      required: false, 
      default: '' 
     }, 
    }, 
    data: function() 
    { 
     return { 
      failed: false, 
     }; 
    }, 
    mounted: function() 
    { 
     this.initReCaptcha(); 
    }, 
    methods: { 
     initReCaptcha: function() { 
      var self = this; 
      setTimeout(function() { 
       if(typeof grecaptcha === 'undefined') { 
        self.initReCaptcha(); 
       } 
       else { 
        grecaptcha.render(self.name, { 
         sitekey: 'site-key-here', 
         size: 'invisible', 
         badge: 'inline', 
         callback: self.response 
        }); 
       } 
      }, 100); 
     }, 
     validate: function() 
     { 
      grecaptcha.execute(); 
     }, 
     response: function (token) 
     { 
      this.$parent.fields['g-recaptcha-response'] = token; 
      this.$parent.submit(); 
     } 
    }, 

} 

</script>

, 내가의 현재 인스턴스에 구글의 reCAPTCHA를의 콜백 함수를 지정 해요 : 난에 다음과 같은 'reCAPTCHA를 버튼'구성 요소에 포함 나는 VueJS 구성 요소를 만든

recaptcha 구성 요소의 '응답'기능 그러나 양식 중 하나를 제출할 때 페이지의 다른 구성 요소의 응답 기능을 호출하는 것으로 보입니다. 따라서 지금까지 입력이없는 양식으로 제출을 호출하려고합니다 ..

We 실제로 두 인스턴스를 생성하지 않고 두 번째 인스턴스를 생성하는 recaptcha 렌더링의 경우 일 수 있다고 생각 했으므로 콜백은 단지 덮어 쓰여지지만 마운트 된 함수의 구성 요소를 로깅하는 대신, 다시 제출하려고 시도하면 우선 인스턴스가 생성되어 덮어 쓰는 경우가 아니라고 생각하게됩니다.

문제에 대한 도움을 주시면 감사하겠습니다.

건배이 알아 낸 오후

출처

2017-10-30 Papier Moustachio

는 렌더링 기능은 위젯 ID를 반환 것을 알고하지 않았다. grecaptcha.execute()는 선택적 위젯 ID 매개 변수가 주어지지 않은 경우 전역 목록의 첫 번째 위젯 만 실행합니다.

이 문제를 해결하려면 render 함수에서 반환 한 위젯 ID를 구성 요소의 데이터 속성에 할당 한 다음 validate 함수 내에서 해당 위젯 ID를 매개 변수로 사용하여 execute를 호출하십시오.

self.widgetId = grecaptcha.render(self.name, {...}); 

validate: function() 
{ 
    grecaptcha.execute(this.widgetId); 
},

출처

2017-10-30 16:43:07

여러 개의 Google Recaptcha with VueJS

답변

관련 문제