Comment implémenter le code de vérification en js

Cycle de vie du code de vérification

Dans les applications Web, les codes de vérification sont souvent utilisés pour la connexion et l'enregistrement. Le code de vérification est essentiellement une image.
Regardons le cycle de vie du code de vérification :

1. Le client demande le code de vérification

2. Le serveur restitue le code de vérification :

• Rendre une image contenant une chaîne aléatoire

• Écrivez une chaîne aléatoire dans la session

• Lire l'image et renvoyer la réponse

1. Soumission du client :

• Afficher la réponse (c'est-à-dire l'image du code de vérification)

• Obtenir la chaîne de saisie de l'utilisateur

• Envoyer la saisie de l'utilisateur

1. Vérification côté serveur :

• Récupérer la chaîne aléatoire enregistrée dans la session et la comparer avec la chaîne soumise par l'utilisateur

• Les informations de chaîne sont cohérentes, passez à l'étape suivante

• Les informations de chaîne sont incohérentes et un message d'erreur est renvoyé

Ensuite, nous pratiquons le processus ci-dessus dans Django.

Pratique du code de vérification

• Créez un nouveau projet Django nommé ValidCode et créez l'application app01. Configurez le routage comme suit :

from django.conf.urls import urlfrom app01 import views

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

• Définissez la fonction de vue de test lorsque le client accède à

  , renvoyez la page test.html lorsque le client soumet les données, supprimez-la. de la session. Comparez le code de vérification enregistré avec la chaîne soumise par l'utilisateur : http://127.0.0.1:8000/test/

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>

Instructions :

1. Attributs de la balise

   dans test.html : <img src="/static/imghwm/default1.png" data-src="/valid_code/" class="lazy" alt="Comment implémenter le code de vérification en js" >, indiquant qu'une requête get est initiée vers pour obtenir l'image http://127.0.0.1:8000/valid_code/

2. Cliquez sur la balise

   et exécutez <a href="#" class="refresh">刷新</a> pour réobtenir l'image (actualiser le code de vérification) validPic.src += "?"

• Définissez la fonction d'affichage valid_code et écrivez la session de code de vérification, et renvoyez le code de vérification :

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)

Remarque : le code de vérification est essentiellement une image, alors retournons d'abord une image. . .

• Accès au navigateur

   : http://127.0.0.1:8000/test/

Remarque : Il existe en fait deux accès pour afficher ce qui précède page Request :

1. lance une requête get à

   et le serveur renvoie la page test.html /test/

2. dans la page test.html Attributs de la balise : <img src="/static/imghwm/default1.png" data-src="/valid_code/" class="lazy" alt="Comment implémenter le code de vérification en js" >, lancez une demande d'obtention pour , le serveur renvoie une image /valid_code/

3. Soumettez le code de vérification : saisissez 'bilibili', il affichera « OK », sinon réessayez Directement vers la page actuelle, omis.

Générer un code de vérification aléatoire

Cela semble fonctionner, mais dans les applications réelles, les codes de vérification sont générés de manière aléatoire. Quelle que soit la façon dont vous actualisez le code de vérification ci-dessus, il ne changera pas. Le serveur renvoie toujours une image statique. Alors, y a-t-il un moyen ? Oui, grâce au module de dessin d'oreillers, chaque fois qu'une requête est faite, le serveur restitue une image contenant une chaîne aléatoire en temps réel. Ensuite, nous réécrivons la fonction 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()`方法拿到内存文件句柄的内容

Instructions :

1. Vous devez installer le module oreiller avant utilisation : pip installer l'oreiller

2. L'image dessinée peut être enregistrée sur le disque, mais la vitesse est lente Ici, nous utilisons la gestion de la mémoire

   pour optimiser la vitessefrom io import BytesIO

3. Prendre Récupère le contenu d'un descripteur de fichier mémoire

   f = BytesIO()

4. Récupère le contenu d'un descripteur de fichier mémoire

   f.getvalue()

Notez que les informations de session de Django sont stockées dans la base de données par défaut, utilisez la migration de la base de données doit être effectuée avant la session pour générer la table django_session

Revoyez maintenant
•  :

  http://127.0.0.1:8000/test/

Le code de vérification a été généré en temps réel, et chaque fois que vous cliquez sur Actualiser, une nouvelle image s'affichera.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!