校园网站页面设计品牌网站建设制作

#本文仅教学前端， 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. 前端实现步骤

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

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

2.  登录界面找个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>

3. 加载时渲染或者回调

   <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 = tokenconsole.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>

4.  如果是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 v3const 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 = tokenresolve(token)})})} else {console.error('reCAPTCHA 未加载')resolve('')}})
   }const onSubmit = async () => {// 在提交表单时执行验证const token = await executeRecaptcha()console.log('表单提交，验证令牌:', token)// 这里添加你的登录逻辑，将token发送到服务器进行验证
   }
   </script>

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