多表单 reCAPTCHA 显式呈现中“Invalid key type”错误的终极指南

javascript

2024-03-17 05:44:27

如何解决多表单显式呈现谷歌 reCAPTCHA 时出现的“Invalid key type”错误

问题

在使用显式呈现方式在单页上实现多个谷歌 reCAPTCHA 表单时，开发人员可能会遇到“Invalid key type”错误。此错误表明创建 reCAPTCHA 密钥时使用了错误的密钥类型。

解决方案

解决此错误需要采取以下步骤：

检查密钥类型

确保在创建 reCAPTCHA 密钥时选择了“企业”密钥类型。标准密钥类型不适用于显式呈现。

验证域名

验证用于托管网页的域名已与 reCAPTCHA 密钥关联。转到 reCAPTCHA 管理控制台并检查域名的验证状态。

使用显式呈现

使用 grecaptcha.enterprise.render() 函数加载 reCAPTCHA 小部件，明确指定“explicit”渲染模式。显式呈现需要明确用户交互，例如按钮点击，才能触发 reCAPTCHA 验证。

分配小部件 ID

为每个 reCAPTCHA 小部件分配一个唯一的 ID。此 ID 将用于与 reCAPTCHA API 交互并执行验证。

检查执行方法

确保 execute() 方法的参数正确。它应该包括小部件 ID 作为第一个参数。如果调用不正确，可能会导致“Invalid key type”错误。

代码示例

以下代码示例演示了如何在多表单中实现显式呈现 reCAPTCHA：

<form id="form1">
  <div class="g-recaptcha" data-callback="onSubmit1"></div>
</form>
<form id="form2">
  <div class="g-recaptcha" data-callback="onSubmit2"></div>
</form>

const captchaCallback = function () {
  const widgetIds = [];
  const recaptchaElements = document.querySelectorAll('.g-recaptcha');
  for (let i = 0; i < recaptchaElements.length; i++) {
    const widgetId = grecaptcha.enterprise.render(recaptchaElements[i], {
      sitekey: 'YOUR_SITE_KEY',
    });
    widgetIds.push(widgetId);
    recaptchaElements[i].setAttribute('data-widget-id', widgetId);
  }
  return widgetIds;
};

const onSubmit1 = function (token) {
  // reCAPTCHA 验证成功后的逻辑
};

const onSubmit2 = function (token) {
  // reCAPTCHA 验证成功后的逻辑
};