極驗滑動驗證登錄
滑動驗證碼
驗證碼是網站用來防止網絡入侵的一種手段,現在相對安全而且比較流行的就是滑動驗證碼,
實現效果如下:

geetest
極驗驗證碼
Python 實現的滑動驗證碼網址:https://docs.geetest.com/install/deploy/server/python
注意: 使用第三方插件時不要求看懂,只要求能按照提供的 demo 和技術文檔完成其功能。
安裝極驗自己的包
在項目中需要使用極驗自己的包
from geetest import GeetestLib
可以使用 Pycharm 安裝此包或者直接用 pip 安裝
pip install geetest
HTML 頁面代碼
需要引入極驗提供的 JS 文件
<!-- 引入封裝了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
使用 AJAX 異步向后台發送數據,所以引入 JQuery 文件
<script src="/static/jquery-3.3.1.js"></script>
HTML 代碼部分與普通 Form 表單頁面所不同的就是多了個放置驗證碼的 form-group 組:
<div class="form-group">
<!-- 放置極驗的滑動驗證碼 -->
<div id="popup-captcha"></div>
</div>
前端向后端獲取驗證碼信息
通過 AJAX 異步從后端獲取驗證碼信息,代碼直接拷過來就行,需要注意的是代碼中獲取驗證碼的路由,在 urls 和 views 中添加響應代碼。
// 驗證開始需要向網站主后台獲取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);
}
});
urls 中添加響應的路由:
url(r'^pc-geetest/register', views.pcgetcaptcha),
views 中響應的視圖函數: 直接拷貝
# 請在官網申請ID使用,示例ID不可使用
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 HttpResponse(response_str)
前端向后盾發送驗證碼及數據信息
直接拷貝后需要改動的地方有:
- 進行二次驗證的 url
url:"/login/"
- 往后端發送的數據
username: $("#username").val(), password: $("#password").val(), csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
- 成功返回數據后的操作
success: function (data) { if (data.status) { // 有錯誤,在頁面上提示 $(".login-error").text(data.msg); } else { // 登陸成功 location.href = data.msg; } }
- 綁定 AJAX 觸發元素
$("#login-button").click(function () { captchaObj.show(); });
- 綁定顯示滑動驗證碼的元素
// 將驗證碼加到id為captcha的元素里 captchaObj.appendTo("#popup-captcha");
var handlerPopup = function (captchaObj) {
// 成功的回調
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
$.ajax({
// url: "/pc-geetest/ajax_validate",
url: "/login/", // 進行二次驗證
type: "post",
dataType: "json",
data: {
username: $("#username").val(),
password: $("#password").val(),
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
// 極驗需要傳到后端的數據
geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode
},
success: function (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
};
視圖函數處理
需要改動的地方就是驗證碼正確與不正確時返回的數據
def login(request):
if request.method == "POST":
# 初始化一個給AJAX返回的數據
ret = {"status": 0, "msg": ""}
# 從提交過來的數據中 取到用戶名和密碼
username = request.POST.get("username")
password = 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=password)
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")
GitHub 地址: https://github.com/protea-ban/oldboy/tree/master/s9day76/bbs