用Python写一个滑动验证码

1.准备阶段

　　滑动验证码我们可以直接用GEETEST的滑动验证码。

　　打开网址：https://www.geetest.com/ ，找到技术文档中的行为验证，打开部署文档，点击Python，下载ZIP包。

　　ZIP包下载地址：https://github.com/GeeTeam/gt3-python-sdk/archive/master.zip

　　解压，找到django_demo，为了方便复制粘贴代码，可以用编辑器打开项目。

2.实施

　　自己先写一个简单的登录，然后将django_demo中的关键代码复制到我们自己的项目中。过程省去，我直接贴代码。

2.1.login.py(登录界面)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>欢迎登录</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/mystyle.css">

</head>

<body>

<div class="container">

    <div class="row">

        <form class="form-horizontal col-md-6 col-md-offset-3 login-form">

            {% csrf_token %}

            <div class="form-group">

                <label for="username" class="col-sm-2 control-label">用户名</label>

                <div class="col-sm-10">

                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名">

                </div>

            </div>

            <div class="form-group">

                <label for="password" class="col-sm-2 control-label">密码</label>

                <div class="col-sm-10">

                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">

                </div>

            </div>

            <div class="form-group">

                {#                放置极验的滑动验证码#}

                <div id="popup-captcha"></div>

            </div>

            <div class="form-group">

                <div class="col-sm-offset-2 col-sm-10">

                    <button type="button" class="btn btn-default" id="login-button">登录</button>

                    <span class="login-error"></span>

                </div>

            </div>

        </form>

    </div>

</div>

<script src="/static/jquery-3.3.1.js"></script>

<script src="/static/bootstrap/js/bootstrap.min.js"></script>

<!-- 引入封装了failback的接口--initGeetest -->

<script src="http://static.geetest.com/static/tools/gt.js"></script>

<script>

    {#极验滑动验证码用于发送登录数据的。滑动验证码验证通过之后，才会执行到这里。#}

    var handlerPopup = function (captchaObj) {

        // 成功的回调

        captchaObj.onSuccess(function () {

            var validate = captchaObj.getValidate();

            // 取到用户填写的用户名和密码 -> 取input框的值

            var username = $("#username").val();

            var password = $("#password").val();

            $.ajax({

                url: "/login/", // 进行二次验证

                type: "post",

                dataType: "json",

                data: {

                    username: username,

                    password: password,

                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

                    geetest_challenge: validate.geetest_challenge,

                    geetest_validate: validate.geetest_validate,

                    geetest_seccode: validate.geetest_seccode

                },

                success: function (data) {

                    console.log(data);

                    if (data.status) {

                        // 有错误，在页面上提示

                        $(".login-error").text(data.msg);

                    } else {

                        // 登陆成功

                        location.href = data.msg;

                    }

                }

            });

        });

        {#用于显示极验滑动验证码#}

        $("#login-button").click(function () {

            captchaObj.show();

        });

        // 将验证码加到id为captcha的元素里

        captchaObj.appendTo("#popup-captcha");

        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html

    };

    // 当input框获取焦点时将之前的错误清空

    $("#username,#password").focus(function () {

        // 将之前的错误清空

        $(".login-error").text("");

    });

    // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）

    // 用于验证开始前获取验证码

    $.ajax({

        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存

        type: "get",

        dataType: "json",

        success: function (data) {

            // 使用initGeetest接口

            // 参数1：配置参数

            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件

            initGeetest({

                gt: data.gt,

                challenge: data.challenge,

                product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效

                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注

                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config

            }, handlerPopup);

        }

    });

</script>

</body>

</html>

2.2.index.py(跳转界面)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<body>

<h1>这是index界面</h1>

</body>

</html>

2.3.urls.py（部署路径）

"""BBS URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:

    https://docs.djangoproject.com/en/2.2/topics/http/urls/

Examples:

Function views

    1. Add an import:  from my_app import views

    2. Add a URL to urlpatterns:  path('', views.home, name='home')

Class-based views

    1. Add an import:  from other_app.views import Home

    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')

Including another URLconf

    1. Import the include() function: from django.urls import include, path

    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))

"""

from django.contrib import admin

from django.urls import path

from blog import views

urlpatterns = [

    path('login/', views.login),

    path('index/', views.index),

    # 极验滑动验证码，获取验证码的url

    path('pc-geetest/register/', views.get_geetest),

]

2.4.views.py

from django.shortcuts import render,HttpResponse

from geetest import GeetestLib

from django.http import JsonResponse

from django.contrib import auth

# Create your views here.

# 使用极验滑动验证码的登录功能

def login(request):

    # if request.is_ajax():  # 如果是AJAX请求

    if request.method == "POST":

        # 初始化一个给AJAX返回的数据

        ret = {"status": 0, "msg": ""}

        # 从提交过来的数据中 取到用户名和密码

        username = request.POST.get("username")

        pwd = request.POST.get("password")

        # 获取极验 滑动验证码相关的参数

        gt = GeetestLib(pc_geetest_id, pc_geetest_key)

        challenge = request.POST.get(gt.FN_CHALLENGE, '')

        validate = request.POST.get(gt.FN_VALIDATE, '')

        seccode = request.POST.get(gt.FN_SECCODE, '')

        status = request.session[gt.GT_STATUS_SESSION_KEY]

        user_id = request.session["user_id"]

        if status:

            result = gt.success_validate(challenge, validate, seccode, user_id)

        else:

            result = gt.failback_validate(challenge, validate, seccode)

        if result:

            # 验证码正确

            # 利用auth模块做用户名和密码的校验

            user = auth.authenticate(username=username, password=pwd)

            if user:

                # 用户名密码正确

                # 给用户做登录

                auth.login(request, user)

                ret["msg"] = "/index/"

            else:

                # 用户名密码错误

                ret["status"] = 1

                ret["msg"] = "用户名或密码错误！"

        else:

            ret["status"] = 1

            ret["msg"] = "验证码错误"

        return JsonResponse(ret)

    return render(request, "login.html")

def index(request):

    return render(request,'index.html')

# 处理极验验证码的试视图

#请在官网申请ID使用，示例ID不可使用

pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"

pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

def get_geetest(request):

    user_id = 'test'

    gt = GeetestLib(pc_geetest_id, pc_geetest_key)

    status = gt.pre_process(user_id)

    request.session[gt.GT_STATUS_SESSION_KEY] = status

    request.session["user_id"] = user_id

    response_str = gt.get_response_str()

    return HttpResponse(response_str)

2.5.settings.py

　　settings.py需要加一些东西。首先创建一个数据库，用于存储各类表。创建好之后，需要连接pycharm。

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.mysql',

        'NAME': 'bbs',

        'HOST': '127.0.0.1',

        'PORT': '',

        'USER': 'root',

        'PASSWORD': '',

    }

}

修改setting.py中的这一部分

　　同时在项目下的app目录中的__init__.py中加上两行代码，告诉pychram我用了mysql。

import pymysql

pymysql.install_as_MySQLdb()

　　在settings.py的最下方加上:

STATICFILES_DIRS = [

    os.path.join(BASE_DIR, "static")

]

2.6.生成用户

　　终端执行两行代码：

python manage.py makemigrations

python manage.py migrate

　　在auth_user表中添加一个用户，超级用户和普通用户都可以。

python manage.py createsuperuser

3.静态文件

https://files.cnblogs.com/files/missdx/static.rar

4.效果图

5.项目目录结构图