hcaptcha使用方法

最新推荐文章于 2024-05-25 15:40:01 发布

筚路蓝缕呀

最新推荐文章于 2024-05-25 15:40:01 发布

阅读量4.7k

点赞数

分类专栏：技术文章文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/zpinsist/article/details/122262778

版权

技术文章专栏收录该内容

9 篇文章 0 订阅

订阅专栏

方法一，直接显示，回调返回验证值

<script src='https://www.hCaptcha.com/1/api.js' async></script>
<div id="h-captcha" data-callback="captchaCallback" data-sitekey="key" class="mt-4 h-captcha"></div>

方法二，用js创建

<script src="https://js.hcaptcha.com/1/api.js?onload=hcaptchas&render=explicit" async defer></script>
<script>
    var hcaptchas = function () {
    	//获取id
        var widgetID = hcaptcha.render('h-captcha', { sitekey: 'key' })
        //异步反馈是否成功
        hcaptcha.execute(widgetID, { async: true })
            .then(({ response, key }) => {
                //success
                $.ajax({
                    url: '/hcaptcha',
                    type: 'post',
                    data: {response: response},
                    beforeSend: function(){
                        loading();
                    },
                    success: function (e) {
                        console.log(e)
                        if (e.error_code == 0) {
                            toast(e.msg);
                            //window.location.href="/";
                        } else {
                            toast(e.msg, {type: 'danger'})
                        }
                    },
                    complete: function () {
                        loading(false);
                    }
                })
            })
            .catch(err => {
                toast('fail', {type: 'danger'});
            });
    };

    function captchaCallback (e) {
        if (e){
            $.ajax({
                url: '/hcaptcha',
                type: 'post',
                data: {response: e},
                beforeSend: function(){
                    loading();
                },
                success: function (e) {
                    console.log(e)
                    if (e.error_code === 0) {
                        toast(e.msg);
                        window.location.href = referrer();
                    } else {
                        toast(e.msg, {type: 'danger'})
                    }
                },
                complete: function () {
                    loading(false);
                }
            })
        }
    }
</script>