在vue中使用Google Recaptcha验证

我们最近的项目中需要使用谷歌机器人验证，这个最主要的就是要有vpn，还需要有公司申请的google账号（自己申请的没用）用于商用的，利用这个账号去申请秘钥，然后有了秘钥之后就可以了。
部分代码如下：
首先正是我封装的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">利用規約</a>· <a href="http://www.jp-night.com/privacy.html">プライバシ一ポリシ一</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】在vue中使用google地图
文章目录前言前期准备一.获取google地图的key 二.使用步骤 1.安装google官方依赖 2.使用googlemap 其他小方法1:设置marker 其他小方法2:设置infowindo ...
2021年在vue中使用 Google Map
目前在vue中使用google map有以下两种方法: 一.使用 JavaScript 创建地图实例该方法优点在于可配置项多,方便自定义,缺点是较复杂,且文档为英文,有一定学习难度. 在开始之前确保 ...
谷歌 recaptcha_在Spring Boot应用程序中使用Google reCaptcha
谷歌 recaptcha 介绍 Google的reCaptcha是一个库,用于防止漫游器将数据提交到您的公共表单或访问您的公共数据. 在本文中,我们将研究如何将reCaptcha与基于Spring B ...
vue 中input的输入验证
在vue中用最普通的input对内容做限制比较容易,但是没有样式,比较丑,比如只能输入文字(以下都以文字为例),直接对其值正则匹配即可 >查看其他匹配的方法< <input typ ...
vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好,如果没有引入好的话,需要先跟着element-ui的文档进行操作,接下来就可以进行学习了. 第一种:在el-form-item单个添加验证这种方 ...
vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计（选项处理）...
我"崩"不住了,在彭凡同志锲而不舍的催促下这篇文章终于"蛋"生了. 说正经的这篇文章不好写,不好写的原因是我不太擅长写这些类比文,但它还是写出来了. 相信大部分 ...
vue中使用google地图（自定义label、信息窗口）
最近公司爱尔兰项目需要使用google地图,项目还是用vue写的,那我就寻思找个vue能用的google地图的插件吧,找了vue2-google-maps,这个插件确实还行,而且github上还有ap ...
element ts vue 中的表单验证出现红色波浪线的解决方法
使用google身份验证器实现动态口令验证
最近有用户反应我们现有的短信+邮件验证,不安全及短信条数限制和邮件收验证码比较慢的问题,希望我们也能做一个类似银行动态口令的验证方式.经过对可行性的分析及慎重考虑,可以实现一个这样的功能. 怎么实现 ...

在vue中使用Google Recaptcha验证

在vue中使用Google Recaptcha验证相关推荐

最新文章

热门文章