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 init之后调用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（programmaticaly）。

以下功能可以解决问题：

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>

Answer 2

我认为这是一个重复的问题。请在此处查看一个建议的解决方案：

Change ReCaptcha language OnClick

总结：

目前无法通过javascript直接设置recaptcha语言。如您所述，但可以使用参数＆＃39; hl＆＃39;在脚本加载期间。

如果您需要动态更改应用程序的语言而不重新加载页面，可以通过从head部分删除recaptcha脚本链接来执行此操作，而是直接使用javascript调用来加载它。当您的用户通过单击按钮更改语言时，您现在可以通过再次调用load函数来重新加载使用新语言的recaptcha。

Answer 3

您只需在“lang”指令中添加值即可。

text

Answer 4

我只是偶然发现了这个问题。我知道已经有人问过了，但是我认为最好的方法是在变量lang的$ watch内部使用服务中的useLang方法。因此，在html中标识我们所在的lang：

<div id="g-recaptcha" class="g-recaptcha" vc-recaptcha key="domainkey" lang="$root.lang" on-success="setResponse(response)"></div>

而且，如果可以的话，可以在指令内将$ watch放在该变量上：

scope.$watch('lang', function(){
        if(scope.widgetId!=null){
           vcRecaptcha.useLang(scope.widgetId,scope.lang);
        }
});

Answer 5

** ng-recaptcha多语言**

app.module.ts

在@ngmodule之前声明

从“ ng-recaptcha”导入{RecaptchaModule，RECAPTCHA_LANGUAGE}；

//添加此AppModule.ts

var getDomainBaseUrl = location.toString（）;

导出const语言= baseUrl.toLocaleLowerCase（）;

提供者：[

yourservice,yourcomponentservice 

{
  provide: RECAPTCHA_LANGUAGE,
  useValue: language,
},

]，

angular-recaptcha：使用网站语言更改来更改语言

5 个答案: