在使用Google Recaptcha v2時,可以通過在url指定hl引用指定語言的recaptcha,如:

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

但是似乎沒有方法可以直接動態切換語言,所以只能另想他法,如下:

正常的方法是直接調用 grecaptcha.render("html_element", parameters)

<div id="html_element"></div>

參考:https://developers.google.com/recaptcha/docs/display


值得注意的一點是:grecaptcha.render 的 parameters可以傳入 hl 指定語言,而官方文檔沒有寫明,如下:

grecaptcha.render("html_element", {
    'sitekey': 'your-site-key',    
    'hl': "zh-HK"
});

語言代碼參考:https://developers.google.com/recaptcha/docs/language

所以,我利用這一點,在需要切換語言時,直接刪除原本recaptcha,再動態插入新的html元素,然後再調用render, 并指定語言。

PS:以下代碼需要jQuery,如不想使用可以適當修改。

1.Html 結構

<div id="recaptcha-wrapper-a" class="recaptcha-wrapper"><!--recaptcha 生成的位置--></div>

2.定義一個function,用來Render recaptcha:

function renderGRecaptcha(elementId, successCallback, expiredCallback) {
    $(elementId).html(""); //刪除原本recaptcha
    var id = "rg-" + new Date().getTime(); //生成新id
    var ele = '<div id="' + id + '"></div>'; //新的html元素
    $(elementId).html(ele); //將新html元素插入原本位置

    grecaptcha.render(id, {
        'sitekey': 'your-site-key',
        'callback': function (token) {
            successCallback(token);
        },
        'expired-callback': function () {
            expiredCallback();
        },
        'hl': setting.lang //指定語言
    });
}

3.使用

renderGRecaptcha('#recaptcha-wrapper-a', function (token){
    gRecaptchaToken = token;
}, function () {
    gRecaptchaToken = null;
});