如何检查reCAPTCHA框是否已过期

本文概述

• 使用标记和JS
• 使用JavaScript渲染

正如我们在之前的文章中所看到的, 可以通过简单的回调方法来验证Google服务器何时返回响应, 其中包含有关用户是否是机器人的信息。好吧, 有时你的用户可能会检查reCAPTCHA, 并且验证将成功, 但是验证将在一段时间后到期, 如果发生这种情况, 你将需要重新开始。如果验证过期, 则会通知你：

当发生这种情况时, 你可以通过另一个回调(即过期回调)得到通知。根据你的工作方式, 可以通过两种方式添加此回调：

使用标记和JS

如果遵循recaptcha的典型实现方式, 使用标记属性对其进行初始化, 则可以添加带有recaptcha过期时将执行的函数名称的expired-callback属性：

<!-- Google Recaptcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- 
    Div of the recatpcha element with parameters:
    Here you will add the callback when expires as 
    `data-expired-callback`
-->
<div class="g-recaptcha" data-sitekey="your_site_key" data-expired-callback="recaptchaExpired"></div>

<script>
    // Define a callback that is executed when the recaptcha has expired
    function recaptchaExpired(){
        alert("Your Recaptcha has expired, please verify it again !");
    }
</script>

使用JavaScript渲染

如果你没有使用Google脚本通过标记自动创建Recaptcha, 则可以将回调作为属性添加到初始化对象中：

<!-- Google Recaptcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- Div of the recatpcha element -->
<div id="id-of-recatpcha-div"></div>

<script>
    // Define a callback that is executed when the recaptcha has expired
    var onRecaptchaExpired = function () {

        alert("Your recatpcha has expired, please verify again ...");
        // You can reset it automatically if you want
        // grecaptcha.reset();
    };

    grecaptcha.render('id-of-recatpcha-div', {
        'sitekey': 'your-site-key', 'expired-callback': onRecaptchaExpired
    });
</script>

编码愉快！