jqueryのパスワード変更の検証-フロントエンドQ&A-php.cn

jqueryのパスワード変更の検証

WBOY

リリース： 2023-05-25 15:46:09

オリジナル

665 人が閲覧しました

インターネットの普及に伴い、ますます多くの人がオンラインショッピングやソーシャルメディアなどのさまざまなオンラインサービスを理解し、使用し始めています。これらのサービスでは通常、セキュリティとプライバシー保護を確保するためにアカウントを作成し、パスワードを設定する必要があります。ただし、パスワードを変更する必要がある場合、いくつかの問題やエラーが発生する可能性があるため、このときは JavaScript ライブラリ jQuery を使用して問題を解決する必要があります。この記事では、jQueryを使ってパスワードの確認と変更を行う方法を紹介します。

パスワードの検証

まず、ユーザーが元のパスワードを変更する前に、正しい元のパスワードを入力していることを確認する必要があります。これを行うには、ユーザーの元のパスワード用と新しいパスワード用の 2 つの入力ボックスを備えたフォームを作成できます。

<form>
  <label>原密码：</label>
  <input type="password" id="oldPassword"><br>
  <label>新密码：</label>
  <input type="password" id="newPassword"><br>
  <input type="submit" value="更改密码" id="changePasswordBtn">
</form>

ログイン後にコピー

次に、jQuery を使用して送信ボタンのクリックイベントをリッスンし、元のパスワードが正しいかどうかを確認します。元のパスワードが正しく入力されている場合、ユーザーはパスワードを変更できます。そうでない場合は、間違った入力を求めるプロンプトが表示されます。

$(document).ready(function() {
  $('#changePasswordBtn').click(function(event) {
    event.preventDefault();

    // 获取原始密码和新密码
    var oldPassword = $('#oldPassword').val();
    var newPassword = $('#newPassword').val();

    // 发送AJAX请求到服务器验证原密码是否正确
    $.ajax({
      url: 'check_password.php',
      method: 'POST',
      data: { oldPassword: oldPassword },
      success: function(response) {
        if (response === 'success') {
          // 原密码正确，允许修改密码
          // ...
        } else {
          // 原密码错误，提示重新输入
          alert('原密码输入错误，请重新输入。');
        }
      }
    });
  });
});

ログイン後にコピー

上記のコードでは、AJAX テクノロジを使用してサーバーに POST リクエストを送信し、入力された元のパスワードが正しいかどうかを確認します。単純なパスワード検証コードのサーバー側の実装は次のとおりです。

// check_password.php
<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $oldPassword = $_POST['oldPassword'];
  $hashedPassword = $_SESSION['hashedPassword']; // 从会话中获取已加密的密码

  if (password_verify($oldPassword, $hashedPassword)) {
    echo 'success'; // 原密码正确
  } else {
    echo 'failure'; // 原密码错误
  }
} else {
  header('HTTP/1.1 405 Method Not Allowed');
  header('Allow: POST');
  exit;
}
?>

ログイン後にコピー

上記のコードでは、PHP の組み込みパスワード検証関数password_verify() を使用して、入力された元のパスワードが正しいかどうかを検証します。さらに、セキュリティを確保するために、パスワードをクリアテキストでクライアントに送信するのではなく、セッション変数を使用して暗号化されたパスワードを保存します。

パスワードの変更

元のパスワードを確認した後、jQuery を使用してパスワードを変更できます。ここでも AJAX テクノロジーを使用して新しいパスワードをサーバーに渡し、サーバー側で新しいパスワードを暗号化してデータベースに保存します。サーバーがパスワードを正常に更新したかどうかを確認するには、AJAX リクエストによって返されるコールバック関数で対応する操作を実行します。

// 修改密码
$.ajax({
  url: 'change_password.php',
  method: 'POST',
  data: { newPassword: newPassword },
  success: function(response) {
    if (response === 'success') {
      // 密码修改成功，提示用户并清除输入框内容
      alert('密码修改成功！');
      $('#oldPassword').val('');
      $('#newPassword').val('');
    } else {
      // 密码修改失败，提示用户
      alert('密码修改失败，请稍后再试。');
    }
  }
});

// change_password.php
<?php
session_start();
 
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $newPassword = $_POST['newPassword'];
  $email = $_SESSION['email']; // 假设我们使用电子邮件作为用户名

  // 将新密码加密
  $hashedPassword = password_hash($newPassword, PASSWORD_DEFAULT);

  // 将新密码存储到数据库中
  $db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
  $stmt = $db->prepare('UPDATE users SET password = ? WHERE email = ?');
  $stmt->execute(array($hashedPassword, $email));

  // 检查是否成功更新数据库
  if ($stmt->rowCount() === 1) {
    echo 'success'; // 密码修改成功
  } else {
    echo 'failure'; // 密码修改失败
  }
} else {
  header('HTTP/1.1 405 Method Not Allowed');
  header('Allow: POST');
  exit;
}
?>

ログイン後にコピー

上記のコードでは、PHP の組み込みパスワード暗号化関数password_hash()を使用して、新しいパスワードを暗号化してデータベースに保存します。データベースが正常に更新された場合、サーバーは文字列「success」を返し、それ以外の場合は「failure」を返します。クライアントコードでは、サーバーから返された文字列に基づいて操作が成功したかどうかを判断し、それに応じてユーザーにプロンプトを表示します。

要約すると、パスワードの検証と変更に jQuery を使用することは、ユーザーアカウントのセキュリティとプライバシー保護を確保するための安全で信頼できる方法です。 bcrypt アルゴリズムや拡張キー導出関数 PBKDF2 を使用してパスワードを暗号化するなど、ユーザーパスワードのセキュリティを確保するには、より高度な暗号化アルゴリズムとテクノロジを使用する必要があることに注意してください。

以上がjqueryのパスワード変更の検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。