黄兵的个人博客

Google reCAPTCHA 异步加载的方式总结

Google reCAPTCHA 作为一个可保护您的网站免受垃圾邮件和滥用。它使用先进的风险分析技术来区分人类和机器人。

但是他的 js 库在加载的时候也是特别大，如果不适用异步加载，将严重影响网站加载速度，给用户带来不好的体验。

我们看看如何使 Google reCAPTCHA 异步加载，下面是前端代码：

<script src="https://recaptcha.net/recaptcha/api.js?render=6LdisqQUAAAAAO33rFTZN_t1yytikTumRYj6DCIo&onload=onloadCallback&render=explicit&hl=zh-CN" async defer></script>

在中国使用我们使用的 recaptcha.net 这个域名，下面这个无法在国内使用：

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

首先使用 render 后面使 site key，onload 后面使调用的参数，script 标签内使用 async defer 关于这两个的解释，可以看看这篇文章：script 标签 async defer 总结，这里使用了异步加载，可以加快页面加载速度。我们看看调用 onloadCallback 函数的具体内容：

window.onloadCallback = function () {
    const uri = location.pathname;
    const getHost = location.hostname
    let recaptchaV2Key = '', recaptchaV3Key = ''
    if (getHost === '127.0.0.1') {
        recaptchaV2Key = '6LeuGs8UAAAAAHA9VqJIDih_WDXWY8bLJfE4MBRw'
        recaptchaV3Key = '6LcLKM8UAAAAAMv3-uxVBMyox6nt0-mEjLtDQiW8'
    } else {
        recaptchaV2Key = '6Ldt5PEbAAAAAIqUWTGl93BshfSK5Sh_DXnZ9OYV'
        recaptchaV3Key = '6LdisqQUAAAAAO33rFTZN_t1yytikTumRYj6DCIo'
    }
    let action_name = "";
    if (uri === '/') {
        action_name = "home";
    } else if (uri.search(/crawler/) !== -1) {
        action_name = "crawler"
    } else if (uri.search(/ip/) !== -1) {
        action_name = 'ip'
    } else if (uri.search(/verify/) !== -1) {
        // verify 页面加载 Google reCAPTCHA v2 widget
        grecaptcha.render('verify-widget', {
            'sitekey': recaptchaV2Key
        });
        // /verify 页面禁止 reCAPTCHA v3 验证运行
        return false;
    } else {
        action_name = 'others'
    }

    grecaptcha.execute(recaptchaV3Key, {action: action_name}).then(function (token) {
        if (navigator.webdriver) {
            return location.href = "/verify";
        }
        const csrfToken = $('meta[name=csrf-token]').attr('content');
        $.ajax({
            type: 'POST',
            url: '/api/v1/verify/v3',
            data: {token: token},
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrfToken)
                }
            },
            success: (res) => {
                if (!res.success) {
                    // 后端验证失败，进入挑战
                    window.location.href = "/verify";
                }
            }
        })
    });
}

这个就是 onloadCallback 函数的具体内容，Google reCAPTCHA 加载完成之后 grecaptcha.execute() 函数执行，提交后端验证，返回一个分数。

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - Google reCAPTCHA 异步加载的方式总结