vue使用Google Recaptcha验证的实现示例
时间：2022-04-21 09:44:49 | 栏目：vue | 点击：次
我们最近的项目中需要使用谷歌机器人验证，这个最主要的就是要有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 店?n?鬏d??I用?Y料.002.png" alt="">
<img src="../../assets/image/202010_JP NIGHT 店?n?鬏d??I用?Y料.003.png" alt="">
<!-- </div> -->
<!-- <div class="home-content-imgbottom"> -->
<img src="../../assets/image/202010_JP NIGHT 店?n?鬏d??I用?Y料.004.png" alt="">
<img src="../../assets/image/202010_JP NIGHT 店?n?鬏d??I用?Y料.005.png" alt="">
<!-- </div> -->
</div>
<div class="home-content-bottom">
<p> <a href="http://www.jp-night.com/terms.html" rel="external nofollow" >利用??s</a>? <a href="http://www.jp-night.com/privacy.html" rel="external nofollow" >プライバシ一ポリシ一</a>に同意の上 に同意の上でお?Mみください </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()">店?n揭?dを?昴激工?</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.就完成啦，谷歌机器人就可以使用啦。
示意图：
