| 我们最近的项目中需要使用谷歌机器人验证，这个最主要的就是要有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.在需要的地方使用： |
