Получение widgetId из reCAPTCHA v2 из тега g-recaptcha? - PullRequest
1 голос
/ 29 мая 2020

Привет, это моя первая попытка разместить здесь вопрос.

Я хочу знать, смогу ли я когда-нибудь получить widgetId из тега g-recaptcha , а не из возвращаемого значения grecaptcha.render () из reCAPTCHA v2.

Причина в том, что у меня есть 2 разных скрипта, которые обрабатывают каждую 2 формы на одной странице. Я хочу иметь возможность сбросить reCAPTCHA индивидуально.

Каждый скрипт имеет свой собственный обратный вызов при загрузке, который должен получить свой собственный widgetId. Но это не работает, потому что кажется, что есть только одна функция обратного вызова onload, которую можно вызвать параметром url кода Google reCAPTCHA.

Я не мог установить несколько функций обратного вызова onload для URL-адреса источника recaptcha, например ниже.

"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 после загрузки ...

Любая идея или решение ???

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

А вопрос как 2 обратных вызова? Как насчет: "... onload = twoCallbacks"

function twoCallbacks(...args){
  callback1(...args)
  callback2(...args)
}
0 голосов
/ 29 мая 2020

Хммм ,,, это не сложно, но мне пришла в голову идея получить идентификатор виджета на основе порядка класса g-recapctha. Функция принимает идентификатор целевого блока рекапчи в качестве аргумента и возвращает индекс класса g-recaptcha, который связан с.

// 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));
...