So implementieren Sie einen Bestätigungscode in js

Lebenszyklus des Bestätigungscodes

In Webanwendungen werden Bestätigungscodes häufig für die Anmeldung und Registrierung verwendet. Der Bestätigungscode ist im Wesentlichen ein Bild.
Werfen wir einen Blick auf den Lebenszyklus des Bestätigungscodes:

1. Der Client fordert den Bestätigungscode an

2. Der Server rendert den Bestätigungscode:

• Rendern Sie ein Bild mit einer zufälligen Zeichenfolge

• Schreiben Sie eine zufällige Zeichenfolge in die Sitzung

• Lesen Sie das Bild und senden Sie die Antwort zurück

1. Kundeneinreichung:

• Antwort anzeigen (d. h. Bild des Bestätigungscodes)

• Benutzereingabezeichenfolge abrufen

• Benutzereingabe senden

1. Serverseitige Überprüfung:

• Rufen Sie die in der Sitzung gespeicherte Zufallszeichenfolge ab und vergleichen Sie sie mit der übermittelten Zeichenfolge vom Benutzer

• Die Zeichenfolgeninformationen sind konsistent, fahren Sie mit dem nächsten Schritt fort

• Die Zeichenfolgeninformationen sind inkonsistent und es wird eine Fehlermeldung zurückgegeben

Als nächstes üben wir den obigen Prozess in Django.

Verifizierungscode-Praxis

• Erstellen Sie ein neues Django-Projekt mit dem Namen ValidCode und erstellen Sie die Anwendung app01 wie folgt:

from django.conf.urls import urlfrom app01 import views

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

• Definieren Sie die Testansichtsfunktion. Wenn der Client auf http://127.0.0.1:8000/test/ zugreift, geben Sie die Seite test.html zurück und nehmen Sie sie heraus der Sitzung. Vergleichen Sie den gespeicherten Bestätigungscode mit der vom Benutzer übermittelten Zeichenfolge:

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="/static/imghwm/default1.png"  data-src="/valid_code/"  class="lazy"   alt="validPic"    style="max-width:90%"  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>

Anweisungen:

1. Attribute des <img src="/static/imghwm/default1.png" data-src="/valid_code/" class="lazy" alt="So implementieren Sie einen Bestätigungscode in js" >-Tags in test.html: , was angibt, dass eine Get-Anfrage an http://127.0.0.1:8000/valid_code/ initiiert wird, um das Bild

2. Klicken Sie auf das Tag

   und führen Sie <a href="#" class="refresh">刷新</a> aus, um das Bild erneut zu erhalten (den Bestätigungscode aktualisieren) validPic.src += "?"

• Definieren Sie die Ansichtsfunktion valid_code, schreiben Sie die Bestätigungscode-Sitzung und geben Sie den Bestätigungscode zurück:

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)

Hinweis: Der Bestätigungscode ist im Wesentlichen ein Bild, also lasst uns zuerst ein Bild zurückgeben. . .

• Browserzugriff

  : http://127.0.0.1:8000/test/

Hinweis: Es gibt tatsächlich zwei Möglichkeiten, das Obige anzuzeigen Seitenanforderung:

1. initiiert eine Get-Anfrage an

   und der Server gibt die test.html-Seite /test/

2. zurück die test.html-Seite Attribute des Tags: <img src="/static/imghwm/default1.png" data-src="/valid_code/" class="lazy" alt="So implementieren Sie einen Bestätigungscode in js" >, eine Abrufanforderung für initiieren, und der Server gibt ein Bild zurück /valid_code/

3. Bestätigungscode senden: „bilibili“ eingeben, Es wird „OK“ angezeigt, andernfalls versuchen Sie es erneut. Direkt zur aktuellen Seite, weggelassen.

Generieren Sie einen zufälligen Bestätigungscode

Dies scheint zu funktionieren, aber in tatsächlichen Anwendungen werden Bestätigungscodes zufällig generiert. Ganz gleich, wie Sie den Bestätigungscode oben aktualisieren, er ändert sich nicht. Der Server gibt immer ein statisches Bild zurück. Gibt es also eine Möglichkeit? Ja, mit dem Kissenzeichnungsmodul rendert der Server jedes Mal, wenn eine Anfrage gestellt wird, in Echtzeit ein Bild, das eine zufällige Zeichenfolge enthält. Als nächstes schreiben wir die valid_code-Funktion neu:

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

Anleitung:

1. Sie müssen das Kissenmodul vor der Verwendung installieren: pip Kissen installieren

2. Das gezeichnete Bild kann auf der Festplatte gespeichert werden, aber die Geschwindigkeit ist langsam. Hier verwenden wir die Speicherverwaltung

   , um die Geschwindigkeit zu optimierenfrom io import BytesIO

3. Take Den Inhalt eines Speicherdateihandles abrufen f = BytesIO()

4. Den Inhalt des Speicherdateihandles abrufen f.getvalue()

5. Beachten Sie, dass die Sitzungsinformationen von Django standardmäßig in der Datenbank gespeichert werden. Die Datenbankmigration sollte vor der Sitzung durchgeführt werden, um die django_session-Tabelle zu generieren

• Jetzt noch einmal besuchen

  : http://127.0.0.1:8000/test/

Der Bestätigungscode wurde in Echtzeit generiert und jedes Mal, wenn Sie auf „Aktualisieren“ klicken, wird ein neues Bild angezeigt.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Bestätigungscode in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!