在Vue3中使用谷歌reCaptcha v2验证

前言:reCaptcha验证就是登录前,巨烦人的那个人机验证。最近新创建的项目需要加入这个功能,使用的是复选框验证,本篇也是对这个进行展开记录。

将会遇到的问题:

  1. 国内如何使用reCaptcha验证?
  2. 需要搭梯子(文明上网)访问google的reCaptcha创建密钥

1、创建密钥

点击前往官网reCaptcha(梯子访问), 登录谷歌账号

然后可以根据以下步骤进行:

按照描述填好,然后点击提交

这里就可以获取到密钥,这里选择的是客户端集成的(看项目需要),所以复制了这个密钥,再分析完成后,可以点击转到设置

这里还可以对配置信息进行编辑,一般我会收藏这个设置的网址,方便后续打开修改配置信息。

进行到这里,就拿到了密钥了。

2、封装

当然,github上查找vue reCaptcha也可以查找到别人封装好的,但是,在项目上,不太好随便去安装别人的依赖。

访问链接可以查看具体配置信息。

首先,reCaptcha密钥目前是个人的,需要更换,且属于项目中的隐私数据,所以采取在env文件里面存放。

前提:vue3 + vite;

js 复制代码
# 开发环境.env.development(生产环境也是这样配置.env.production)
# 访问方式:import.meta.env
# 配置方式:VITE_ 开头
VITE_API_SITEKEY='复制下来的密钥'

在vue3项目里面的index.html文件加入

js 复制代码
//需要梯子
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
//文件介绍说是全球都可以访问,但是在国内,我访问失败了
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
//最后,试了一下,下面这个是可以访问到的
<script src="//recaptcha.net/recaptcha/api.js" async defer></script>

展示一下index.html

js 复制代码
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="shortcut icon" type="image/svg+xml" href="/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,user-scalable=no" />
        <title>PayExcel</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
        <script src="//recaptcha.net/recaptcha/api.js" async defer></script>
    </body>
</html>

文件引入完成后,可以进行封装,创建reCaptcha.vue文件,将这个文件导入到要渲染的位置就可以了。

js 复制代码
<template>
    <div id="grecaptcha"></div>
</template>

<script setup>
import { onMounted } from "vue";

const props = defineProps({
    sitekey: {//密钥
        type: String,
        required: true,
    },
    size: {//大小
        type: String,
        default: "normal",
    },
    theme: { //主题风格 dark
        type: String,
        default: "light",
    },
    hl: { //语言
        type: String,
        default: "zh",
    },
    delay: { //这个延迟是因为要等待引入的script文件生效
        type: Number,
        default: 200,
    },
});

const emits = defineEmits(["verify", "expire", "fail"]);

const expireCallback = function () {
    emits("expire"); 
};
const failCallback = function () {
    emits("fail");
};
const verifyCallback = function (token) {
    emits("verify", token); //这个是返回的token,给后端去处理。
};

const onloadCallback = function () {
    setTimeout(() => {
        if (window.grecaptcha?.render) {
            window.grecaptcha.render("grecaptcha", {
                //根据reCaptcha的配置
                sitekey: props.sitekey,
                theme: props.theme,
                hl: props.hl,
                size: props.size,
                "expired-callback": expireCallback,
                "error-callback": failCallback,
                callback: verifyCallback,
            });
        }
    }, props.delay);
};

onMounted(() => {
    onloadCallback();
});
</script>

<style lang="less" scoped></style>

3、常见问题处理

可以直接访问官网,点击链接就可以查看,收集的问题还是挺全的,相信能够找到属于你的解决方法。

相关推荐
策码1 分钟前
MutationObserver监听网页二次渲染和子节点变化
前端·javascript
前端大白话2 分钟前
前端必知!HTML中`<a>`标签target属性全攻略:新窗口、当前窗口、指定框架一网打尽
前端·架构·html
天狗精灵2 分钟前
从节点重排看React 与 Vue3 的 Diff 算法
前端·vue.js·react.js
前端大白话3 分钟前
前端必学!CSS gap属性在Flexbox和Grid布局中的“间距魔法”
前端·css·设计模式
作曲家种太阳4 分钟前
加餐- Vue3中响应式的 watch 流程实现解读【手摸手带你实现一个vue3】
前端
前端大白话5 分钟前
React 必知!useLayoutEffect Hook 与 useEffect 的终极对决,DOM 操作和动画的秘密武器
前端·javascript·react.js
海底火旺5 分钟前
JavaScript 原型探秘:深入理解 .constructor 属性
前端·javascript·深度学习
前端大白话5 分钟前
Vue中provide/inject与Vuex数据共享大比拼:一文教你选对方案
前端·javascript·vue.js
Postkarte不想说话6 分钟前
WebGL中使用JS改变点位
前端
海底火旺6 分钟前
"神奇!不用除法,如何算出数组中每个元素'邻居'的乘积?"
前端·javascript·面试