標籤：rap 字串類 擷取 錯誤 imp script 越界 text idt
1.views.pyfrom django.shortcuts import render, HttpResponsefrom django.http import JsonResponse
from django.contrib import auth
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
# Create your views here.
# 自己產生驗證碼的登入
def login(request):
if request.method == "POST":
# 初始化一個給AJAX返回的資料
ret = {"status": 0, "msg": ""}
# 從提交過來的資料中 取到使用者名稱和密碼
username = request.POST.get("username")
pwd = request.POST.get("password")
valid_code = request.POST.get("valid_code") # 擷取使用者填寫的驗證碼
if valid_code and valid_code.upper() == request.session.get("valid_code", "").upper():
# 驗證碼正確
# 利用auth模組做使用者名稱和密碼的校正
user = auth.authenticate(username=username, password=pwd)
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")
# 擷取驗證碼圖片的視圖
def get_valid_img(request):
# 擷取隨機顏色的函數
def get_random_color():
return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
# 產生一個圖片對象
img_obj = Image.new(
‘RGB‘,
(220, 35),
get_random_color()
)
# 在產生的圖片上寫字元
# 產生一個圖片畫筆對象
draw_obj = ImageDraw.Draw(img_obj)
# 載入字型檔， 得到一個字型對象
font_obj = ImageFont.truetype("static/font/kumo.ttf", 28)
# 開始產生隨機字串並且寫到圖片上
tmp_list = []
for i in range(5):
u = chr(random.randint(65, 90)) # 產生大寫字母
l = chr(random.randint(97, 122)) # 產生小寫字母
n = str(random.randint(0, 9)) # 產生數字，注意要轉換成字串類型
tmp = random.choice([u, l, n])
tmp_list.append(tmp)
draw_obj.text((20 + 40 * i, 0), tmp, fill=get_random_color(), font=font_obj)
# 儲存到session
request.session["valid_code"] = "".join(tmp_list)
# 加幹擾線
width = 220 # 圖片寬度（防止越界）
height = 35
for i in range(5):
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_random_color())
# 加幹擾點
for i in range(40):
draw_obj.point((random.randint(0, width), random.randint(0, height)), fill=get_random_color())
x = random.randint(0, width)
y = random.randint(0, height)
draw_obj.arc((x, y, x+4, y+4), 0, 90, fill=get_random_color())
# 不需要在硬碟上儲存檔案，直接在記憶體中載入就可以
io_obj = BytesIO()
# 將產生的圖片資料儲存在io對象中
img_obj.save(io_obj, "png")
# 從io對象裡面取上一步儲存的資料
data = io_obj.getvalue()
return HttpResponse(data)
2.urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r‘^admin/‘, admin.site.urls),
url(r‘^login/‘, views.login),
url(r‘^get_valid_img.png/‘, views.get_valid_img),
]
3.login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎登入</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal col-md-6 col-md-offset-3 login-form">
{% csrf_token %}
<div class="form-group">
<label for="username" class="col-sm-2 control-label">使用者名稱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" placeholder="使用者名稱">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="密碼">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">驗證碼</label>
<div class="col-sm-10">
<input type="text" name="valid_code" id="valid_code">
<img id="valid-img" class="valid-img" src="/get_valid_img.png?" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="login-button">登入</button>
<span class="login-error"></span>
</div>
</div>
</form>
</div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
$("#login-button").click(function () {
// 1. 取到使用者填寫的使用者名稱和密碼 -> 取input框的值
var username = $("#username").val();
var password = $("#password").val();
var valid_code = $("#valid_code").val();
// 2. 用AJAX發送到服務端
$.ajax({
url: "/login/",
type: "post",
data: {
"username": username,
"password": password,
"valid_code": valid_code,
"csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val()
},
success: function (data) {
console.log(data);
if (data.status) {
// 有錯誤，在頁面上提示
$(".login-error").text(data.msg);
} else {
// 登陸成功
location.href = data.msg;
}
}
})
});
// 當input框擷取焦點時將之前的錯誤清空
$("#username,#password").focus(function () {
// 將之前的錯誤清空
$(".login-error").text("");
});
// 點擊驗證碼圖片 重新整理驗證碼
$("#valid-img").click(function () {
$(this)[0].src += "?";
})
</script>
</body>
</html>
python+Django自己產生驗證碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
