通过https://www.google.com/recaptcha/admin/site/713142389/setup配置获取网站密钥

html

<template>

  <div id="grecaptcha"></div>

</template>

js

<script setup>

import { onMounted } from "vue";

const emits = defineEmits(["verify", "expire", "fail"]);

const expireCallback = function () {

  emits("expire");

  console.log(3);

};

const failCallback = function () {

  emits("fail");

  console.log(2);

};

const verifyCallback = function (token) {

  emits("verify", token); //这个是返回的token，给后端去处理。

  console.log(1);

};

这三个函数是 reCAPTCHA 提供的回调函数，用于处理不同的事件。

• expireCallback：当 reCAPTCHA 过期时触发，调用 emits("expire") 发出 expire 事件。
• failCallback：当 reCAPTCHA 验证失败时触发，调用 emits("fail") 发出 fail 事件。
• verifyCallback：当 reCAPTCHA 验证成功时触发，传入一个 token，该 token 用于后端验证，调用 emits("verify", token) 发出 verify 事件，并将 token 作为参数传递。

const onloadCallback = function () {

  setTimeout(() => {

    if (window.grecaptcha?.render) {

      window.grecaptcha.render("grecaptcha", {

        //根据reCaptcha的配置

        sitekey: "",//网站密钥

        theme: "light",

        hl: "zh",

        size: "normal",

        "expired-callback": expireCallback,

        "error-callback": failCallback,

        callback: verifyCallback,

      });

    }

  }, 200);

};

onMounted(() => {

  onloadCallback();

});

</script>