需導入模塊social-auth-app-django 和geetest 提前去官網下載gt.js或者引入http://static.geetest.com/static/tools/gt.js
效果圖：
html:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default login">
<div class="panel-heading">
<p class="h3">登錄 Rango博客賬號</p>
<p>請在下面的輸入框中輸入您的用戶名和密碼</p>
</div>
<div class="panel-body">
<div>
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control input-lg" name="user" placeholder="用戶名">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="pwd" placeholder="密碼">
</div>
<div class="form-group popup-div">
<!-- 放置極驗的滑動驗證碼 -->
<span id="wait">驗證碼加載中...</span>
<div id="popup-captcha"></div>
</div>
<div class="form-group">
<button class="btn btn-block btn-primary btn-lg" id="login-button" disabled title="請完成人機識別驗證">登錄</button>
</div>
<a href="/register/">注冊</a>
|
<a href="">找回密碼</a>
<strong id="error" class="pull-right"></strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- geetest -->
{# <script src="http://static.geetest.com/static/tools/gt.js"></script>#}
<script src="/static/js/gt.js"></script>
<script src="/static/js/login.js"></script>
js:
// 極驗滑動驗證碼
var handlerPopup = function (captchaObj) {
// appendTo方法用於將驗證按鈕插到宿主頁面，使其顯示在頁面上。
captchaObj.appendTo('#popup-captcha');
// onReady監聽驗證按鈕的 DOM 生成完畢事件
captchaObj.onReady(function () {
$("#wait").attr('class', 'hidden');
});
// onSuccess:監聽驗證成功事件，進行二次驗證
captchaObj.onSuccess(function () {
$("#login-button").removeAttr('disabled');
$("#login-button").removeAttr('title');
});
$("#login-button").click(function () {
// getValidate:獲取用戶進行成功驗證(onSuccess)所得到的結果，該結果用於進行服務端 SDK 進行二次驗證。
var validate = captchaObj.getValidate();
if (!validate) {
return 0;
} else {
$.ajax({
url: "/login/", // 進行二次驗證
type: "post",
dataType: "json",
data: {
username: $('input[name="user"]').val(),
password: $('input[name="pwd"]').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) {
$('#error').text(data.msg);
captchaObj.reset(); // 讓驗證回到初始狀態
} else {
location.href = data.msg;
}
},
});
}
});
};
// 當input框獲取焦點時將之前的錯誤清空
$('input[name="user"],input[name="pwd"]').focus(function () {
// 將之前的錯誤清空
$('#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, // 驗證 id，極驗后台申請得到
challenge: data.challenge, // 驗證流水號，后服務端 SDK 向極驗服務器申請得到
product: "popup", // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
offline: !data.success, // 表示用戶后台檢測極驗服務器是否宕機，一般不需要關注
width: '100%', // 設置按鈕的長度
// 更多配置參數請參見：http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handlerPopup);
},
});
views:
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from django.contrib import auth
from geetest import GeetestLib
# 請在官網申請ID使用
pc_geetest_id = "xxxxxxxxxxxxxxxxxxx"
pc_geetest_key = "xxxxxxxxxxxxxxxxxxx"
def login(request):
if request.method == "POST":
ret = {
'status': None,
'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) # 將登錄用戶賦值給 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 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)
urls:
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.login), # 登錄視圖
path('register/', views.register), # 注冊視圖
path('index/', views.index), # 首頁
re_path(r'^$', views.index), # 首頁
url(r'^pc-geetest/register', views.get_geetest),
]