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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP 变量的定义方法
2010/01/26 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python单例模式实例分析
2015/01/14 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
对python中return与yield的区别详解
2020/03/12 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
防灾减灾宣传标语
2014/10/07 职场文书
2014年超市工作总结
2014/11/19 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript