在Vue3中使用谷歌reCaptcha v2验证

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

将会遇到的问题：

国内如何使用reCaptcha验证？
需要搭梯子（文明上网）访问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、常见问题处理

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