javascript - Angular -recaptcha : Change language with site language change

Question

我的网站使用用户可切换的三种不同语言。语言切换由 JavaScript (AngularJS) 在客户端完成。

我在我的网站上使用 reCAPTCHA 2，当用户切换网站语言时需要更改 reCAPTCHA 的语言。

我已经知道我可以在 reCAPTCHA 初始化时通过这段代码强制使用语言:

<script src="https://www.google.com/recaptcha/api.js?hl=cs"></script>

但是，当您需要重新加载 reCAPTCHA 时，您可以使用此代码，它不接受任何自定义语言参数:

grecaptcha.reset();

是否可以不刷新页面并使用不同语言重新初始化 reCAPTCHA 小部件？

编辑

我正在使用 angular-recaptcha呈现小部件。这意味着:

• 我需要在 reCAPTCHA API 初始化后调用 vcRecaptchaApiLoaded 回调
• 我无法更改由 vcRecaptcha 指令呈现的代码

这是呈现 reCAPTCHA 小部件的代码:

<div
    vc-recaptcha
    key="'---- YOUR PUBLIC KEY GOES HERE ----'"
></div>

这是将 reCAPTCHA API 包含到我的网站中的代码:

<script
  src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit&hl=cs"
  async defer
></script>

Answer 1

您可以简单地清空 div.g-recaptcha 并再次加载 script(以编程方式)。

下面的函数应该可以解决这个问题:

function changeRecaptchaLanguage(language) {
  document.querySelector('.g-recaptcha').innerHTML = '';

  var script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js?hl=' + language;
  script.async = true;
  script.defer = true;
  document.querySelector('head').appendChild(script);
}

请看下面代码段中的示例:

function changeRecaptchaLanguage(language) {
  document.querySelector('.g-recaptcha').innerHTML = '';
  
  var script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js?hl=' + language;
  script.async = true;
  script.defer = true;
  document.querySelector('head').appendChild(script);
}

var curr = 'en';

changeRecaptchaLanguage(curr);

document.querySelector('button').addEventListener('click', function() {
  curr = curr === 'en' ? 'pt-BR' : 'en';
  changeRecaptchaLanguage(curr);
});

<div>Other stuff</div>
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<button>Change language</button>