天天看點
傳回

極驗行為驗證的使用方法

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 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;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }

        .btn {
            display: inline-block;
            box-sizing: border-box;
            border: 1px solid #cccccc;
            border-radius: 2px;
            width: 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 {
            width: 300px;
            display: inline-block;
        }

        label {
            vertical-align: top;
            display: inline-block;
            width: 180px;
            text-align: right;
        }

        #text {
            height: 42px;
            width: 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;
            width: 298px;
            text-align: center;
            border-radius: 2px;
            background-color: #F3F3F3;
        }

        .loading {
            margin: auto;
            width: 70px;
            height: 20px;
        }

        .loading-dot {
            float: left;
            width: 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',
                width: "300px",
                 https: true

                // 更多配置參數說明請參見：http://docs.geetest.com/install/client/web-front/
            }, handler);
        }
    });
</script>
</body>
</html>

View Code

　　　　

　　　　

轉載于:https://www.cnblogs.com/glf1160/p/10114330.html

Python javascript json
上一篇: C#資料庫問題
下一篇: 極驗驗證--滑塊驗證極驗驗證–滑塊驗證

繼續閱讀