angularjs 如何根据语言动态加载google captcha?

5us2dqdw  于 2023-02-03  发布在  Angular
关注(0)|答案(1)|浏览(148)

我有一个应用程序,需要在表单中选择四种语言(英语、法语、荷兰语、西班牙语)中的一种,谷歌reCaptcha在它下面。
我想让它动态加载的基础上选择的语言。recaptcha是基于脚本标记的语言应该传递给

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

我所要做的就是根据输入修改脚本(hl=en)的最后一个参数,然后动态加载脚本,但是我不知道如何让它工作。
此外,脚本应再次加载,如果语言在上面的下拉菜单中更改。
有没有可能让它起作用?

zvms9eto

zvms9eto1#

您可以使用grecaptcha.render()并传入语言来根据自己的喜好进行更改。请注意,在调用render之前,您必须删除前面的captcha元素。

// your desired language
let captchaLang = 'de';
let captchaSiteKey = '...';
let captchaElemId = 'container';

let captchaCallback = (e) => {
  document.querySelector('#' + captchaElemId).remove();     
  // deal with success
  // ...
};

// create new elem based on old one, keeps the styling
// you could also just use document.createElement()
let old = document.querySelector('#' + captchaElemId);
let clone = old.cloneNode(false);
old.replaceWith(clone);

// render captcha with new language
grecaptcha.render(captchaElemId, {
  sitekey: captchaSiteKey,
  callback: captchaCallback,
  hl: captchaLang
});

相关问题