.jpg)
ابدء
قم بتنزيل وتثبيت XAMPP كخادم افتراضي في جهازك المحلي. أيضًا ، قم بتنزيل Bootstrap و jQuery لتصميم التطبيق الذي سننشئه.
https://apachefriends.org لـ XAMPP
https://getbootstrap.com لإطار عمل Bootstrap
بعد تحميل تثبيت الخادم والمكتبة. افتح لوحة تحكم XAMPP وابدأ خوادم Apache و MySQL.
إنشاء قاعدة البيانات
في متصفحك ، تصفح PHPMyAdmin الخاص بـ XAMPP [http: // localhost / phpmyadmin] وأنشئ قاعدة بيانات جديدة لتسمية login_otp_db. بعد ذلك ، انتقل إلى الصفحة في علامة تبويب SQL وانسخ / الصق البرنامج النصي mysql أدناه في حقل النص المتوفر في الصفحة. ثم انقر فوق الزر "GO".
CREATE TABLE `users` (
`id` int(30) NOT NULL,
`firstname` text NOT NULL,
`middlename` text DEFAULT NULL,
`lastname` text NOT NULL,
`email` text NOT NULL,
`password` text NOT NULL,
`otp` varchar(6) DEFAULT NULL,
`otp_expiration` datetime DEFAULT NULL,
`date_created` datetime NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
إنشاء فئة PHP الرئيسية
سيستخدم التطبيق الذي نقوم بإنشائه نهج OOP في كتابة البرامج النصية الخلفية للتطبيق. يتضمن الفصل تكوين قاعدة البيانات ووظيفة إرسال البريد. احفظ ملف التعليمات البرمجية أدناه باسم MainClass.php.
<?php
if(session_status() === PHP_SESSION_NONE)
session_start();
Class MainClass{
protected $db;
function __construct(){
$this->db = new mysqli('localhost','root','','login_otp_db');
if(!$this->db){
die("Database Connection Failed. Error: ".$this->db->error);
}
}
function db_connect(){
return $this->db;
}
public function register(){
foreach($_POST as $k => $v){
$$k = $this->db->real_escape_string($v);
}
$password = password_hash($password, PASSWORD_DEFAULT);
$check = $this->db->query("SELECT * FROM `users` where `email`= '$email}' ")->num_rows;
if($check > 0){
$resp['status'] = 'failed';
$_SESSION['flashdata']['type']='danger';
$_SESSION['flashdata']['msg'] = ' Email already exists.';
}else{
$sql = "INSERT INTO `users` (firstname,middlename,lastname,email,`password`) VALUES ('$firstname','$middlename','$lastname','$email','$password')";
$save = $this->db->query($sql);
if($save){
$resp['status'] = 'success';
}else{
$resp['status'] = 'failed';
$resp['err'] = $this->db->error;
$_SESSION['flashdata']['type']='danger';
$_SESSION['flashdata']['msg'] = ' An error occurred.';
}
}
return json_encode($resp);
}
public function login(){
extract($_POST);
$sql = "SELECT * FROM `users` where `email` = ? ";
$stmt = $this->db->prepare($sql);
$stmt->bind_param('s',$email);
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows > 0){
$data = $result->fetch_array();
$pass_is_right = password_verify($password,$data['password']);
$has_code = false;
if($pass_is_right && (is_null($data['otp']) || (!is_null($data['otp']) && !is_null($data['otp_expiration']) && strtotime($data['otp_expiration']) < time()) ) ){
$otp = sprintf("%'.06d",mt_rand(0,999999));
$expiration = date("Y-m-d H:i" ,strtotime(date('Y-m-d H:i')." +1 mins"));
$update_sql = "UPDATE `users` set otp_expiration = '{$expiration}', otp = '{$otp}' where id='{$data['id']}' ";
$update_otp = $this->db->query($update_sql);
if($update_otp){
$has_code = true;
$resp['status'] = 'success';
$_SESSION['otp_verify_user_id'] = $data['id'];
$this->send_mail($data['email'],$otp);
}else{
$resp['status'] = 'failed';
$_SESSION['flashdata']['type'] = 'danger';
$_SESSION['flashdata']['msg'] = ' An error occurred while loggin in. Please try again later.';
}
}else if(!$pass_is_right){
$resp['status'] = 'failed';
$_SESSION['flashdata']['type'] = 'danger';
$_SESSION['flashdata']['msg'] = ' Incorrect Password';
}
}else{
$resp['status'] = 'failed';
$_SESSION['flashdata']['type'] = 'danger';
$_SESSION['flashdata']['msg'] = ' Email is not registered.';
}
return json_encode($resp);
}
public function get_user_data($id){
extract($_POST);
$sql = "SELECT * FROM `users` where `id` = ? ";
$stmt = $this->db->prepare($sql);
$stmt->bind_param('i',$id);
$stmt->execute();
$result = $stmt->get_result();
$dat=[];
if($result->num_rows > 0){
$resp['status'] = 'success';
foreach($result->fetch_array() as $k => $v){
if(!is_numeric($k)){
$data[$k] = $v;
}
}
$resp['data'] = $data;
}else{
$resp['status'] = 'false';
}
return json_encode($resp);
}
public function resend_otp($id){
$otp = sprintf("%'.06d",mt_rand(0,999999));
$expiration = date("Y-m-d H:i" ,strtotime(date('Y-m-d H:i')." +1 mins"));
$update_sql = "UPDATE `users` set otp_expiration = '{$expiration}', otp = '{$otp}' where id = '{$id}' ";
$update_otp = $this->db->query($update_sql);
if($update_otp){
$resp['status'] = 'success';
$email = $this->db->query("SELECT email FROM `users` where id = '{$id}'")->fetch_array()[0];
$this->send_mail($email,$otp);
}else{
$resp['status'] = 'failed';
$resp['error'] = $this->db->error;
}
return json_encode($resp);
}
public function otp_verify(){
extract($_POST);
$sql = "SELECT * FROM `users` where id = ? and otp = ?";
$stmt = $this->db->prepare($sql);
$stmt->bind_param('is',$id,$otp);
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows > 0){
$resp['status'] = 'success';
$this->db->query("UPDATE `users` set otp = NULL, otp_expiration = NULL where id = '{$id}'");
$_SESSION['user_login'] = 1;
foreach($result->fetch_array() as $k => $v){
if(!is_numeric($k))
$_SESSION[$k] = $v;
}
}else{
$resp['status'] = 'failed';
$_SESSION['flashdata']['type'] = 'danger';
$_SESSION['flashdata']['msg'] = ' Incorrect OTP.';
}
return json_encode($resp);
}
function send_mail($to="",$pin=""){
if(!empty($to)){
try{
$email = 'alaator52@gmail.com';
$headers = 'From:' .$email . '\r\n'. 'Reply-To:' .
$email. "\r\n" .
'X-Mailer: PHP/' . phpversion()."\r\n";
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// the message
$msg = "
<html>
<body>
<h2>You are Attempting to Login in XYZ Simple PHP Web Application</h2>
<p>Here is yout OTP (One-Time PIN) to verify your Identity.</p>
<h3><b>".$pin."</b></h3>
</body>
</html>
";
// send email
mail($to,"OTP",$msg,$headers);
// die("ERROR<br>".$headers."<br>".$msg);
}catch(Exception $e){
$_SESSION['flashdata']['type']='danger';
$_SESSION['flashdata']['msg'] = ' An error occurred while sending the OTP. Error: '.$e->getMessage();
}
}
}
function __destruct(){
$this->db->close();
}
}
$class = new MainClass();
$conn= $class->db_connect();
إنشاء البرنامج النصي للتحقق من مصادقة النظام
الكود أدناه هو PHP Script الذي يتحقق مما إذا كان المستخدم مسموحًا له بالوصول إلى صفحة التطبيق. سيؤدي هذا إلى جعل المستخدم يقوم بإعادة التوجيه إلى صفحة تسجيل الدخول إذا لم يقم بتسجيل الدخول بعد. احفظ الملف باسم auth.php.
<?php
if(session_status() === PHP_SESSION_NONE)
session_start();
$link = $_SERVER['PHP_SELF'];
if(!strpos($link,'login.php') && !strpos($link,'login_verification.php') && !strpos($link,'registration.php') && !isset($_SESSION['user_login'])){
echo "<script>location.replace('./login.php');</script>";
}
if(strpos($link,'login_verification.php') && !isset($_SESSION['otp_verify_user_id'])){
echo "<script>location.replace('./login.php');</script>";
}
if(strpos($link,'login.php') > -1 && isset($_SESSION['user_login'])){
echo "<script>location.replace('./');</script>";
}
إنشاء الواجهات
بعد ذلك ، قم بإنشاء صفحة تسجيل الدخول للتطبيق. انسخ / الصق الكود أدناه وقم بتكوينه بالطريقة التي تريد أن تظهر بها واجهة المستخدم. احفظ الملف باسم login.php.
<?php
require_once('auth.php');
require_once('MainClass.php');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$login = json_decode($class->login());
if($login->status == 'success'){
echo "<script>location.replace('./login_verification.php');</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login with OTP</title>
<link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./Font-Awesome-master/js/all.min.js"></script>
<style>
html,body{
height:100%;
width:100%;
}
main{
height:calc(100%);
width:calc(100%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
</style>
</head>
<body class="bg-dark bg-gradient">
<main>
<div class="col-lg-7 col-md-9 col-sm-12 col-xs-12 mb-4">
<h1 class="text-light text-center">XYZ Simple PHP Web Application</h1>
</div>
<div class="col-lg-3 col-md-8 col-sm-12 col-xs-12">
<div class="card shadow rounded-0">
<div class="card-header py-1">
<h4 class="card-title text-center">LOGIN</h4>
</div>
<div class="card-body py-4">
<div class="container-fluid">
<form action="./login.php" method="POST">
<?php
if(isset($_SESSION['flashdata'])):
?>
<div class="dynamic_alert alert alert-<?php echo $_SESSION['flashdata']['type'] ?> my-2 rounded-0">
<div class="d-flex align-items-center">
<div class="col-11"><?php echo $_SESSION['flashdata']['msg'] ?></div>
<div class="col-1 text-end">
<div class="float-end"><a href="javascript:void(0)" class="text-dark text-decoration-none" onclick="$(this).closest('.dynamic_alert').hide('slow').remove()">x</a>
</div>
</div>
</div>
</div>
<?php unset($_SESSION['flashdata']) ?>
<?php endif; ?>
<div class="form-group">
<label for="email" class="label-control">Email</label>
<input type="email" name="email" id="email" class="form-control rounded-0" value="<?= isset($_POST['email']) ? $_POST['email'] : '' ?>" autofocus required>
</div>
<div class="form-group">
<label for="password" class="label-control">Password</label>
<input type="password" name="password" id="password" class="form-control rounded-0" value="<?= isset($_POST['password']) ? $_POST['password'] : '' ?>" required>
</div>
<div class="clear-fix mb-4"></div>
<div class="form-group text-end">
<button class="btn btn-primary bg-gradient rounded-0">LOGIN</button>
</div>
<div class="form-group text-cneter">
<a href="registration.php">Create a New Account</a>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
بعد ذلك ، قم بإنشاء صفحة التسجيل للتطبيق. انسخ / الصق الكود أدناه وقم بتكوينه بالطريقة التي تريد أن تظهر بها واجهة المستخدم. احفظ الملف باسم registration.php.
<?php
require_once('auth.php');
require_once('MainClass.php');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$register = json_decode($class->register());
if($register->status == 'success'){
$_SESSION['flashdata']['type']='success';
$_SESSION['flashdata']['msg'] = ' Account has been registered successfully.';
echo "<script>location.href = './login_verification.php';</script>";
exit;
}else{
echo "<script>console.error(".json_encode($register).");</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login with OTP</title>
<link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./Font-Awesome-master/js/all.min.js"></script>
<style>
html,body{
height:100%;
width:100%;
}
main{
height:calc(100%);
width:calc(100%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
</style>
</head>
<body class="bg-dark bg-gradient">
<main>
<div class="col-lg-7 col-md-9 col-sm-12 col-xs-12 mb-4">
<h1 class="text-light text-center">XYZ Simple PHP Web Application</h1>
</div>
<div class="col-lg-3 col-md-8 col-sm-12 col-xs-12">
<div class="card shadow rounded-0">
<div class="card-header py-1">
<h4 class="card-title text-center">Create an Account</h4>
</div>
<div class="card-body py-4">
<div class="container-fluid">
<form action="./registration.php" method="POST">
<?php
if(isset($_SESSION['flashdata'])):
?>
<div class="dynamic_alert alert alert-<?php echo $_SESSION['flashdata']['type'] ?> my-2 rounded-0">
<div class="d-flex align-items-center">
<div class="col-11"><?php echo $_SESSION['flashdata']['msg'] ?></div>
<div class="col-1 text-end">
<div class="float-end"><a href="javascript:void(0)" class="text-dark text-decoration-none" onclick="$(this).closest('.dynamic_alert').hide('slow').remove()">x</a>
</div>
</div>
</div>
</div>
<?php unset($_SESSION['flashdata']) ?>
<?php endif; ?>
<div class="form-group">
<label for="firstname" class="label-control">First Name</label>
<input type="text" name="firstname" id="firstname" class="form-control rounded-0" value="<?= isset($_POST['firstname']) ? $_POST['firstname'] : '' ?>" autofocus required>
</div>
<div class="form-group">
<label for="middlename" class="label-control">Middle Name</label>
<input type="text" name="middlename" id="middlename" class="form-control rounded-0" value="<?= isset($_POST['middlename']) ? $_POST['middlename'] : '' ?>" required>
</div>
<div class="form-group">
<label for="lastname" class="label-control">Last Name</label>
<input type="text" name="lastname" id="lastname" class="form-control rounded-0" value="<?= isset($_POST['lastname']) ? $_POST['lastname'] : '' ?>" required>
</div>
<div class="form-group">
<label for="email" class="label-control">Email</label>
<input type="email" name="email" id="email" class="form-control rounded-0" value="<?= isset($_POST['email']) ? $_POST['email'] : '' ?>" required>
</div>
<div class="form-group">
<label for="password" class="label-control">Password</label>
<input type="password" name="password" id="password" class="form-control rounded-0" value="<?= isset($_POST['password']) ? $_POST['password'] : '' ?>" required>
</div>
<div class="clear-fix mb-4"></div>
<div class="form-group text-end">
<button class="btn btn-primary bg-gradient rounded-0">Create Account</button>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
بعد ذلك ، قم بإنشاء صفحة التحقق الخاصة بالتطبيق. ستكون هذه الصفحة هي الصفحة التي سيتم فيها إعادة توجيه المستخدم بعد تسجيل الدخول بنجاح إلى بيانات اعتماد المستخدم المسجلة الصحيحة. هذا هو المكان الذي سيقدم فيه المستخدم OTP لتأكيد هويته / هويتها. انسخ / الصق الكود أدناه وقم بتكوينه بالطريقة التي تريد أن تظهر بها واجهة المستخدم. احفظ الملف باسم login_verification.php.
<?php
require_once('auth.php');
require_once('MainClass.php');
$user_data = json_decode($class->get_user_data($_SESSION['otp_verify_user_id']));
if($user_data->status){
foreach($user_data->data as $k => $v){
$$k = $v;
}
}
if(isset($_GET['resend']) && $_GET['resend'] == 'true'){
$resend = json_decode($class->resend_otp($_SESSION['otp_verify_user_id']));
if($resend->status == 'success'){
echo "<script>location.replace('./login_verification.php')</script>";
}else{
$_SESSION['flashdata']['type']='danger';
$_SESSION['flashdata']['msg']=' Resending OTP has failed.';
echo "<script>console.error(".$resend.")</script>";
}
}
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$verify = json_decode($class->otp_verify());
if($verify->status == 'success'){
echo "<script>location.replace('./');</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login with OTP</title>
<link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./Font-Awesome-master/js/all.min.js"></script>
<style>
html,body{
height:100%;
width:100%;
}
main{
height:calc(100%);
width:calc(100%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
a.disabled {
pointer-events: none;
cursor: default;
}
</style>
</head>
<body class="bg-dark bg-gradient">
<main>
<div class="col-lg-7 col-md-9 col-sm-12 col-xs-12 mb-4">
<h1 class="text-light text-center">XYZ Simple PHP Web Application</h1>
</div>
<div class="col-lg-3 col-md-8 col-sm-12 col-xs-12">
<div class="card shadow rounded-0">
<div class="card-header py-1">
<h4 class="card-title text-center">LOGIN - Verification</h4>
</div>
<div class="card-body py-4">
<div class="container-fluid">
<form action="./login_verification.php" method="POST">
<input type="hidden" name="id" value="<?= isset($id) ? $id : '' ?>">
<?php
if(isset($_SESSION['flashdata'])):
?>
<div class="dynamic_alert alert alert-<?php echo $_SESSION['flashdata']['type'] ?> my-2 rounded-0">
<div class="d-flex align-items-center">
<div class="col-11"><?php echo $_SESSION['flashdata']['msg'] ?></div>
<div class="col-1 text-end">
<div class="float-end"><a href="javascript:void(0)" class="text-dark text-decoration-none" onclick="$(this).closest('.dynamic_alert').hide('slow').remove()">x</a>
</div>
</div>
</div>
</div>
<?php unset($_SESSION['flashdata']) ?>
<?php endif; ?>
<div class="form-group">
<p class="">We have sent an OPT in your Email [<?= isset($email) ? $email : '' ?>].</p>
</div>
<div class="form-group">
<label for="otp" class="label-control">Please Enter the OTP</label>
<input type="otp" name="otp" id="otp" class="form-control rounded-0" value="" maxlength="6" pattern="{0-9}+" autofocus required>
</div>
<div class="clear-fix mb-4"></div>
<div class="form-group text-end">
<a class="btn btn-secondary bg-gradient rounded-0 <?= time() < strtotime($otp_expiration) ? 'disabled' : '' ?>" data-stat="<?= time() < strtotime($otp_expiration) ? 'countdown' : '' ?>" href="./login_verification.php?resend=true" id="resend"><?= time() < strtotime($otp_expiration) ? 'Resend in '.(strtotime($otp_expiration) - time()).'s' : 'Resend OTP' ?></a>
<button class="btn btn-primary bg-gradient rounded-0">Confirm</button>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</body>
<script>
$(function(){
var is_countdown_resend = $('#resend').attr('data-stat') == 'countdown';
if(is_countdown_resend){
var sec = '<?= time() < strtotime($otp_expiration) ? (strtotime($otp_expiration) - time()) : 0 ?>';
var countdown = setInterval(() => {
if(sec > 0){
sec--;
$('#resend').text("Resend in "+(sec)+'s')
}else{
$('#resend').attr('data-stat','')
.removeClass('disabled').text('Resend OTP')
clearInterval(countdown)
}
}, 1000);
}
})
</script>
</html>
بعد ذلك ، قم بإنشاء صفحة فهرس للتطبيق حيث سيتم إعادة توجيه المستخدم بعد المصادقة الثنائية الناجحة. انسخ / الصق الكود أدناه وقم بتكوينه بالطريقة التي تريد أن تظهر بها واجهة المستخدم. احفظ الملف كملف index.php.
<?php
require_once('auth.php');
require_once('MainClass.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home | Login with OTP</title>
<link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./Font-Awesome-master/js/all.min.js"></script>
<style>
html,body{
height:100%;
width:100%;
}
main{
height:100%;
display:flex;
flex-flow:column;
}
</style>
</head>
<body>
<main>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
<div class="container">
<a class="navbar-brand" href="#">
XYZ Simple PHP Web Application
</a>
</div>
</nav>
<div class="container py-3" id="page-container">
<div class="row justify-content-center">
<div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
<div class="card shadow rounded-0">
<div class="card-body py-4">
<h1>Welcome <?= ucwords($_SESSION['firstname'].' '.$_SESSION['middlename'].' '.$_SESSION['lastname']) ?></h1>
<hr>
<p>You are logged in using <?= $_SESSION['email'] ?></p>
<div class="clear-fix mb-4"></div>
<div class="text-end">
<a href="./logout.php" class="btn btn btn-secondary bg-gradient rounded-0">Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>