首先安装一个需要用到的模块

pip install social-auth-app-django

安装完后在终端输入pip list会看到

social-auth-app-django 3.1.0

social-auth-core 3.0.0

然后可以来我的github，下载关于滑动验证码的这个demo：https://github.com/Edward66/slide_auth_code

下载完后启动项目

python manage.py runserver

启动这个项目后，在主页就能看到示例

前端部分

随便选择一个(最下面的是移动端，不做移动端不要选)把html和js代码复制过来，我选择的是弹出式的。这里面要注意他的ajax请求发送的网址，你可以把这个网址改成自己视图函数对应的网址，自己写里面的逻辑，比如我是为了做用户登陆验证，所以我是写的逻辑是拿用户输入的账号、密码和数据库里的做匹配。

login.html

登陆页面

登陆页面

---

slide_auth_code.css

#embed-captcha {

width: 300px;

margin: 0 auto;

}

.show {

display: block;

}

.hide {

display: none;

}

#notice {

color: red;

}

/* 以下遮罩层为demo.用户可自行设计实现 */

#mask {

display: none;

position: fixed;

text-align: center;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

overflow: auto;

}

/* 可自行设计实现captcha的位置大小 */

.popup-mobile {

position: relative;

}

#popup-captcha-mobile {

position: fixed;

display: none;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

z-index: 9999;

}

slide_auth_code.js

let handlerPopup = function (captchaObj) {

// 成功的回调

captchaObj.onSuccess(function () {

let validate = captchaObj.getValidate();

$.ajax({

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

type: "post",

dataType: "json",

data: {

user: $('#user').val(),

pwd: $('#pwd').val(),

},

success: function (data) {

if (data.user) {

location.href = '/index/'

} else {

$('#error-info').text(data.msg).css({'color': 'red', 'margin-left': '10px'});

setTimeout(function () {

$('#error-info').text('');

}, 3000)

}

}

});

});

$("#popup-submit").click(function () {

captchaObj.show();

});

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

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

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

};

// 验证开始需要向网站主后台获取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);

}

});

注意：我是把ajax请求的url改成了当前页面的视图函数。另外原生代码是全部写在html里的，我把它做了解耦。还有原生代码用的是jquery-1.12.3，我改成了jquery-3.3.1，也可以正常使用。强烈建议先看看原生代码。

后端部分

urls.py

由于后端的逻辑是自己写的，这里只需要用到pcgetcaptcha这部分代码，来处理验证部分。

首先在urls.py里加入路径

from django.urls import path, re_path

from blog.views import slide_code_auth

# 滑动验证码

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

re_path(r'^pc-geetest/register', slide_code_auth, name='pcgetcaptcha'),

# slide_auth_code是我自己写的名字，原名是pcgetcaptcha

我把pcgetcaptcha的逻辑部分放到了utils/slide_auth_code.py里面，当做工具使用

utils/slide_auth_code.py

from blog.geetest import GeetestLib

pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"

pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

def pcgetcaptcha(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 response_str

# pc_geetest_id和pc_geetest_key不可省略,如果做移动端要加上mobile_geetest_id和mobile_geetest_key

views.py

from django.contrib import auth

from django.shortcuts import render, HttpResponse

from django.http import JsonResponse

from blog.utils.slide_auth_code import pcgetcaptcha

def login(request):

if request.method == "POST":

response = {'user': None, 'msg': None}

user = request.POST.get('user')

pwd = request.POST.get('pwd')

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

if user:

auth.login(request, user)

response['user'] = user.username

else:

response['msg'] = '用户名或密码错误'

return JsonResponse(response)

return render(request, 'login.html')

# 滑动验证码

def slide_code_auth(request):

response_str = pcgetcaptcha(request)

return HttpResponse(response_str)

def index(request):

return render(request, 'index.html')

注意：不一定非要按照我这样，根据自己的需求选择相应的功能并做出相应的修改

标签：code,python,request,验证码,geetest,slide,auth,滑动,user

来源： https://www.cnblogs.com/lshedward/p/10381146.html