从 g-recaptcha 标签获取 reCAPTCHA v2 的 widgetId？

Question

嗨，这是我第一次尝试在这里发布问题。

我想知道我是否可以从 g-recaptcha 标签 而不是从 grecaptcha.render() 的返回值中获取 widgetId reCAPTCHA v2.

这背后的原因是我有 2 个不同的脚本来处理同一页面上的每 2 个表单。 我希望能够单独重置 reCAPTCHA。

每个脚本都有自己的 onload 回调，应该得到自己的 widgetId。 但这不起作用，因为 google reCAPTCHA 代码的 url 参数似乎只能调用 1 个 onload 回调函数。

我无法将多个 onload 回调函数设置为 recaptcha 源 url，如下所示。

"https://www.google.com/recaptcha/api.js?onload=onloadCallback1,onloadCallback2&render=onload"

"https://www.google.com/recaptcha/api.js?onload[]=onloadCallback1&onload[]=onloadCallback2&render=onload"

所以我想也许我可以在加载后从 g-recaptcha 标签中获取小部件 ID...

有什么想法或解决方案吗？？？

Answer 1

嗯，这并不复杂，但我想出了一个根据 g-recapctha class 的顺序获取小部件 ID 的想法。该函数接受目标 recaptcha 框的 id 作为参数，returns 与关联的 g-recaptcha class 的索引。

// recaptha box 1
<div id="recaptchaBox-1" class="g-recaptcha" data-sitekey="xxx"></div>
<input id="resetBtn1" type="button" value="Reset1">

// recaptha box 2    
<div id="recaptchaBox-2" class="g-recaptcha" data-sitekey="xxx"></div>
<input id="resetBtn2" type="button" value="Reset2">

/**
 * Returns widgetId from a given element id
 * @param {string} elementId 
 * @return {number} i
 */
function getWidgetId(elementId) {
  const recaptchaBoxes = document.querySelectorAll('.g-recaptcha');
  const targetBox = document.querySelector(`#${elementId}`);
  for (let i = 0; i < recaptchaBoxes.length; i++) {
    if (recaptchaBoxes[i].id === targetBox.id) {
      return i;
    }
  }
}

// Get the widgetId for each boxes.
const widgetId1 = getWidgetId('recaptchaBox-1');
const widgetId2 = getWidgetId('recaptchaBox-2');

// Assign grecaptcha.reset() for each buttons on click event.
document.getElementById('resetBtn-1').addEventListener('click', () => grecaptcha.reset(widgetId1));
document.getElementById('resetBtn-2').addEventListener('click', () => grecaptcha.reset(widgetId2));

Answer 2

问题是如何有2个回调？怎么样：“...onload=twoCallbacks”

function twoCallbacks(...args){
  callback1(...args)
  callback2(...args)
}