vue使用Google Recaptcha验证的实现示例

我们最近的项目中需要使用谷歌机器人验证，这个最主要的就是要有vpn，还需要有公司申请的google账号（自己申请的没用）用于商用的，利用这个账号去申请秘钥，然后有了秘钥之后就可以了。
部分代码如下：

1.首先正是我封装的google机器人验证组件：

<template>
   <div ref="grecaptcha">
   </div>
   <!-- <div id="robot"></div> -->

</template>
<script src="http://www.recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit&hl=en" async defer></script>
<script>
export default {
 props: ["sitekey"], // 所要传的秘钥

mounted() {
   window.ReCaptchaLoaded = this.loaded;
   var script = document.createElement("script");
   script.src =
     "https://recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoaded&render=explicit";
   document.head.appendChild(script);
 },
 methods: {
   loaded() {
      window.grecaptcha.render(this.$refs.grecaptcha, {
       sitekey: this.sitekey,
       /**
       * res返回的是goole的验证情况，
       * 成功返回字符串
       * 失败不返回字符串
       * 所以根据字符串判断验证情况
       */
       callback: res => {// true  - 验证成功 // false - 验证失败

res.length > 0 ? this.$emit("getValidateCode", false) :  his.$emit("getValidateCode", true)
       }
     });
     // grecaptcha.render('robot', {
     //     sitekey: this.sitekey,
     //     /**
     //     * res返回的是goole的验证情况，
     //     * 成功返回字符串
     //     * 失败不返回字符串
     //     * 所以根据字符串判断验证情况
     //     */
     //     theme: 'light', //主题颜色，有light与dark两个值可选
     //     size: 'normal',//尺寸规则，有normal与compact两个值可选
     //     callback: res => {
     //         res.length > 0 ?  this.$emit("getValidateCode", true) :  this.$emit("getValidateCode", false)
     //         // true  - 验证成功 // false - 验证失败
     //     }
     // });

}
 },
};
</script>
<style>

</style>

2.在需要的地方使用：

<template>
 <div>
   <div class="home-content">
     <div class="home-content-img">
       <!-- <div class="home-content-imgtop"> -->
         <img src="../../assets/image/202010_JP NIGHT 店舗掲載営業用資料.002.png" alt="">
         <img src="../../assets/image/202010_JP NIGHT 店舗掲載営業用資料.003.png" alt="">
       <!-- </div> -->
       <!-- <div class="home-content-imgbottom"> -->
         <img src="../../assets/image/202010_JP NIGHT 店舗掲載営業用資料.004.png" alt="">
         <img src="../../assets/image/202010_JP NIGHT 店舗掲載営業用資料.005.png" alt="">
       <!-- </div> -->
     </div>
     <div class="home-content-bottom">
       <p> <a href="http://www.jp-night.com/terms.html" rel="external nofollow" >利用規約</a>· <a href="http://www.jp-night.com/privacy.html" rel="external nofollow" >プライバシ一ポリシ一</a>に同意の上 に同意の上でお進みください </p>
       <div class="content-google">
         <google-recaptcha ref="recaptcha" :sitekey="key" @getValidateCode='getValidateCode' v-model="validateCode"></google-recaptcha>
       </div>
       <div class="login">
         <button :class="isNext ?'login-botton-background':'login-botton'" :disabled="isNext" @click="login()">店舗揭載を応募する</button>
       </div>
     </div>

</div>
 </div>

</template>

<script>
import GoogleRecaptcha from '../../common/module/GoogleRecaptcha'
export default {
 data() {
   var checkCode = (rule, value, callback) => {
     if (value == false) {
       callback(new Error('请进行人机验证'));
     } else {
       callback();
     }
   };
   return {
     key: '6Ld9xxgaAAAAAI4xn7seMCmqbxIpVsJ_dwrZu9z1',
     validateCode: false,
     isNext:false
   };
 },
 created(){

},
 mounted(){

},
 components:{
   GoogleRecaptcha
 },
 methods:{
   login(){
     sessionStorage.setItem('token',true)

this.$router.push({
       path: "/shops",
       query: { out: true }
     })
   },
   getValidateCode(value) {
     console.log(value);

this.isNext = value
   },
 }
};
</script>

<style lang="scss" scoped>
@import "./css/pc.css";
@import "./css/ipad.css";
@import "./css/phone.css";
#rc-anchor-container {
   width: 335px;
}

</style>

3.就完成啦，谷歌机器人就可以使用啦。

示意图：

来源：https://blog.csdn.net/queen_rain/article/details/112288592