• 极验行为验证的使用方法


    1,官方文档

      https://docs.geetest.com/install/deploy/server/python

    2,使用方法(基于flask)

      1,从Github: gt3-python-sdk下载.zip文件,这个官方的压缩文件里面有三个demo,分别是基于django、flask、tornado实现的,可以作为参考。

        我们需要这里面的 geetest.py 文件、gt.js文件。

      2,在极验官网注册一个账号,获取公钥(id)、私钥(key),在后台代码中会用到。

      3,后台代码

    from flask import Blueprint,render_template,session,request
    import random
    
    from bul.u.geetest import GeetestLib
    
    captach_id = "7982db09811fc65bb0172e65feda8181"
    private_key = "e9d4fc300d39c013e85c631ed791af3b"
    
    
    
    
    jc=Blueprint('jc',__name__)
    
    
    
    @jc.route('/index')
    def index():
        return render_template('y.html')
    
    
    @jc.route('/getcaptcha', methods=["GET"])
    def get_captcha():
        user_id = 'test'
        gt =  GeetestLib(captach_id, private_key)
        status = gt.pre_process(user_id)
        session[gt.GT_STATUS_SESSION_KEY] = status
        session["user_id"] = user_id
        response_str = gt.get_response_str()
        return response_str
    
    @jc.route('/validate', methods=["POST"])
    def validate_capthca():
        gt = GeetestLib(captach_id, private_key)
        status = session[gt.GT_STATUS_SESSION_KEY]
        challenge = request.form[gt.FN_CHALLENGE]
        validate = request.form[gt.FN_VALIDATE]
        seccode = request.form[gt.FN_SECCODE]
        user_id = session["user_id"]
        if status:
            result = gt.success_validate(challenge, validate, seccode, user_id)
        else:
            result = gt.failback_validate(challenge, validate, seccode)
        result = "success" if result else "fail"
        return result
    View Code

      4,前端配置

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sliding mode</title>
        <style>
            body {
                margin: 50px 0;
                text-align: center;
                font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
            }
    
            .inp {
                border: 1px solid #cccccc;
                border-radius: 2px;
                padding: 0 10px;
                 278px;
                height: 40px;
                font-size: 18px;
            }
    
            .btn {
                display: inline-block;
                box-sizing: border-box;
                border: 1px solid #cccccc;
                border-radius: 2px;
                 100px;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                color: #666;
                cursor: pointer;
                background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
            }
    
            .btn:hover {
                background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
            }
    
            #captcha {
                 300px;
                display: inline-block;
            }
    
            label {
                vertical-align: top;
                display: inline-block;
                 180px;
                text-align: right;
            }
    
            #text {
                height: 42px;
                 298px;
                text-align: center;
                border-radius: 2px;
                background-color: #F3F3F3;
                color: #BBBBBB;
                font-size: 14px;
                letter-spacing: 0.1px;
                line-height: 42px;
            }
    
            #wait {
                display: none;
                height: 42px;
                 298px;
                text-align: center;
                border-radius: 2px;
                background-color: #F3F3F3;
            }
    
            .loading {
                margin: auto;
                 70px;
                height: 20px;
            }
    
            .loading-dot {
                float: left;
                 8px;
                height: 8px;
                margin: 18px 4px;
                background: #ccc;
    
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
    
                opacity: 0;
    
                -webkit-box-shadow: 0 0 2px black;
                -moz-box-shadow: 0 0 2px black;
                -ms-box-shadow: 0 0 2px black;
                -o-box-shadow: 0 0 2px black;
                box-shadow: 0 0 2px black;
    
                -webkit-animation: loadingFade 1s infinite;
                -moz-animation: loadingFade 1s infinite;
                animation: loadingFade 1s infinite;
            }
    
            .loading-dot:nth-child(1) {
                -webkit-animation-delay: 0s;
                -moz-animation-delay: 0s;
                animation-delay: 0s;
            }
    
            .loading-dot:nth-child(2) {
                -webkit-animation-delay: 0.1s;
                -moz-animation-delay: 0.1s;
                animation-delay: 0.1s;
            }
    
            .loading-dot:nth-child(3) {
                -webkit-animation-delay: 0.2s;
                -moz-animation-delay: 0.2s;
                animation-delay: 0.2s;
            }
    
            .loading-dot:nth-child(4) {
                -webkit-animation-delay: 0.3s;
                -moz-animation-delay: 0.3s;
                animation-delay: 0.3s;
            }
    
            @-webkit-keyframes loadingFade {
                0% { opacity: 0; }
                50% { opacity: 0.8; }
                100% { opacity: 0; }
            }
    
            @-moz-keyframes loadingFade {
                0% { opacity: 0; }
                50% { opacity: 0.8; }
                100% { opacity: 0; }
            }
    
            @keyframes loadingFade {
                0% { opacity: 0; }
                50% { opacity: 0.8; }
                100% { opacity: 0; }
            }
        </style>
    </head>
    <body>
    <h1>Sliding mode</h1>
    <form id="form">
        <div>
            <label for="username">username:</label>
            <input class="inp" id="username" type="text" value="username">
        </div>
        <br>
        <div>
            <label for="password">password:</label>
            <input class="inp" id="password" type="password" value="123456">
        </div>
        <br>
        <div>
            <label>Complete verification:</label>
            <div id="captcha">
                <div id="text">
                    行为验证™ 安全组件加载中
                </div>
                <div id="wait" class="show">
                    <div class="loading">
                        <div class="loading-dot"></div>
                        <div class="loading-dot"></div>
                        <div class="loading-dot"></div>
                        <div class="loading-dot"></div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div id="btn" class="btn">Submit</div>
    </form>
    
    
    
    
    <!-- 注意,验证码本身是不需要 jquery 库,此处使用 jquery 仅为了在 demo 中使用,减少代码量 -->
    <script src="http://static.geetest.com/static/tools/gt.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
    
    <script>
    
    
        var handler = function (captchaObj) {
            captchaObj.appendTo('#captcha');
            captchaObj.onReady(function () {
                $("#wait").hide();
            });
            $('#btn').click(function () {
                var result = captchaObj.getValidate();
                if (!result) {
                    return alert('Please complete verification');
                }
                $.ajax({
                    url: '/validate',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        username: $('#username2').val(),
                        password: $('#password2').val(),
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode
                    },
                    success: function (data) {
                        if (data.status === 'success') {
                            alert('success');
                        } else if (data.status === 'fail') {
                            alert('fail, Please complete verification');
                            captchaObj.reset();
                        }
                    }
                });
            })
            // 更多接口说明请参见:http://docs.geetest.com/install/client/web-front/
        };
    
    
        $.ajax({
            url: "/getcaptcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
    
                $('#text').hide();
                $('#wait').show();
                // 调用 initGeetest 进行初始化
                // 参数1:配置参数
                // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它调用相应的接口
                initGeetest({
                    // 以下 4 个配置参数为必须,不能缺少
                    gt: data.gt,
                    challenge: data.challenge,
                    offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                    new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
    
                    product: "popup", // 产品形式,包括:float,popup
                    lang: 'zh-cn',
                     "300px",
                     https: true
    
                    // 更多配置参数说明请参见:http://docs.geetest.com/install/client/web-front/
                }, handler);
            }
        });
    </script>
    </body>
    </html>
    View Code

     

        

        

  • 相关阅读:
    [转]C# 文本框只能输入数字
    [转]C# dataGridview 报“索引-1没有值”的解决办法
    配置<authorization>节(配置文件)
    [转]javascript的urlencode
    SSM框架搭建问题
    web server
    mysql 系列
    UI 框架、ORM、权限系统
    一个基于 .NET Core 2.0 开发的简单易用的快速开发框架
    DotNetty 版 mqtt 开源客户端 (MqttFx)
  • 原文地址:https://www.cnblogs.com/glf1160/p/10114330.html
Copyright © 2020-2023  润新知