angular-recaptcha：随着网站语言的改变而改变语言
angular-recaptcha: Change language with site language change
我的网站使用用户可切换的三种不同语言。语言切换由 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>
您可以简单地清空 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>
我认为这是一个重复的问题。请在此处查看一个建议的解决方案：
总结:
目前无法通过javascript直接设置验证码语言。正如您所说，但是可以在脚本加载期间使用参数 'hl'。
如果您需要在不重新加载页面的情况下动态更改应用程序的语言，您可以通过从 head 部分删除 recaptcha 脚本 link 并通过 javascript。当您的用户通过单击按钮更改语言时，您现在可以通过再次调用加载函数以新语言重新加载验证码。
您只需在 "lang" 指令中添加值即可。
<div vc-recaptcha key="publicKey" lang="en"></div>
我刚刚偶然发现了这个问题。我知道不久前有人问过这个问题，但我认为最好的方法是在变量 lang 的 $watch 内使用服务中的 useLang 方法。
所以在 html 中确定我们所在的语言：
<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);
}
});
如何在初始化时设置 ng-recaptcha 语言：
<re-captcha class="g-recaptcha"
siteKey="asdfasdfasdfasdfasdasd"
[(ngModel)]="myRecaptcha"
name="captcha"
#recaptcha></re-captcha>
app.module.ts
import {RecaptchaModule ,RECAPTCHA_LANGUAGE} from 'ng-recaptcha';
const getDomainBaseUrl = location.toString();
export const language = baseUrl.toLocaleLowerCase();
...
providers: [
...
{
provide: RECAPTCHA_LANGUAGE,
useValue: language,
},
],
我的网站使用用户可切换的三种不同语言。语言切换由 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>
您可以简单地清空 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>
我认为这是一个重复的问题。请在此处查看一个建议的解决方案：
总结:
目前无法通过javascript直接设置验证码语言。正如您所说，但是可以在脚本加载期间使用参数 'hl'。
如果您需要在不重新加载页面的情况下动态更改应用程序的语言，您可以通过从 head 部分删除 recaptcha 脚本 link 并通过 javascript。当您的用户通过单击按钮更改语言时，您现在可以通过再次调用加载函数以新语言重新加载验证码。
您只需在 "lang" 指令中添加值即可。
<div vc-recaptcha key="publicKey" lang="en"></div>
我刚刚偶然发现了这个问题。我知道不久前有人问过这个问题，但我认为最好的方法是在变量 lang 的 $watch 内使用服务中的 useLang 方法。 所以在 html 中确定我们所在的语言：
<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);
}
});
如何在初始化时设置 ng-recaptcha 语言：
<re-captcha class="g-recaptcha"
siteKey="asdfasdfasdfasdfasdasd"
[(ngModel)]="myRecaptcha"
name="captcha"
#recaptcha></re-captcha>
app.module.ts
import {RecaptchaModule ,RECAPTCHA_LANGUAGE} from 'ng-recaptcha';
const getDomainBaseUrl = location.toString();
export const language = baseUrl.toLocaleLowerCase();
...
providers: [
...
{
provide: RECAPTCHA_LANGUAGE,
useValue: language,
},
],