下面是“Django中使用极验Geetest滑动验证码过程解析”的完整攻略。
什么是极验Geetest滑动验证码
极验Geetest滑动验证码是一种可以保障网站安全性的验证机制。通过综合分析用户行为特征,实现对机器人和人机协作攻击的防御。
Django中使用极验Geetest滑动验证码的步骤
1. 获取验证码
使用极验Geetest需要先到极验官网注册账号,创建后可以获得一个极验ID和一个极验KEY。之后,将极验ID和极验KEY填写到网站后端代码中,以便使用Geetest API。
在Django中,可以通过如下代码来获取验证码。
# 导入Geetest的Python SDK
from geetest import GeetestLib
# 极验ID和KEY,可以在官网申请
captcha_id = 'YOUR_CAPTCHA_ID'
private_key = 'YOUR_PRIVATE_KEY'
# 初始化GeetestLib实例
gt_lib = GeetestLib(captcha_id, private_key)
# 获取Captcha所需的参数
status, challenge = gt_lib.pre_process(client_ip)
# 返回响应给前端
response_data = {'success': status, 'challenge': challenge}
return JsonResponse(response_data)
2. 校验验证码
获取到验证码后,接下来需要在前端渲染并验证。例如,在登录页面添加滑动验证码。
{% extends 'base.html' %}
{% block content %}
<div class="geetest" data-gt="{{challenge}}" data-success="onGeetestSuccess"></div>
<span id="geetest_tips" class="text-danger"></span>
{% endblock %}
{% block js %}
<!-- 引入Geetest前端文件 -->
<script src="https://static.geetest.com/static/tools/gt.js"></script>
<script>
var handler = function (captchaObj) {
// 将获取到的验证码渲染到对应的元素中
captchaObj.appendTo('.geetest');
captchaObj.onReady(function () {
// 获取到验证码后,放开表单的提交按钮
$("#submit-btn").removeAttr('disabled');
});
captchaObj.onSuccess(function () {
// 校验成功后,执行此方法设置提示信息
$("#geetest_tips").text("");
});
captchaObj.onError(function () {
// 校验失败后,执行此方法设置提示信息
$("#geetest_tips").text("请正确拼合验证码");
});
// 在点击提交按钮时,执行此方法校验验证码
$('#login-form').submit(function () {
captchaObj.verify();
return false;
});
};
// 在DOM加载完成后,执行此方法初始化Geetest
$(document).ready(function () {
var params = {
gt: '{{challenge}}',
challenge: '{{geetest_challenge}}',
product: 'popup',
offline: !{{success}}
};
initGeetest({
// 请将isProd设置为True时,切换为正式接口
isProd: false,
// 以下为极验官方提供的公共接口,不得修改
gt: params.gt,
challenge: params.challenge,
offline: params.offline,
new_captcha: true,
product: params.product,
width: "300px"
}, handler);
});
</script>
{% endblock %}
前端与后端的校验交互主要借助了Geetest提供的API。在Django的后端代码中,需要接收前端传回来的滑动结果,并进行校验。
# 接收前端传来的滑动结果
geetest_challenge = request.POST['geetest_challenge']
geetest_validate = request.POST['geetest_validate']
geetest_seccode = request.POST['geetest_seccode']
# 验证滑动结果
success = gt_lib.success_validate(geetest_challenge, geetest_validate, geetest_seccode, client_ip)
# 返回校验结果
response_data = {'success': success}
return JsonResponse(response_data)
至此,Django中使用极验Geetest滑动验证码的流程就完成了。
示例说明
示例一:简单登录页应用
我们可以通过添加一个简单的登录页面来演示Geetest的使用。
首先,在views.py
中定义验证码获取、校验的方法。
from geetest import GeetestLib
# 极验ID和KEY,可以在官网申请
captcha_id = 'YOUR_CAPTCHA_ID'
private_key = 'YOUR_PRIVATE_KEY'
# 初始化GeetestLib实例
gt_lib = GeetestLib(captcha_id, private_key)
# 获取验证码的方法
def get_captcha(request):
client_ip = request.META['REMOTE_ADDR']
status, challenge = gt_lib.pre_process(client_ip)
response_data = {'success': status, 'challenge': challenge}
return JsonResponse(response_data)
# 校验验证码的方法
def check_captcha(request):
geetest_challenge = request.POST['geetest_challenge']
geetest_validate = request.POST['geetest_validate']
geetest_seccode = request.POST['geetest_seccode']
client_ip = request.META['REMOTE_ADDR']
success = gt_lib.success_validate(geetest_challenge, geetest_validate, geetest_seccode, client_ip)
response_data = {'success': success}
return JsonResponse(response_data)
# 登录视图方法
def login(request):
# 访问登录页面时,调用此方法获取验证码并渲染
if request.method == 'GET':
return render(request, 'login.html')
# 获取登录表单并校验滑动验证码
username = request.POST['username']
password = request.POST['password']
success = request.POST.get('success', False)
if not success:
raise ValueError("请先完成滑动验证码")
# 校验用户名和密码
# ...
# 登录成功后返回首页
return redirect('index')
然后,我们在login.html
中添加表单和验证码元素。
{% extends 'base.html' %}
{% block content %}
<form id="login-form" action="{% url 'login' %}" method="post">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="请输入您的用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码">
</div>
<div class="form-group">
<div class="geetest" data-gt="" data-success="onGeetestSuccess"></div>
<span id="geetest_tips" class="text-danger"></span>
</div>
<button id="submit-btn" type="submit" class="btn btn-primary" disabled>登录</button>
</form>
{% endblock %}
{% block js %}
<script src="https://static.geetest.com/static/tools/gt.js"></script>
<script>
var handler = function (captchaObj) {
$("#submit-btn").removeAttr('disabled');
captchaObj.appendTo('.geetest');
captchaObj.onReady(function () {
$("#submit-btn").removeAttr('disabled');
});
captchaObj.onSuccess(function () {
$("#geetest_tips").text("");
});
captchaObj.onError(function () {
$("#geetest_tips").text("请正确拼合验证码");
});
$('#login-form').submit(function () {
captchaObj.verify();
return false;
});
};
// 在DOM加载完成后,执行此方法初始化Geetest
$(document).ready(function () {
var params = {
gt: '{{challenge}}',
challenge: '{{geetest_challenge}}',
product: 'popup',
offline: !{{success}}
};
initGeetest({
isProd: false,
gt: params.gt,
challenge: params.challenge,
offline: params.offline,
new_captcha: true,
product: params.product,
width: "300px"
}, handler);
});
</script>
{% endblock %}
最后,在urls.py
中添加登录路由。
from django.urls import path
from . import views
urlpatterns = [
path('login/', views.login, name='login'),
]
示例二:带参数的验证码应用
为了让读者更好的理解Geetest的使用,这里再给出一个带参数的验证码示例。这个示例中,我们要在验证码页面中实现拖动图片生成唯一标识,然后在后端验证(此处省略验证代码)。
在前端代码中,我们需要使用Geetest的initGeetest()
方法,将参数传递给极验服务器。
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-md-6">
<h5 class="text-muted">请按照先后顺序,拖动底部的图标</h5>
</div>
<div class="col-md-6">
<div id="geetest_lib"></div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="https://static.geetest.com/static/tools/gt.js"></script>
<script>
$(document).ready(function () {
var handler = function (captchaObj) {
captchaObj.onSuccess(function () {
console.log(captchaObj.getValidate());
});
captchaObj.appendTo("#geetest_lib");
};
initGeetest({
// 这里写入完整的参数值
gt: "5528e23e1f179fdc175fc2d5519f6a0d",
challenge: "51aec58a20e3421d2ba3f80461d9f6f5",
product: "popup",
width: "100%",
offline: false,
new_captcha: false,
protocol: "https://",
api_server: "api.geetest.com/",
https: true,
type: "slide",
theme: "gc",
lang: "zh-cn",
cleanup: false,
sliding_code_iv: "\u6ed1\u52a8\u63a7\u4ef6",
passtime_iv: "\u8fc7\u53bb\u65f6\u95f4",
img_click_iv: "\u70b9\u51fb\u56fe\u7247",
fullpage: true
}, handler);
});
</script>
{% endblock %}
将此页面保存为template/captcha.html
,并在views.py
中定义一个视图函数。
from django.shortcuts import render
def captcha(request):
return render(request, 'captcha.html')
最后,在urls.py
中添加该路由。
from django.urls import path
from . import views
urlpatterns = [
path('captcha/', views.captcha, name='captcha'),
]
打开浏览器,访问http://127.0.0.1:8000/captcha/
即可看到验证码页面。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Django中使用极验Geetest滑动验证码过程解析 - Python技术站