• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

我们最近的项目中需要使用谷歌机器人验证,这个最主要的就是要有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.就完成啦,谷歌机器人就可以使用啦。

示意图:

到此这篇关于vue使用Google Recaptcha验证的实现示例的文章就介绍到这了,更多相关vue Google Recaptcha验证内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ajax在js中和jQuery中的用法实例详解发布时间:2022-02-05
下一篇:
javascript代码简写的几种常用方式汇总发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap