Layui を使用して、ランダムに生成された検証コードをサポートするログイン システムを開発する方法

Layui を使用して、ランダムに生成された検証コードをサポートするログイン システムを開発する方法

Layui は、豊富なコンポーネントと機能を提供する非常に人気のあるフロントエンド UI フレームワークです。スタイル: 開発者が美しく使いやすいインターフェイスをより迅速かつ簡単に構築するのに役立ちます。この記事では、Layui を使用して、システムのセキュリティを強化するためにランダムに生成された確認コードをサポートするログイン システムを開発する方法を紹介します。以下に具体的なコード例を示します。

1. 準備

1. Layui の最新バージョンをダウンロードし、CSS ファイルと JS ファイルを HTML に導入します。
2. ログイン ページの HTML コードを記述するために、login.html という名前の HTML ファイルを作成します。
3. 同じディレクトリに login.js という名前の JavaScript ファイルを作成し、ログイン ページのロジック コードを記述します。

2. ログイン ページの実装

1. login.html で、Layui が提供するフォーム コンポーネントを使用して、ユーザー名、パスワードを含むログイン フォームを構築します。および検証コード:

   <form class="layui-form" action="">
     <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
      <input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
      <img src="" alt="captcha" id="captchaImg">
    </div>
    <div class="layui-input-inline">
      <a href="#" id="refreshCaptcha">刷新验证码</a>
    </div>
     </div>
     <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
    </div>
     </div>
   </form>

2. login.js で、Layui が提供するフォーム モジュールを使用してフォームを初期化し、検証コードを更新するためのロジックを追加します:

   layui.use(['form'], function(){
     var form = layui.form;
     
     // 初始化表单
     form.render();
     
     // 验证码刷新
     var captchaImg = document.getElementById('captchaImg');
     var refreshCaptcha = document.getElementById('refreshCaptcha');
     refreshCaptcha.onclick = function() {
    captchaImg.src = '/captcha.php?' + Math.random();
     };
   });

   3. 認証コードの追加 関数

3. サーバー側で認証コードを生成するインターフェース (captcha.php など) を用意し、ランダムに生成された認証コード画像を返します。

4. login.html の認証コード画像の img タグに動的アドレスを追加して、生成された認証コード画像を表示します。

   <img src="" alt="captcha" id="captchaImg">

5. login.jsに認証コード画像を取得・設定する機能を追加します:

   layui.use(['form'], function(){
     var form = layui.form;
     
     // 初始化表单
     form.render();
     
     // 验证码刷新
     var captchaImg = document.getElementById('captchaImg');
     var refreshCaptcha = document.getElementById('refreshCaptcha');
     refreshCaptcha.onclick = function() {
    captchaImg.src = '/captcha.php?' + Math.random();
     };
     
     // 获取验证码图片
     captchaImg.src = '/captcha.php';
   });

   以上の手順により、ランダムに対応するメソッドを実装しました。認証コードを生成するログイン システム。ユーザーは、ログイン ページにユーザー名、パスワード、確認コードを入力し、「今すぐログイン」ボタンをクリックして確認します。認証コード入力ボックスの横にある「認証コードを更新」ボタンをクリックすると、新しい認証コードの画像が再生成されて表示されます。

上記のコードは単なる基本的な例であり、実際の開発ではさらに多くのエラー処理とセキュリティ検証を行う必要があることに注意してください。同時に、具体的な実装プロセスは、バックエンド インターフェイスの呼び出し方法に応じて適切に調整する必要があります。

Layui フレームワークとサーバー側の連携により、システムのセキュリティを向上させるための検証コードを簡単に生成して使用できます。この記事がお役に立てば幸いです。

以上がLayui を使用して、ランダムに生成された検証コードをサポートするログイン システムを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。