当前位置：首页 > news >正文

ReCaptcha集成人机验证教学（Vue3篇）

news 来源：原创 2025/5/9 6:02:15

#本文仅教学前端， Vue3+TypeScript#

1. 选择 reCAPTCHA 版本

reCAPTCHA v2（用户交互式）：
- "I'm not a robot" 复选框：用户点击复选框完成验证。
- 隐形 reCAPTCHA：自动在后台触发（例如表单提交时），仅可疑流量需交互。
reCAPTCHA v3（无感验证）：
- 完全隐形，返回用户风险评分（0.0-1.0），由后端根据评分决定是否允许操作。
选择依据：
- 需要用户交互（如登录表单）→ v2。
- 需无感分析流量风险（如API调用）→ v3。
本文使用V2显性复选框

2. 注册 API 密钥

步骤：
1. 访问 Google reCAPTCHA 管理后台。
2. 注册站点，选择版本（v2/v3）。
3. 获取 Site Key（前端使用） 和 Secret Key（后端使用）。
域名配置：确保注册时填写正确的域名（如 localhost 用于本地测试）。

3. 前端实现步骤

在index.html中注入脚本和官网不一样，使用recaptcha.net对中国大陆更友好

    <!-- 集成谷歌recaptcha -->
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer onload="if(window.onRecaptchaLoaded) window.onRecaptchaLoaded()"></script>

登录界面找个div 挂载渲染实例

<template>
    <form @submit.prevent="onSubmit" class="bg-red-900 p-4">
        <div ref="recaptchaContainer"></div>
        <br />
        <input type="submit" value="提交" class="px-4 py-2 bg-blue-500 text-white rounded" />
    </form>
</template>

加载时渲染或者回调

<script setup lang="ts">
const recaptchaToken = ref('')
const recaptchaContainer = ref<HTMLElement | null>(null)

// 在组件挂载后初始化 reCAPTCHA
onMounted(() => {
    if (window.grecaptcha?.render) {
        renderRecaptcha()
    } else {
        // 定义全局回调函数，当 reCAPTCHA 脚本加载完成时会调用
        window.onRecaptchaLoaded = renderRecaptcha
    }
})

// 渲染 reCAPTCHA
const renderRecaptcha = () => {
    if (recaptchaContainer.value && window.grecaptcha) {
        window.grecaptcha.render(recaptchaContainer.value, {
            'sitekey': '这里是你注册得到的后端密钥',
            'callback': (token: string) => {
                recaptchaToken.value = token
                console.log('reCAPTCHA 验证成功')
            },
            'expired-callback': () => {
                recaptchaToken.value = ''
                console.log('reCAPTCHA 已过期，需要重新验证')
            }
        })
    }
}

// 处理表单提交
const handleSubmit = () => {
    if (!recaptchaToken.value) {
        alert('请完成人机验证')
        return
    }
    
    console.log('提交登录请求', {
        email: email.value,
        password: password.value,
        recaptchaToken: recaptchaToken.value
    })
    
    // 这里添加你的实际登录逻辑
    // 例如调用 API 进行身份验证
}
</script>

<script lang="ts">
// 为 TypeScript 声明全局 window 对象上的 reCAPTCHA 属性
declare global {
    interface Window {
        grecaptcha: any;
        onRecaptchaLoaded?: () => void;
    }
}
</script>

如果是V3

<template>
    <form @submit.prevent="onSubmit" class="bg-red-900 p-4">
        <!-- reCAPTCHA v3 是隐形的，不需要显示元素 -->
        <input type="submit" value="提交" class="px-4 py-2 bg-blue-500 text-white rounded" />
    </form>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const recaptchaToken = ref('')

onMounted(() => {
    // 加载 reCAPTCHA v3
    const script = document.createElement('script')
    script.src = 'https://www.recaptcha.net/recaptcha/api.js?render=这里还是你的前端密钥'
    document.head.appendChild(script)
})

const executeRecaptcha = () => {
    return new Promise((resolve) => {
        if (window.grecaptcha) {
            window.grecaptcha.ready(() => {
                window.grecaptcha.execute('这里也是你的前端密钥', {action: 'LOGIN'})
                    .then((token: string) => {
                        recaptchaToken.value = token
                        resolve(token)
                    })
            })
        } else {
            console.error('reCAPTCHA 未加载')
            resolve('')
        }
    })
}

const onSubmit = async () => {
    // 在提交表单时执行验证
    const token = await executeRecaptcha()
    console.log('表单提交，验证令牌:', token)
    
    // 这里添加你的登录逻辑，将token发送到服务器进行验证
}
</script>

剩下的交给后端就行了，你就复杂拿到token带给他