検証コードをjsで実装する方法

検証コードのライフサイクル

Web アプリケーションでは、ログインと登録に検証コードがよく使用されます。確認コードは基本的に画像です。
検証コードのライフサイクルを見てみましょう:

1. クライアントは検証コードをリクエストします

2. サーバーは検証コードをレンダリングします:

• ランダムな文字列を含む画像をレンダリングします

• random文字列はセッションに書き込まれます

• 画像を読み取り、応答を返します

1. clientの送信：ユーザー入力文字列

ユーザー入力を送信

• サーバー側検証:

セッションに保存されたランダムな文字列を取り出し、ユーザーによって送信された文字列と比較します

1. 文字列情報が一致しているので次のステップに進む

文字列情報が一致していないためエラーメッセージが返される
上記の処理をDjangoで練習してみましょう。

• 検証コードの練習

• ValidCode という名前の新しい Django プロジェクトを作成し、アプリケーション app01 を作成します。次のようにルーティングを構成します。 http://127.0.0.1:8000/test/、クライアントがデータを送信したら test.html ページに戻り、セッションに保存されている検証コードを取り出して、クライアントによって送信された文字列と比較します。ユーザー:

from django.conf.urls import urlfrom app01 import views

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

• 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/')

  手順:

test.html の <img alt="検証コードをjsで実装する方法" > タグの属性: src="/valid_code/ 「」は、画像を取得するために http://127.0.0.1:8000/valid_code/ への取得リクエストを開始することを意味します

• <a href="#%20" class="refresh"> </a> タグを更新し、validPic.src += "?" を実行して画像を再取得します (検証コードを更新します)

  http://127.0.0.1:8000/test/时，返回test.html页面；当客户端提交提交数据时，取出session中保存的验证码与用户提交的字符串进行对比：

    <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>

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)

说明：

1. test.html中<img alt="検証コードをjsで実装する方法" >标签的属性：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):    
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()`方法拿到内存文件句柄的内容

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

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

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

1. 对/test/发起get请求，服务端返回test.html页面；

2. test.html页面中<img alt="検証コードをjsで実装する方法" >标签的属性：src="/valid_code/"，对/valid_code/发起get请求，服务端返回一张图片

3. 提交验证码：输入'bilibili'，显示‘OK'，否则重定向到当前页面，略。

生成随机验证码

这样似乎就成了，不过实际应用中的验证码都是随机生成的。而上面的验证码不论怎么刷新，也不会变，服务端始终返回一张静态图片。那么有没有办法呢？有，用pillow画图模块，每次请求过来，服务端实时渲染一张包含随机字符串的图片。下面我们改写valid_code函数：

rrreee

说明：

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/

valid_code ビュー関数を定義し、検証コードをセッションに書き込み、検証コードを返します:

🎜🎜rrreee🎜 説明: 検証コードは本質的に画像なので、最初に画像を返しましょう。 。 。 🎜🎜🎜🎜ブラウザアクセス http://127.0.0.1:8000/test/: 🎜🎜🎜🎜🎜🎜注: 上記のページには実際には 2 つの取得リクエストがあります: 🎜🎜🎜🎜 to /test/Initiate get リクエストの場合、サーバーは test.html ページ 🎜🎜🎜🎜test.html ページのタグの <img alt="検証コードをjsで実装する方法" > 属性を返します: src="/valid_code/" code >、/valid_code/ への get リクエストを開始すると、サーバーは画像を返します 🎜🎜🎜🎜 確認コードを送信します: 「bilibili」と入力すると、「OK」と表示されます。それ以外の場合はリダイレクトされます現在のページへ、省略。 🎜🎜🎜🎜ランダムな検証コードを生成する🎜🎜これは機能するように見えますが、実際のアプリケーションの検証コードはすべてランダムに生成されます。上記の検証コードをどのように更新しても、サーバーは常に静的な画像を返します。それで、何か方法はありますか？はい、枕描画モジュールを使用すると、リクエストが行われるたびに、サーバーはランダムな文字列を含む画像をリアルタイムでレンダリングします。次に valid_code 関数を書き換えます: 🎜🎜🎜🎜rrreee🎜 説明: 🎜🎜🎜🎜 使用する前に枕モジュールをインストールする必要があります: pip installpillow🎜🎜🎜🎜 描画したイメージはディスクに保存できますが、速度はここではメモリ管理が使用されています。from io import BytesIO、速度を最適化します🎜🎜🎜🎜f = BytesIO() メモリ ファイル ハンドルを取得します🎜🎜🎜🎜 f.getvalue() code>メモリ ファイル ハンドルの内容を取得します🎜🎜🎜🎜Django のセッション情報はデフォルトでデータベースに保存されることに注意してください。セッションを使用する前に、データベース移行を実行して django_session を生成する必要があります。 table🎜🎜🎜🎜🎜🎜 ここで http://127.0.0.1:8000/test/ にアクセスしてください: 🎜🎜🎜🎜🎜🎜🎜 検証コードはリアルタイムで生成されており、 「更新」をクリックすると、新しい画像が表示されます。 🎜

以上が検証コードをjsで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。