Jadual Kandungan
验证码的生命周期
验证码实践
生成随机验证码
Rumah hujung hadapan web tutorial js js实现验证码的方法

js实现验证码的方法

Oct 12, 2017 am 10:09 AM
javascript kaedah mengesahkan

验证码的生命周期

在web应用中,验证码常用于登录注册。验证码本质就是一张图片。
我们来看一下验证码的生命周期:

  1. 客户端请求验证码

  2. 服务端渲染验证码:

  • 渲染一张包含随机字符串的图片

  • 随机字符串写入session

  • 读取图片并返回响应

  1. 客户端提交:

  • 显示响应(即验证码图片)

  • 获取用户输入字符串

  • 提交用户输入

  1. 服务端验证:

  • 取出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),
]
Salin selepas log masuk
  • 定义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/')
Salin selepas log masuk


    <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>
Salin selepas log masuk

说明:

  1. test.html中<img>标签的属性:src="/valid_code/",表示向http://127.0.0.1:8000/valid_code/发起get 请求,以获取图片

  2. 点击<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)
Salin selepas log masuk

说明:验证码本质就是一张图片,这里就先返回一张图片吧。。。

  • 浏览器访问http://127.0.0.1:8000/test/

这里写图片描述

说明:显示以上页面其实有两次get请求:

  1. /test/发起get请求,服务端返回test.html页面;

  2. test.html页面中<img>标签的属性:src="/valid_code/",对/valid_code/发起get请求,服务端返回一张图片

  3. 提交验证码:输入'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()`方法拿到内存文件句柄的内容
Salin selepas log masuk

说明:

  1. 使用前需要先安装pillow模块:pip install pillow

  2. 绘制的图像可以保存的磁盘上,但是速度慢,这里使用内存管理from io import BytesIO,优化速度

  3. f = BytesIO() 拿到一个内存文件句柄

  4. f.getvalue()拿到内存文件句柄的内容

  5. 注意,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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato. Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato. Mar 28, 2024 pm 12:50 PM

Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato.

Bagaimana untuk memasukkan bios pada papan induk Berwarna-warni? Ajar anda dua kaedah Bagaimana untuk memasukkan bios pada papan induk Berwarna-warni? Ajar anda dua kaedah Mar 13, 2024 pm 06:01 PM

Bagaimana untuk memasukkan bios pada papan induk Berwarna-warni? Ajar anda dua kaedah

Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam) Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam) May 01, 2024 pm 12:01 PM

Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam)

Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat Mar 25, 2024 pm 01:26 PM

Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat

Ringkasan kaedah untuk mendapatkan hak pentadbir dalam Win11 Ringkasan kaedah untuk mendapatkan hak pentadbir dalam Win11 Mar 09, 2024 am 08:45 AM

Ringkasan kaedah untuk mendapatkan hak pentadbir dalam Win11

Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan! Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan! Mar 23, 2024 am 10:42 AM

Kuasai dengan cepat: Bagaimana untuk membuka dua akaun WeChat pada telefon bimbit Huawei didedahkan!

Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih) Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih) May 04, 2024 pm 06:01 PM

Rahsia penetasan telur naga mudah alih terbongkar (langkah demi langkah untuk mengajar anda cara berjaya menetas telur naga mudah alih)

Penjelasan terperinci tentang kaedah pertanyaan versi Oracle Penjelasan terperinci tentang kaedah pertanyaan versi Oracle Mar 07, 2024 pm 09:21 PM

Penjelasan terperinci tentang kaedah pertanyaan versi Oracle

See all articles