Rumah  >  Artikel  >  hujung hadapan web  >  jquery menukar pengesahan kata laluan

jquery menukar pengesahan kata laluan

WBOY
WBOYasal
2023-05-25 15:46:09638semak imbas

Dengan populariti Internet, semakin ramai orang mula memahami dan menggunakan pelbagai perkhidmatan dalam talian, seperti membeli-belah dalam talian, media sosial, dll. Perkhidmatan ini biasanya memerlukan kami membuat akaun dan menetapkan kata laluan untuk memastikan keselamatan dan perlindungan privasi. Walau bagaimanapun, apabila kami perlu menukar kata laluan, kami mungkin menghadapi beberapa kesukaran dan ralat Pada masa ini, kami perlu menggunakan jQuery perpustakaan JavaScript untuk menyelesaikan masalah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk pengesahan dan pengubahsuaian kata laluan.

  1. Pengesahan kata laluan

Pertama sekali, kami perlu memastikan bahawa pengguna memasukkan kata laluan asal yang betul sebelum mereka boleh mengubah suainya. Untuk melakukan ini, kita boleh membuat borang dengan dua kotak input, satu untuk kata laluan asal pengguna dan satu untuk kata laluan baharu.

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

Kemudian kami menggunakan jQuery untuk mendengar acara klik butang hantar dan mengesahkan sama ada kata laluan asal adalah betul. Jika kata laluan asal dimasukkan dengan betul, pengguna dibenarkan menukar kata laluan, jika tidak input yang salah akan digesa.

$(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('原密码输入错误,请重新输入。');
        }
      }
    });
  });
});

Dalam kod di atas, kami menggunakan teknologi AJAX untuk menghantar permintaan POST kepada pelayan untuk mengesahkan sama ada kata laluan asal yang dimasukkan adalah betul. Kod pengesahan kata laluan mudah yang dilaksanakan pada bahagian pelayan adalah seperti berikut:

// 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;
}
?>

Dalam kod di atas, kami menggunakan fungsi pengesahan kata laluan terbina dalam PHP password_verify() untuk mengesahkan sama ada kata laluan asal yang dimasukkan adalah betul. Selain itu, untuk memastikan keselamatan, kami menggunakan pembolehubah sesi untuk menyimpan kata laluan yang disulitkan dan bukannya menghantar kata laluan dalam teks yang jelas kepada pelanggan.

  1. Tukar kata laluan

Selepas mengesahkan kata laluan asal, kami boleh menggunakan jQuery untuk menukar kata laluan. Kami sekali lagi menggunakan teknologi AJAX untuk menghantar kata laluan baharu kepada pelayan, dan bahagian pelayan akan menyulitkan kata laluan baharu dan menyimpannya dalam pangkalan data. Untuk mengesahkan sama ada pelayan berjaya mengemas kini kata laluan, kami boleh melakukan operasi yang sepadan dalam fungsi panggil balik yang dikembalikan oleh permintaan 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;
}
?>

Dalam kod di atas, kami menggunakan fungsi penyulitan kata laluan terbina dalam PHP password_hash() untuk menyulitkan dan menyimpan kata laluan baharu ke dalam pangkalan data. Jika pangkalan data berjaya dikemas kini, pelayan mengembalikan rentetan "kejayaan", jika tidak, ia mengembalikan "kegagalan". Dalam kod pelanggan, kami menentukan sama ada operasi itu berjaya berdasarkan rentetan yang dikembalikan oleh pelayan, dan menggesa pengguna dengan sewajarnya.

Ringkasnya, menggunakan jQuery untuk pengesahan dan pengubahsuaian kata laluan ialah kaedah yang selamat dan boleh dipercayai untuk memastikan keselamatan dan perlindungan privasi akaun pengguna. Perlu diingatkan bahawa kita harus menggunakan algoritma dan teknologi penyulitan peringkat lebih tinggi untuk memastikan keselamatan kata laluan pengguna, seperti menggunakan algoritma bcrypt atau/dan fungsi terbitan kunci lanjutan PBKDF2 untuk menyulitkan kata laluan.

Atas ialah kandungan terperinci jquery menukar pengesahan kata laluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn