如何在 Vue 3.x 登录界面中添加图形验证码？

在 Vue 3.x 的登录界面中添加图形验证码，可以通过以下步骤实现。由于 Vue 3.x 没有专门的图形验证码插件，我们可以借助第三方验证码服务（如 Google reCAPTCHA、hCaptcha 或自建验证码服务）来完成集成。

步骤 1：选择图形验证码服务

推荐使用以下成熟的验证码服务：

Google reCAPTCHA（v2 或 v3）：提供“我不是机器人”复选框或隐形验证。
hCaptcha：注重隐私的替代方案，API 与 reCAPTCHA 类似。
自建验证码服务：如通过后端生成图片验证码（需前后端配合）。

步骤 2：在 Vue 3.x 中集成验证码

以 Google reCAPTCHA v2 为例，具体实现如下：

1. 注册 reCAPTCHA 密钥

访问
Google reCAPTCHA 控制台
。
注册站点，选择 reCAPTCHA v2 的“我不是机器人”选项。
获取 site key 和 secret key（后者用于后端验证）。

2. 安装依赖（可选）

如果使用 npm 包（如 vue-recaptcha-v3），可运行：

npm install vue-recaptcha-v3

但此处我们直接通过 <script> 标签引入 reCAPTCHA 的 API。

3. 在 Vue 组件中实现<template> <div class="login-container"> <form @submit.prevent="handleSubmit">  <input v-model="username" type="text" placeholder="用户名" required /> <input v-model="password" type="password" placeholder="密码" required />  <div ref="recaptcha" class="g-recaptcha"></div> <button type="submit">登录</button> </form> </div></template><script>import { ref, onMounted } from 'vue';export default { setup() { const username = ref(''); const password = ref(''); const recaptcha = ref(null); // 加载 reCAPTCHA 脚本 onMounted(() => { const script = document.createElement('script'); script.src = `

https://www.google.com/recaptcha/api.js?render=explicit

`; script.async = true; script.defer = true; document.head.appendChild(script); script.onload = () => { // 渲染 reCAPTCHA 小部件 window.grecaptcha.render(recaptcha.value, { sitekey: 'YOUR_SITE_KEY', // 替换为你的 site key callback: (token) => { // 用户验证成功后的回调 console.log('reCAPTCHA Token:', token); }, }); }; }); // 提交表单时验证 const handleSubmit = () => { const token = window.grecaptcha.getResponse(); if (!token) { alert('请完成验证码验证！'); return; } // 发送用户名、密码和 token 到后端验证 console.log('提交数据:', { username: username.value, password: password.value, token }); }; return { username, password, recaptcha, handleSubmit }; },};</script><style>.g-recaptcha { margin: 10px 0;}</style>步骤 3：后端验证

前端获取的 token 需要发送到后端，由后端调用 reCAPTCHA API 验证：

// 示例：Node.js 后端验证const axios = require('axios');app.post('/verify-captcha', async (req, res) => { const { token } = req.body; const secretKey = 'YOUR_SECRET_KEY'; const verifyUrl = `

https://www.google.com/recaptcha/api/siteverify?secret=

${secretKey}&response=${token}`; const response = await axios.post(verifyUrl); if (response.data.success) { res.send('验证码验证通过'); } else { res.status(400).send('验证码验证失败'); }});替代方案：自建验证码

如果不想依赖第三方服务，可以通过后端生成图片验证码：

后端生成验证码图片并返回 base64 或 URL。
前端显示图片并提交用户输入的验证码。
后端比对用户输入与生成的验证码。

<template> <div> <img :src="captchaImage" @click="refreshCaptcha" alt="验证码" /> <input v-model="captchaInput" placeholder="输入验证码" /> </div></template><script>import { ref, onMounted } from 'vue';export default { setup() { const captchaImage = ref(''); const captchaInput = ref(''); const fetchCaptcha = async () => { const response = await fetch('/api/captcha'); const data = await response.json(); captchaImage.value = data.image; // 假设返回 base64 图片 }; onMounted(fetchCaptcha); return { captchaImage, captchaInput, refreshCaptcha: fetchCaptcha }; },};</script>注意事项

安全性：确保验证码服务与后端验证逻辑安全，避免前端绕过。
用户体验：避免过度复杂的验证码影响登录流程。
移动端适配：reCAPTCHA 在移动端需测试兼容性。

通过以上步骤，你可以在 Vue 3.x 登录界面中高效集成图形验证码，提升安全性。

您可能感兴趣问答

Collapsible

热门标签

热点问答