html 谷歌验证码recaptcha

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 谷歌验证码recaptcha相关的知识，希望对你有一定的参考价值。

<html>
    <head>
        <title>Loading captcha with JavaScript</title>
    </head>
    <body>

        <form action="" method="POST">
            <label>Username: <input type="text" name="username" /></label>
            <small>Are you a robot?</small>
            <div id="captcha_container"></div>
            <input type="submit" value="Submit">
        </form>

        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
        <script type='text/javascript'>
            var captchaContainer = null;
            var loadCaptcha = function() {
                captchaContainer = grecaptcha.render('captcha_container', {
                    'sitekey' : '6LcoeCkTAAAAAPATFmgjUkDSMYVmwBFw7PzQ-5DM',
                    'callback' : function(response) {
                    }
                });
            };
            $('form').on('submit', function (e) {
                e.preventDefault();
                var response = grecaptcha.getResponse();
                //recaptcha failed validation
                if(response.length == 0) {
                    e.preventDefault();
                    alert('no captcha selected');
                }
                else {
                    alert('form submitted');
                }
            });
        </script>
    </body>
</html>

以上是关于html 谷歌验证码recaptcha的主要内容，如果未能解决你的问题，请参考以下文章

要求用户在提交表单之前点击谷歌的新验证码

谷歌 reCaptcha 与 Laravel

Spring Boot 下使用谷歌 reCAPTCHA v3

Xamarin iOS WKWebView 不显示谷歌recaptcha

手机twitch应用，登录说输入正确的验证码，没有验证码啊？！

谷歌人机验证 (reCAPTCHA) 显示不出来？