StarFire_xm
  • 文章
  • 粉丝
  • 评论

接入谷歌验证vue-grecaptcha

2021-06-28 20:25:520 次浏览0 次评论技能类型: vue

在.html文件得hear中引入js脚本

 <script src="http://www.recaptcha.net/recaptcha/api.js?onload=ReCaptchaLoaded&render=explicit&hl=en" async defer> 
 <script src="https://www.recaptcha.net/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>
 <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer> 
 中国区可以使用:www.recaptcha.net
 国外区可以使用:www.google.com
 
 然后是vue页面使用方式:
 安装:
 npm i vue-recaptcha -S
 然后引入:
 import VueGrecaptcha from "vue-recaptcha";
 components: {
    VueGrecaptcha,
  },
  使用方式:
   <!--size="invisible"-->
    <!--theme=light/dark-->
    <vue-grecaptcha
      class="repha"
      ref="recaptcha"
      recaptchaHost="www.recaptcha.net"
      @verify="recaptchaVerify"
      @expired="resetExpired"
      @error="resetError"
      theme="light"
      sitekey="6LdRAGAbAAAAALYKqbTM2ZCT_o_iauryGEqGaCt6"
    >
      <div>验证码</div>
    </vue-grecaptcha>
    
    
     onSubmit: function () {
      this.$refs.recaptcha.execute();
    },
    resetRecaptcha() {
      this.$refs.recaptcha.reset(); // Direct call reset method
    },
    recaptchaVerify(d) {
      console.log("recaptchaVerify");
      console.log(d);
    },
    resetExpired(d) {
      console.log("resetExpired");
      console.log(d);
    },
    resetError(d) {
      console.log("resetError");
      console.log(d);
    },


    发表

    还没有评论哦,来抢个沙发吧!