登錄認證的兩種方式
阿新 • • 發佈：2018-07-02
scrip put user hid 位置 變量 越界 per var 
一.手動輸入驗證碼
def v_code(request): from PIL import Image,ImageDraw,ImageFont import random #定義一個生成隨機顏色代碼的內部函數,返回值對應RGB()裏面的三個參數值 def get_color(): return random.randint(0,255),random.randint(0,255),random.randint(0,255) #生成一個圖片對象 img_obj=Image.new(驗證碼視圖函數‘RGB‘, (250,35), color=(144,144,144) ) #在圖片中加文字 #生成一個畫筆對象 draw_obj=ImageDraw.Draw(img_obj) #加載字體文件 font_obj=ImageFont.truetype(‘static/font/kumo.ttf‘,size=40) #for循環五次，每次寫一個隨機的字符 tmp_list=[] for i in range(5): n=str(random.randint(0,9)) l=chr(random.randint(97,122)) u=chr(random.randint(65,90)) r=random.choice([n,l,u]) tmp_list.append(r) draw_obj.text( (i*48+20,0),#驗證碼在圖片區的位置 r, #內容 get_color(),#顏色 font=font_obj ) #得到生成的隨機驗證碼 v_code_str=‘‘.join(tmp_list) #不能使用全局的變量保存驗證碼，會被覆蓋 #每個請求都應該對應自己的驗證碼 request.session[‘v_code‘]=v_code_str.upper() #加幹擾線 # width = 250 # 圖片寬度（防止越界） # height = 35 # for i in range(2): # x1 = random.randint(0, width) # x2 = random.randint(0, width) # y1 = random.randint(0, height) # y2 = random.randint(0, height) # draw_obj.line((x1, y1, x2, y2), fill=get_color()) # # # 加幹擾點 # for i in range(2): # draw_obj.point([random.randint(0, width), random.randint(0, height)], fill=get_color()) # x = random.randint(0, width) # y = random.randint(0, height) # draw_obj.arc((x, y, x+4, y+4), 0, 90, fill=get_color()) #將圖片直接在內存中保存 from io import BytesIO tmp=BytesIO()#生成一個io對象 img_obj.save(tmp,‘png‘) data=tmp.getvalue() return HttpResponse(data,content_type=‘image/png‘)
def login(request): form_obj=forms.UserForm() if request.method==‘POST‘: ret={‘code‘:0} username=request.POST.get(‘username‘) password=request.POST.get(‘password‘) v_code=request.POST.get(‘v_code‘,‘‘) if v_code.upper()==request.session.get(‘v_code‘,‘‘): #自動校驗用戶名和密碼對不對 user=auth.authenticate(username=username,password=password) if user: # 內置的login方法 # 1. 生成Session數據，存一下user_id 然後把sessionid寫入Cookie # 後續每一次請求來的時候，AuthenticationMiddleware中的process_request方法中 # 會自動幫我們取到user_id，然後到數據庫中拿出user對象,然後添加到request.user屬性中 --> request.user = user # 後續我們都可以通過request.user拿到當前的登陸用戶對象 auth.login(request,user) ret[‘data‘]=‘/home/‘ else: ret[‘code‘]=1 ret[‘data‘]=‘用戶名或密碼錯誤‘ else: ret[‘code‘]=1 ret[‘data‘]=‘驗證碼錯誤‘ return JsonResponse(ret) return render(request,‘login.html‘,{‘form_obj‘:form_obj})login視圖函數
二.滑動驗證碼
<script>
var handlerPopup = function (captchaObj) {
// 成功的回調
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
$.ajax({
url: "", // 進行二次驗證
type: "post",
data: {
username: $("#id_username").val(),
password: $("#id_password").val(),
geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode
},
success: function (data) {
if (!data.code) {
location.href = data.data;
} else {
// 有錯誤
$("#login-error").text(data.data);
}
},
error: function (err) {
console.log(err)
}
});
});
$("#b1").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: "/pcgetcaptcha?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);
}
});
$(document).ready(function () {
// 文檔加載完之後自動執行的
// 當form中的input標簽獲取光標之後，就清空之前的錯誤信息
$("form input").focus(function () {
$("#login-error").text("");
});
})
</script>
對應的ajax處理方式
登錄認證的兩種方式