js实现验证码的方法
验证码的生命周期
在web应用中,验证码常用于登录注册。验证码本质就是一张图片。
我们来看一下验证码的生命周期:
客户端请求验证码
服务端渲染验证码:
渲染一张包含随机字符串的图片
随机字符串写入session
读取图片并返回响应
客户端提交:
显示响应(即验证码图片)
获取用户输入字符串
提交用户输入
服务端验证:
取出session中保存的随机字符串与用户提交的字符串进行对比
字符串信息一致,进行下一步处理
字符串信息不一致,返回错误信息
下面我们在Django中实践以上流程。
验证码实践
新建一个名为ValidCode的Django项目,并创建应用app01,配置路由如下:
from django.conf.urls import urlfrom app01 import views urlpatterns = [ url(r'^test/$', views.test), url(r'^valid_code/$', views.valid_code), ]
定义test视图函数,当客户端访问
http://127.0.0.1:8000/test/
时,返回test.html页面;当客户端提交提交数据时,取出session中保存的验证码与用户提交的字符串进行对比:
from django.shortcuts import render, HttpResponse, redirectdef test(request): if request.method == 'GET': return render(request, 'test.html') code1 = request.session['valid_code'] code2 = request.POST.get('valid_code') if code1 == code2: return HttpResponse('OK') else: return redirect('/test/')
<form action="" method="post"> {% csrf_token %} <p> <label for="valid_code">验证码:</label> </p> <p> <input type="text" id="valid_code" name="valid_code"> <img src="/valid_code/" alt="validPic" width="150" height="30"><a href="#" class="refresh">刷新</a> </p> <p> <button type="submit">验证</button> </p> </form> <script> var refresh = document.getElementsByClassName('refresh')[0]; var validPic = document.getElementsByTagName('img')[0]; refresh.onclick = function () { validPic.src += "?"; //利用img标签的特性,刷新验证码 } </script>
说明:
test.html中
<img>
标签的属性:src="/valid_code/"
,表示向http://127.0.0.1:8000/valid_code/
发起get 请求,以获取图片点击
<a href="#" class="refresh">刷新</a>
标签,执行validPic.src += "?"
,以重新获取图片(刷新验证码)
定义valid_code视图函数,将验证码写入session中,并返回验证码:
def valid_code(request): with open('bilibili.jpg', 'rb')as f: res = f.read() valid_code = 'bilibili' request.session["valid_code"] = valid_code return HttpResponse(res)
说明:验证码本质就是一张图片,这里就先返回一张图片吧。。。
浏览器访问
http://127.0.0.1:8000/test/
:
说明:显示以上页面其实有两次get请求:
对
/test/
发起get请求,服务端返回test.html页面;test.html页面中
<img>
标签的属性:src="/valid_code/"
,对/valid_code/
发起get请求,服务端返回一张图片提交验证码:输入'bilibili',显示‘OK',否则重定向到当前页面,略。
生成随机验证码
这样似乎就成了,不过实际应用中的验证码都是随机生成的。而上面的验证码不论怎么刷新,也不会变,服务端始终返回一张静态图片。那么有没有办法呢?有,用pillow画图模块,每次请求过来,服务端实时渲染一张包含随机字符串的图片。下面我们改写valid_code函数:
def valid_code(request): from PIL import Image, ImageDraw, ImageFont from io import BytesIO # 内存管理,优化速度 import random img = Image.new(mode='RGB', size=(120, 30), color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))) # 创建图像对象(模式,大小,颜色) draw = ImageDraw.Draw(img, mode='RGB') # 创建画笔(图像对象,模式) font = ImageFont.truetype("app01/static/fonts/kumo.ttf", 28) # 读取字体(字体路径,字体大小) code_list = [] for i in range(5): char = random.choice([chr(random.randint(65, 90)), str(random.randint(1, 9))]) code_list.append(char) draw.text([i * 24, 0], char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)), font=font) # 通过画笔的text方法,为图像绘制字符串(位置,文本,颜色,字体) # [i * 24, 0] 字体坐标,i*24设置水平偏移,让每个字符分开显示 f = BytesIO() # 拿到一个内存文件句柄f img.save(f, "png") # 保存图像对象到f valid_code = ''.join(code_list) request.session["valid_code"] = valid_code # 验证码写入session return HttpResponse(f.getvalue()) # `getvalue()`方法拿到内存文件句柄的内容
说明:
使用前需要先安装pillow模块:pip install pillow
绘制的图像可以保存的磁盘上,但是速度慢,这里使用内存管理
from io import BytesIO
,优化速度f = BytesIO()
拿到一个内存文件句柄f.getvalue()
拿到内存文件句柄的内容注意,Django的session信息默认存在数据库,使用session前应先执行数据库迁移,以生成django_session表
现在重新访问
http://127.0.0.1:8000/test/
:
验证码已经是实时生成的了,并且每次点击刷新,显示一张新的图片。
Atas ialah kandungan terperinci js实现验证码的方法 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Novel Tomato adalah perisian membaca novel yang sangat popular Kami sering mempunyai novel dan komik baru untuk dibaca dalam Novel Tomato Setiap novel dan komik sangat menarik ingin menulis ke dalam teks. Jadi bagaimana kita menulis novel di dalamnya? Kongsi tutorial novel Tomato tentang cara menulis novel 1. Mula-mula buka aplikasi novel percuma Tomato pada telefon bimbit anda dan klik pada Pusat Peribadi - Pusat Penulis 2. Lompat ke halaman Pembantu Penulis Tomato - klik pada Buat buku baru di penghujung novel.

Malangnya, orang sering memadamkan kenalan tertentu secara tidak sengaja atas sebab tertentu WeChat ialah perisian sosial yang digunakan secara meluas. Untuk membantu pengguna menyelesaikan masalah ini, artikel ini akan memperkenalkan cara mendapatkan semula kenalan yang dipadam dengan cara yang mudah. 1. Fahami mekanisme pemadaman kenalan WeChat Ini memberi kita kemungkinan untuk mendapatkan semula kenalan yang dipadamkan Mekanisme pemadaman kenalan dalam WeChat mengalih keluar mereka daripada buku alamat, tetapi tidak memadamkannya sepenuhnya. 2. Gunakan fungsi "Pemulihan Buku Kenalan" terbina dalam WeChat menyediakan "Pemulihan Buku Kenalan" untuk menjimatkan masa dan tenaga Pengguna boleh mendapatkan semula kenalan yang telah dipadamkan dengan cepat melalui fungsi ini. 3. Masuk ke halaman tetapan WeChat dan klik sudut kanan bawah, buka aplikasi WeChat "Saya" dan klik ikon tetapan di sudut kanan atas untuk memasuki halaman tetapan.

Papan induk berwarna-warni menikmati populariti tinggi dan bahagian pasaran dalam pasaran domestik China, tetapi sesetengah pengguna papan induk Berwarna-warni masih tidak tahu cara memasukkan bios untuk tetapan? Sebagai tindak balas kepada situasi ini, editor telah membawakan anda secara khas dua kaedah untuk memasukkan bios motherboard yang berwarna-warni. Datang dan cuba! Kaedah 1: Gunakan kekunci pintasan permulaan cakera U untuk terus memasuki sistem pemasangan cakera U Kekunci pintasan untuk papan induk Berwarna untuk memulakan cakera U dengan satu klik ialah ESC atau F11 Pertama, gunakan Black Shark Installation Master untuk mencipta Black Cakera but cakera Shark U, dan kemudian hidupkan komputer Apabila anda melihat skrin permulaan, tekan terus kekunci ESC atau F11 pada papan kekunci untuk memasuki tetingkap untuk pemilihan item permulaan secara berurutan ke tempat "USB " dipaparkan, dan kemudian

1. Selepas membuka WeChat, klik ikon carian, masukkan pasukan WeChat, dan klik perkhidmatan di bawah untuk masuk. 2. Selepas memasukkan, klik pilihan alat layan diri di sudut kiri bawah. 3. Selepas mengklik, dalam pilihan di atas, klik pilihan untuk menyahsekat/merayu untuk pengesahan tambahan.

Permainan mudah alih telah menjadi sebahagian daripada kehidupan orang ramai dengan perkembangan teknologi. Ia telah menarik perhatian ramai pemain dengan imej telur naga yang comel dan proses penetasan yang menarik, dan salah satu permainan yang telah menarik perhatian ramai ialah versi mudah alih Dragon Egg. Untuk membantu pemain memupuk dan mengembangkan naga mereka sendiri dengan lebih baik dalam permainan, artikel ini akan memperkenalkan kepada anda cara menetas telur naga dalam versi mudah alih. 1. Pilih jenis telur naga yang sesuai Pemain perlu berhati-hati memilih jenis telur naga yang mereka suka dan sesuai dengan diri mereka, berdasarkan pelbagai jenis sifat dan kebolehan telur naga yang disediakan dalam permainan. 2. Tingkatkan tahap mesin pengeraman Pemain perlu meningkatkan tahap mesin pengeraman dengan menyelesaikan tugasan dan mengumpul prop Tahap mesin pengeraman menentukan kelajuan penetasan dan kadar kejayaan penetasan. 3. Kumpul sumber yang diperlukan untuk penetasan Pemain perlu berada dalam permainan

Menetapkan saiz fon telah menjadi keperluan pemperibadian yang penting kerana telefon mudah alih menjadi alat penting dalam kehidupan seharian manusia. Untuk memenuhi keperluan pengguna yang berbeza, artikel ini akan memperkenalkan cara meningkatkan pengalaman penggunaan telefon mudah alih dan melaraskan saiz fon telefon mudah alih melalui operasi mudah. Mengapa anda perlu melaraskan saiz fon telefon mudah alih anda - Melaraskan saiz fon boleh menjadikan teks lebih jelas dan mudah dibaca - Sesuai untuk keperluan membaca pengguna yang berbeza umur - Mudah untuk pengguna yang kurang penglihatan menggunakan saiz fon fungsi tetapan sistem telefon mudah alih - Cara memasukkan antara muka tetapan sistem - Dalam Cari dan masukkan pilihan "Paparan" dalam antara muka tetapan - cari pilihan "Saiz Fon" dan laraskan saiz fon dengan pihak ketiga aplikasi - muat turun dan pasang aplikasi yang menyokong pelarasan saiz fon - buka aplikasi dan masukkan antara muka tetapan yang berkaitan - mengikut individu

Ringkasan cara mendapatkan hak pentadbir Win11 Dalam sistem pengendalian Windows 11, hak pentadbir adalah salah satu kebenaran yang sangat penting yang membolehkan pengguna melakukan pelbagai operasi pada sistem. Kadangkala, kami mungkin perlu mendapatkan hak pentadbir untuk menyelesaikan beberapa operasi, seperti memasang perisian, mengubah suai tetapan sistem, dsb. Berikut meringkaskan beberapa kaedah untuk mendapatkan hak pentadbir Win11, saya harap ia dapat membantu anda. 1. Gunakan kekunci pintasan Dalam sistem Windows 11, anda boleh membuka gesaan arahan dengan cepat melalui kekunci pintasan.

Penjelasan terperinci tentang kaedah pertanyaan versi Oracle Oracle ialah salah satu sistem pengurusan pangkalan data hubungan yang paling popular di dunia Ia menyediakan fungsi yang kaya dan prestasi yang berkuasa dan digunakan secara meluas dalam perusahaan. Dalam proses pengurusan dan pembangunan pangkalan data, adalah sangat penting untuk memahami versi pangkalan data Oracle. Artikel ini akan memperkenalkan secara terperinci cara untuk menanyakan maklumat versi pangkalan data Oracle dan memberikan contoh kod khusus. Tanya versi pangkalan data pernyataan SQL dalam pangkalan data Oracle dengan melaksanakan pernyataan SQL yang mudah
