Sistem pengaturan ulang kata sandi di PHP

Salah satu fitur yang sangat penting dari setiap situs web keanggotaan yang baik adalah sistem pengaturan ulang kata sandi karena beberapa pengguna pasti akan lupa kata sandi mereka. Dalam tutorial ini, saya menguraikan langkah-langkah yang terlibat dalam memulihkan kata sandi pengguna; kami juga akan mengimplementasikan sistem seperti itu menggunakan PHP dan database MySQL dalam tutorial ini.

Seluruh proses penerapan sistem tersebut dapat dipecah menjadi 3 langkah utama. Untuk memudahkan penjelasannya, mari kita analisa langkah-langkah berikut dalam bentuk formulir yang akan kami sajikan untuk diisi pengguna:

Formulir Masuk: Formulir ini mengambil kombinasi nama pengguna dan sandi pengguna dan memasukkannya ke dalam log jika mereka terdaftar di sistem. Pada formulir ini kami menyediakan "Lupa kata sandi Anda?" link jika pengguna lupa sandi dan perlu menyetel ulang.
Formulir Email: Jika pengguna lupa kata sandinya, mereka dapat mengklik tombol "Lupa kata sandi Anda?" link pada halaman login untuk mengatur ulang. Mengeklik tautan ini akan mengarahkan mereka ke laman lain yang meminta mereka untuk memasukkan email. Ketika alamat email yang mereka berikan tidak ada di tabel pengguna kami di database, kami akan menampilkan dan pesan kesalahan yang mengatakan "Tidak ada pengguna seperti itu di sistem kami". Jika di sisi lain pengguna ada, kami akan membuat token unik (string acak unik) dan menyimpan token ini bersama dengan alamat email tersebut di tabel password_resets di database. Kemudian kami akan mengirimi mereka email yang memiliki token itu di tautan. Saat mereka mengklik link di email yang kami kirimkan, mereka akan diarahkan kembali ke situs web kami di halaman yang menyajikan formulir lain kepada mereka.
Formulir sandi baru: Setelah pengguna kembali ke situs web kami lagi, kami akan mengambil token yang berasal dari tautan dan menyimpannya dalam variabel sesi. Kemudian kami akan memberikan formulir yang meminta mereka memasukkan kata sandi baru untuk akun mereka di situs web kami. Ketika kata sandi baru dikirimkan, kami akan menanyakan tabel password_resets untuk catatan yang memiliki token yang baru saja datang dari tautan dalam surat. Jika token ditemukan di tabel password_resets, maka kami yakin bahwa pengguna mereka adalah siapa mereka dan mereka mengklik tautan di email mereka. Pada titik ini sekarang kami mengambil email pengguna dari tabel password_resets (ingat kami telah menyimpan token di samping alamat email mereka) dan menggunakan email tersebut untuk mengambil pengguna dari tabel users dan memperbarui sandi mereka.

Semoga itu cukup jelas. Jika tidak maka bertahan saja dan itu akan menjadi lebih jelas saat kita menerapkannya.

Implementasi

Buat database bernama password_recovery dan di database tersebut, buat dua tabel yaitu users dan password_resets dengan kolom berikut:

pengguna:

+----+-----------+--------------+------------+
|     field      |     type     | specs      |
+----+-----------+--------------+------------+
|  id            | INT(11)      |            |
|  username      | VARCHAR(255) |            |
|  email         | VARCHAR(255) | UNIQUE     |
|  password      | VARCHAR(255) |            |
+----------------+--------------+------------+

password_reset:

+----+-----------+--------------+------------+
|     field      |     type     | specs      |
+----+-----------+--------------+------------+
|  id            | INT(11)      |            |
|  email         | VARCHAR(255) |            |
|  token         | VARCHAR(255) | UNIQUE     |
+----------------+--------------+------------+

Catatan: Aplikasi ini mengharuskan pengguna sudah terdaftar di sistem. Namun, kami tidak akan membahas bagian pendaftaran pengguna dalam tutorial ini karena sudah dibahas di situs ini. Anda dapat mengikuti tutorial itu terlebih dahulu (saya sarankan Anda melakukannya) atau tidak, tetapi perlu diingat bahwa kami harus memiliki pengguna di tabel pengguna kami di database sebelum kami dapat melanjutkan untuk mengatur ulang kata sandi mereka. Jadi dengan satu atau lain cara, tambahkan pengguna ke database mysql Anda. Anda dapat menggunakan alat seperti PHPMyAdmin dan pastikan Anda mengenkripsi sandi menggunakan md5().

Sekarang buat folder proyek bernama pemulihan sandi dan pastikan folder ini ada di direktori server Anda (folder htdocs atau folder www). Dalam folder tersebut, buat tiga file yaitu:login.php, enter_email.php, new_pass.php:

Masing-masing dari tiga file ini mewakili tiga langkah yang kami uraikan sebelumnya. Buka masing-masing dan rekatkan kode berikut di dalamnya:

<?php include('app_logic.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Password Reset PHP</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<form class="login-form" action="login.php" method="post">
		<h2 class="form-title">Login</h2>
		<!-- form validation messages -->
		<?php include('messages.php'); ?>
		<div class="form-group">
			<label>Username or Email</label>
			<input type="text" value="<?php echo $user_id; ?>" name="user_id">
		</div>
		<div class="form-group">
			<label>Password</label>
			<input type="password" name="password">
		</div>
		<div class="form-group">
			<button type="submit" name="login_user" class="login-btn">Login</button>
		</div>
		<p><a href="enter_email.php">Forgot your password?</a></p>
	</form>
</body>
</html>

enter_email.php:

<?php include('app_logic.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Password Reset PHP</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<form class="login-form" action="enter_email.php" method="post">
		<h2 class="form-title">Reset password</h2>
		<!-- form validation messages -->
		<?php include('messages.php'); ?>
		<div class="form-group">
			<label>Your email address</label>
			<input type="email" name="email">
		</div>
		<div class="form-group">
			<button type="submit" name="reset-password" class="login-btn">Submit</button>
		</div>
	</form>
</body>
</html>

new_pass.php:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Password Reset PHP</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<form class="login-form" action="new_password.php" method="post">
		<h2 class="form-title">New password</h2>
		<!-- form validation messages -->
		<?php include('messages.php'); ?>
		<div class="form-group">
			<label>New password</label>
			<input type="password" name="new_pass">
		</div>
		<div class="form-group">
			<label>Confirm new password</label>
			<input type="password" name="new_pass_c">
		</div>
		<div class="form-group">
			<button type="submit" name="new_password" class="login-btn">Submit</button>
		</div>
	</form>
</body>
</html>

Di setiap file ini, Anda melihat bahwa kami menyertakan tiga file yang belum kami buat, yaitu app_logic.php , messages.php,file, dan main.css. Yang pertama menangani semua logika aplikasi kita seperti menanyakan database, mengirim email ke pengguna dan banyak lagi; yang kedua menampilkan pesan umpan balik kepada pengguna seperti ketika mereka memasukkan email yang salah, yang ketiga adalah gaya aplikasi.

Buat file-file ini di folder pemulihan kata sandi. Di file main.css, tambahkan kode gaya ini:

main.css:

body {
	background: #3b5998;
	font-size: 1.1em;
	font-family: sans-serif;
}
a {
	text-decoration: none;
}
form {
	width: 25%;
	margin: 70px auto;
	background: white;
	padding: 10px;
	border-radius: 3px;
}
h2.form-title {
	text-align: center;
}
input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
}
form .form-group {
	margin: 10px auto;
}
form button {
	width: 100%;
	border: none;
	color: white;
	background: #3b5998;
	padding: 15px;
	border-radius: 5px;
}
.msg {
	margin: 5px auto;
	border-radius: 5px;
	border: 1px solid red;
	background: pink;
	text-align: left;
	color: brown;
	padding: 10px;
}

app_logic.php:

<?php 

session_start();
$errors = [];
$user_id = "";
// connect to database
$db = mysqli_connect('localhost', 'root', '', 'password-reset-php');

// LOG USER IN
if (isset($_POST['login_user'])) {
  // Get username and password from login form
  $user_id = mysqli_real_escape_string($db, $_POST['user_id']);
  $password = mysqli_real_escape_string($db, $_POST['password']);
  // validate form
  if (empty($user_id)) array_push($errors, "Username or Email is required");
  if (empty($password)) array_push($errors, "Password is required");

  // if no error in form, log user in
  if (count($errors) == 0) {
    $password = md5($password);
    $sql = "SELECT * FROM users WHERE username='$user_id' OR email='$user_id' AND password='$password'";
    $results = mysqli_query($db, $sql);

    if (mysqli_num_rows($results) == 1) {
      $_SESSION['username'] = $user_id;
      $_SESSION['success'] = "You are now logged in";
      header('location: index.php');
    }else {
      array_push($errors, "Wrong credentials");
    }
  }
}

/*
  Accept email of user whose password is to be reset
  Send email to user to reset their password
*/
if (isset($_POST['reset-password'])) {
  $email = mysqli_real_escape_string($db, $_POST['email']);
  // ensure that the user exists on our system
  $query = "SELECT email FROM users WHERE email='$email'";
  $results = mysqli_query($db, $query);

  if (empty($email)) {
    array_push($errors, "Your email is required");
  }else if(mysqli_num_rows($results) <= 0) {
    array_push($errors, "Sorry, no user exists on our system with that email");
  }
  // generate a unique random token of length 100
  $token = bin2hex(random_bytes(50));

  if (count($errors) == 0) {
    // store token in the password-reset database table against the user's email
    $sql = "INSERT INTO password_reset(email, token) VALUES ('$email', '$token')";
    $results = mysqli_query($db, $sql);

    // Send email to user with the token in a link they can click on
    $to = $email;
    $subject = "Reset your password on examplesite.com";
    $msg = "Hi there, click on this <a href=\"new_password.php?token=" . $token . "\">link</a> to reset your password on our site";
    $msg = wordwrap($msg,70);
    $headers = "From: [email protected]";
    mail($to, $subject, $msg, $headers);
    header('location: pending.php?email=' . $email);
  }
}

// ENTER A NEW PASSWORD
if (isset($_POST['new_password'])) {
  $new_pass = mysqli_real_escape_string($db, $_POST['new_pass']);
  $new_pass_c = mysqli_real_escape_string($db, $_POST['new_pass_c']);

  // Grab to token that came from the email link
  $token = $_SESSION['token'];
  if (empty($new_pass) || empty($new_pass_c)) array_push($errors, "Password is required");
  if ($new_pass !== $new_pass_c) array_push($errors, "Password do not match");
  if (count($errors) == 0) {
    // select email address of user from the password_reset table 
    $sql = "SELECT email FROM password_reset WHERE token='$token' LIMIT 1";
    $results = mysqli_query($db, $sql);
    $email = mysqli_fetch_assoc($results)['email'];

    if ($email) {
      $new_pass = md5($new_pass);
      $sql = "UPDATE users SET password='$new_pass' WHERE email='$email'";
      $results = mysqli_query($db, $sql);
      header('location: index.php');
    }
  }
}
?>

Di sini Anda melihat tiga blok pernyataan if. Pernyataan ini menangani tiga tindakan yaitu login pengguna, menerima email setel ulang, dan menerima sandi baru. Di blok kedua, setelah menerima alamat email pengguna, pengguna diarahkan ke halaman pending.php. Halaman ini hanya menampilkan pesan yang memberi tahu pengguna bahwa email telah dikirim ke alamat email mereka yang dapat mereka gunakan untuk mengatur ulang kata sandi mereka.

Buat pending.php di folder root proyek kami dan tambahkan kode ini di dalamnya:

tertunda.php:

<?php include('app_logic.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Password Reset PHP</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>

	<form class="login-form" action="login.php" method="post" style="text-align: center;">
		<p>
			We sent an email to  <b><?php echo $_GET['email'] ?></b> to help you recover your account. 
		</p>
	    <p>Please login into your email account and click on the link we sent to reset your password</p>
	</form>
		
</body>
</html>

pesan.php adalah file yang menyimpan potongan kode untuk menampilkan pesan kesalahan pada formulir. Buka dan rekatkan kode ini di dalamnya:

pesan.php:

<?php  if (count($errors) > 0) : ?>
  <div class="msg">
  	<?php foreach ($errors as $error) : ?>
  	  <span><?php echo $error ?></span>
  	<?php endforeach ?>
  </div>
<?php  endif ?>

Sekarang buka proyek ini di browser Anda di http://localhost/password-recovery/login.php dan mainkan dengannya.

Catatan: Kami menggunakan fungsi mail() PHP untuk mengirim email ke pengguna. Fungsi ini tidak dapat mengirim email dari localhost. Itu hanya dapat dilakukan dengan menggunakan server yang di-host di internet. Namun kami dapat menggunakan aplikasi email uji untuk mensimulasikan pengiriman email jika Anda ingin memiliki demo di sistem lokal Anda.

Kesimpulan

Terima kasih telah mengikuti tutorial ini sampai akhir. Saya harap penjelasannya cukup jelas dan Anda mempelajari sesuatu yang dapat membantu Anda dalam pengembangan web Anda. Jika Anda memiliki masalah atau masalah, jangan lupa untuk menyampaikannya di komentar di bawah dan saya akan menghubungi Anda.

Semoga harimu menyenangkan!