vue3项目，前端如何使用reCAPTCHA v3实现人机验证

前言：

一、参考网站：reCAPTCHA v3  |  Google for Developers

二、整体思路：

• 前端：生成 reCAPTCHA token（通过 grecaptcha.execute()）并将token发送到后台。
• 后台：使用 Secret Key 和传来的 token 向 Google 的 reCAPTCHA API 发起验证请求。
• Google API：返回验证结果（成功或失败），并在后台根据返回的结果进行处理。

正文：

1、首先获取到siteKey

打开网站：https://www.google.com/recaptcha/admin/create

提交信息后会给你两个密钥：

（下文中用到的siteKey，就是上图中你获取到的第一个密钥；第二个密钥是后端使用的）

2、在项目的public/index.html文件里加载API

  <script src="https://www.google.com/recaptcha/api.js?render=你的siteKey"></script>

3、设置点击按钮，完成验证后，将获取到的token传给后端即可

（以下代码直接复制即可使用）

 <button @click="verifyCaptcha" :disabled="!recaptchaLoaded">验证 reCAPTCHA</button>

<script setup>
import { ref,onMounted } from "vue";
const siteKey = '你的siteKey';
const recaptchaLoaded = ref(false);  // 用来标记 reCAPTCHA 是否加载完毕
// 确保 reCAPTCHA 脚本加载完毕
const loadRecaptcha = () => {
  return new Promise((resolve, reject) => {
    if (window.grecaptcha) {
      resolve(window.grecaptcha); // 已经加载，直接返回
    } else {
      // 动态加载 reCAPTCHA 脚本
      const script = document.createElement('script');
      script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
      script.async = true;
      script.onload = () => {
        resolve(window.grecaptcha);
      };
      script.onerror = (error) => {
        reject(new Error('Failed to load reCAPTCHA script'));
        console.log("脚本加载完毕",error);
      };
      document.head.appendChild(script);
    }
  });
};

// 验证函数
const verifyCaptcha = async () => {
  try {
    const grecaptcha = await loadRecaptcha();  // 确保 grecaptcha 加载完成
    const token = await grecaptcha.execute(siteKey, { action: 'submit' });
    console.log('reCAPTCHA token:', token);

    //这里调用接口， 把token 发送到后端进行验证
   
  } catch (error) {
    console.error('reCAPTCHA 验证失败:', error);
  }
};

// 确保在组件挂载时加载 reCAPTCHA
onMounted(async () => {
  try {
    await loadRecaptcha();
    recaptchaLoaded.value = true;  // 脚本加载完成
  } catch (error) {
    console.error('加载 reCAPTCHA 时出错:', error);
  }
});

示例效果：

（点击左侧按钮，将右侧打印出来的token传给后端即可）

（本文样式没有调，可以根据需求，自行设置为其他样式）

右下角会出现谷歌图标，如下图所示（如果想隐藏掉），代码如下：

在public/index.html文件中

  .grecaptcha-badge{
      display: none !important;
    }