How to implement verification code in js

Life cycle of verification code

In web applications, verification codes are often used for login and registration. The verification code is essentially a picture.
Let’s take a look at the life cycle of the verification code:

1. Client requests verification code

2. Server-side rendering verification code:

• Render a picture containing a random string

• Write a random string into the session

• Read the image and return the response

1. Client submission:

• Display response (i.e. verification code image)

• Get user input string

• Submit user input

1. Server-side verification:

• Take out the random string saved in the session and compare it with the string submitted by the user

• The string information is consistent, proceed to the next step

• The string information is inconsistent, and an error message is returned

Next we practice the above process in Django.

Verification code practice

• Create a new Django project named ValidCode and create application app01. Configure the routing as follows:

from django.conf.urls import urlfrom app01 import views

urlpatterns = [
    url(r'^test/$', views.test),
    url(r'^valid_code/$', views.valid_code),
]

• Define the test view function. When the client accesses http://127.0.0.1:8000/test/, test.html is returned page; when the client submits the data, take out the verification code saved in the session and compare it with the string submitted by the user:

##

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"    style="max-width:90%"><a href="#" class="refresh">刷新</a>
        </p>
        <p>
            <button type="submit">验证</button>
        </p>
    </form>
    
    <script>
        var refresh = document.getElementsByClassName(&#39;refresh&#39;)[0];
        var validPic = document.getElementsByTagName(&#39;img&#39;)[0];
        refresh.onclick = function () {
            validPic.src += "?"; //利用img标签的特性，刷新验证码
        }
    </script>

Description:

##Attributes of the

1. tag in ##test.html: src="/valid_code/" , means to initiate a get request to http://127.0.0.1:8000/valid_code/

   to obtain the image

2. ClickRefresh tag, execute validPic.src += "?"

   to re-obtain the picture (refresh verification code)

• Define the valid_code view function, write the verification code into the session, and return the verification code:

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)

Explanation: The essence of the verification code is a picture, so let’s return a picture first. . .

• Browser accesshttp://127.0.0.1:8000/test/

  ：

Description: The above page actually has two get requests:

1. initiates a get request to /test/

   , and the server returns the test.html page ;

2. The attributes of the tag in the test.html page: src="/valid_code/", for /valid_code/

   Initiate a get request, and the server returns a picture

3. Submit the verification code: enter 'bilibili', and it will display 'OK', otherwise it will redirect to the current page, omitted .

Generate a random verification code

This seems to work, but the verification codes in actual applications are all randomly generated. No matter how you refresh the verification code above, it will not change. The server always returns a static picture. So is there any way? Yes, using the pillow drawing module, every time a request is made, the server renders a picture containing a random string in real time. Next we rewrite the valid_code function:

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()`方法拿到内存文件句柄的内容

Instructions:

1. You need to install the pillow module before use: pip install pillow

2. The drawn image can be saved on the disk, but the speed is slow. Here we use memory managementfrom io import BytesIO

   to optimize the speed

3. f = BytesIO()

   Get a memory file handle

4. f.getvalue()

   Get the contents of the memory file handle

5. Note that Django’s session information exists in the database by default. Before using session, you should perform database migration to generate the django_session table

• Revisit nowhttp://127.0.0.1:8000/test/

  ：

##The verification code has been generated in real time , and every time you click refresh, a new picture is displayed.

The above is the detailed content of How to implement verification code in js. For more information, please follow other related articles on the PHP Chinese website!