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


Posted in Vue.js onAugust 23, 2021

我们最近的项目中需要使用谷歌机器人验证,这个最主要的就是要有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 店??鬏d??I用?料.002.png" alt="">
          <img src="../../assets/image/202010_JP NIGHT 店??鬏d??I用?料.003.png" alt="">
        <!-- </div> -->
        <!-- <div class="home-content-imgbottom"> -->
          <img src="../../assets/image/202010_JP NIGHT 店??鬏d??I用?料.004.png" alt="">
          <img src="../../assets/image/202010_JP NIGHT 店??鬏d??I用?料.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()">店?揭?を?昴激工?lt;/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验证的实现示例的文章就介绍到这了,更多相关vue Google Recaptcha验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
详解Vue的options
May 15 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
Vue3.0 手写放大镜效果
vue项目多环境配置(.env)的实现
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
idea编译器vue缩进报错问题场景分析
You might like
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python中的heapq模块源码详析
2019/01/08 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
python多线程和多进程关系详解
2020/12/14 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
防溺水主题班会教案
2015/08/12 职场文书
运动会主持人开幕词
2016/03/04 职场文书