Normally after user registration, we have send email at user register email address for confirm his or her email address. Once User has click on email confirmation link then after that user registration process has been completed with email verification.
But in this post, we have use OTP (One Time Password) method for verify registered user email address. Email verification is a very required process for check registered user has enter right information at the time of registration and it is also useful to prevent spam registration at our web application. For this reason verify user identity, we have to verify his or her email address. In this OTP method, If User has provide us genuine email address then on that email address our system will send one email confirmation email with OTP number. User has to just copy that OTP number and enter in email verification page which will be load after submitting registration form data. In that web page, User has to enter OTP number and submit form. After submitting form user email address will be verified.
In most of the dynamic website, there is user registration form. By fill up user registration form, user can register into web page. So in that registration form, If you have use OTP code for user email address verification, then it is the secure method for verify user email address. In this method, OTP Code will be generated at once user has submitted registration form details, and that OTP code will be received at registered user email address. So, when user has enters the OTP code then PHP web application will verify user email address via that OTP code.
In this tutorial, we will learn User registration process with email verification by using OTP method and here we will send OTP code using email. By using this OTP Code method user email address will be validated once user has enter OTP number which he or she received at their email address. Below you can find the source code of PHP registration system with email verification process using OTP method. In source code you can find how registration form has been made, then after we have first validated user registration form data by using PHP function. After form data verification, we have write PHP script to enter only unique user email data into Mysql database and then after send email with OTP number to registered user email address for email confirmation. After this you can find the source code of email verification by using OTP method.
How to Implement OTP based Login in PHP
In this PHP Registration with email verification using OTP method tutorial, here we have add one more feature like Login using OTP. In this section you can get the solution of Login into system using OTP. We all know OTP means one time password and this OTP number will be generated randomly by using PHP function and that randomly generated OTP number will be stored in Mysql database. So when you have login into system then that OTP number will be expired.
Now we have describe you, how to Login using OTP works. So, when you have login into system, then first you have to enter your login credentials like email address and password details. Then If you have enter right login information then at backend it will generated OTP number and that OTP number will be send to your registered email address. So you have to go to your email address inbox and copy that OTP number and enter into system. Once you have enter valid OTP number then system will validate and you can login into system and that OTP number has been expired. So, in this tutorial, we will OTP based Login system in PHP and below you can find the source code of it.
Source Code
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `login_data`
--
CREATE TABLE `login_data` (
`login_id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`login_otp` int(6) NOT NULL,
`last_activity` datetime NOT NULL,
`login_datetime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- --------------------------------------------------------
--
-- Table structure for table `register_user`
--
CREATE TABLE `register_user` (
`register_user_id` int(11) NOT NULL,
`user_name` varchar(250) NOT NULL,
`user_email` varchar(250) NOT NULL,
`user_password` varchar(250) NOT NULL,
`user_activation_code` varchar(250) NOT NULL,
`user_email_status` enum('not verified','verified') NOT NULL,
`user_otp` int(11) NOT NULL,
`user_datetime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `login_data`
--
ALTER TABLE `login_data`
ADD PRIMARY KEY (`login_id`);
--
-- Indexes for table `register_user`
--
ALTER TABLE `register_user`
ADD PRIMARY KEY (`register_user_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `login_data`
--
ALTER TABLE `login_data`
MODIFY `login_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
--
-- AUTO_INCREMENT for table `register_user`
--
ALTER TABLE `register_user`
MODIFY `register_user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;
index.php
<?php
//index.php
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
$message = '';
$error_user_name = '';
$error_user_email = '';
$error_user_password = '';
$user_name = '';
$user_email = '';
$user_password = '';
if(isset($_POST["register"]))
{
if(empty($_POST["user_name"]))
{
$error_user_name = "<label class='text-danger'>Enter Name</label>";
}
else
{
$user_name = trim($_POST["user_name"]);
$user_name = htmlentities($user_name);
}
if(empty($_POST["user_email"]))
{
$error_user_email = '<label class="text-danger">Enter Email Address</label>';
}
else
{
$user_email = trim($_POST["user_email"]);
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL))
{
$error_user_email = '<label class="text-danger">Enter Valid Email Address</label>';
}
}
if(empty($_POST["user_password"]))
{
$error_user_password = '<label class="text-danger">Enter Password</label>';
}
else
{
$user_password = trim($_POST["user_password"]);
$user_password = password_hash($user_password, PASSWORD_DEFAULT);
}
if($error_user_name == '' && $error_user_email == '' && $error_user_password == '')
{
$user_activation_code = md5(rand());
$user_otp = rand(100000, 999999);
$data = array(
':user_name' => $user_name,
':user_email' => $user_email,
':user_password' => $user_password,
':user_activation_code' => $user_activation_code,
':user_email_status'=> 'not verified',
':user_otp' => $user_otp
);
$query = "
INSERT INTO register_user
(user_name, user_email, user_password, user_activation_code, user_email_status, user_otp)
SELECT * FROM (SELECT :user_name, :user_email, :user_password, :user_activation_code, :user_email_status, :user_otp) AS tmp
WHERE NOT EXISTS (
SELECT user_email FROM register_user WHERE user_email = :user_email
) LIMIT 1
";
$statement = $connect->prepare($query);
$statement->execute($data);
if($connect->lastInsertId() == 0)
{
$message = '<label class="text-danger">Email Already Register</label>';
}
else
{
require 'class/class.phpmailer.php';
$mail = new PHPMailer;
$mail->IsSMTP();
$mail->Host = 'smtpout.secureserver.net';
$mail->Port = '80';
$mail->SMTPAuth = true;
$mail->Username = 'tutorial@webslesson.info'; //This is not exists, you have to used your own email address.
$mail->Password = 'password';
$mail->SMTPSecure = '';
$mail->From = 'tutorial@webslesson.info';
$mail->FromName = 'Webslesson';
$mail->AddAddress($user_email);
$mail->WordWrap = 50;
$mail->IsHTML(true);
$mail->Subject = 'Verification code for Verify Your Email Address';
$message_body = '
<p>For verify your email address, enter this verification code when prompted: <b>'.$user_otp.'</b>.</p>
<p>Sincerely,</p>
<p>Webslesson.info</p>
';
$mail->Body = $message_body;
if($mail->Send())
{
echo '<script>alert("Please Check Your Email for Verification Code")</script>';
header('location:email_verify.php?code='.$user_activation_code);
}
else
{
$message = $mail->ErrorInfo;
}
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Registration with Email Verification using OTP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<br />
<div class="container">
<h3 align="center">PHP Registration with Email Verification using OTP</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Registration</h3>
</div>
<div class="panel-body">
<?php echo $message; ?>
<form method="post">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="user_name" class="form-control" />
<?php echo $error_user_name; ?>
</div>
<div class="form-group">
<label>Enter Your Email</label>
<input type="text" name="user_email" class="form-control" />
<?php echo $error_user_email; ?>
</div>
<div class="form-group">
<label>Enter Your Password</label>
<input type="password" name="user_password" class="form-control" />
<?php echo $error_user_password; ?>
</div>
<div class="form-group">
<input type="submit" name="register" class="btn btn-success" value="Click to Register" />
</div>
</form>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
email_verify.php
<?php
//email_verify.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$error_user_otp = '';
$user_activation_code = '';
$message = '';
if(isset($_GET["code"]))
{
$user_activation_code = $_GET["code"];
if(isset($_POST["submit"]))
{
if(empty($_POST["user_otp"]))
{
$error_user_otp = 'Enter OTP Number';
}
else
{
$query = "
SELECT * FROM register_user
WHERE user_activation_code = '".$user_activation_code."'
AND user_otp = '".trim($_POST["user_otp"])."'
";
$statement = $connect->prepare($query);
$statement->execute();
$total_row = $statement->rowCount();
if($total_row > 0)
{
$query = "
UPDATE register_user
SET user_email_status = 'verified'
WHERE user_activation_code = '".$user_activation_code."'
";
$statement = $connect->prepare($query);
if($statement->execute())
{
header('location:login.php?register=success');
}
}
else
{
$message = '<label class="text-danger">Invalid OTP Number</label>';
}
}
}
}
else
{
$message = '<label class="text-danger">Invalid Url</label>';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Registration with Email Verification using OTP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<br />
<div class="container">
<h3 align="center">PHP Registration with Email Verification using OTP</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Enter OTP Number</h3>
</div>
<div class="panel-body">
<?php echo $message; ?>
<form method="POST">
<div class="form-group">
<label>Enter OTP Number</label>
<input type="text" name="user_otp" class="form-control" />
<?php echo $error_user_otp; ?>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success" value="Submit" />
</div>
</form>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
login.php
<?php
session_start();
if(isset($_SESSION["user_id"]))
{
header("location:home.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Login with OTP Authentication</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<br />
<div class="container">
<h3 align="center">PHP Login with OTP Authentication</h3>
<br />
<?php
if(isset($_GET["register"]))
{
if($_GET["register"] == 'success')
{
echo '
<h1 class="text-success">Email Successfully verified, Registration Process Completed...</h1>
';
}
}
?>
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Login</h3>
</div>
<div class="panel-body">
<form method="POST" id="login_form">
<div class="form-group" id="email_area">
<label>Enter Email Address</label>
<input type="text" name="user_email" id="user_email" class="form-control" />
<span id="user_email_error" class="text-danger"></span>
</div>
<div class="form-group" id="password_area" style="display:none;">
<label>Enter password</label>
<input type="password" name="user_password" id="user_password" class="form-control" />
<span id="user_password_error" class="text-danger"></span>
</div>
<div class="form-group" id="otp_area" style="display:none;">
<label>Enter OTP Number</label>
<input type="text" name="user_otp" id="user_otp" class="form-control" />
<span id="user_otp_error" class="text-danger"></span>
</div>
<div class="form-group" align="right">
<input type="hidden" name="action" id="action" value="email" />
<input type="submit" name="next" id="next" class="btn btn-primary" value="Next" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
<script>
$(document).ready(function(){
$('#login_form').on('submit', function(event){
event.preventDefault();
var action = $('#action').val();
$.ajax({
url:"login_verify.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function()
{
$('#next').attr('disabled', 'disabled');
},
success:function(data)
{
$('#next').attr('disabled', false);
if(action == 'email')
{
if(data.error != '')
{
$('#user_email_error').text(data.error);
}
else
{
$('#user_email_error').text('');
$('#email_area').css('display', 'none');
$('#password_area').css('display', 'block');
}
}
else if(action == 'password')
{
if(data.error != '')
{
$('#user_password_error').text(data.error);
}
else
{
$('#user_password_error').text('');
$('#password_area').css('display', 'none');
$('#otp_area').css('display', 'block');
}
}
else
{
if(data.error != '')
{
$('#user_otp_error').text(data.error);
}
else
{
window.location.replace("home.php");
}
}
$('#action').val(data.next_action);
}
})
});
});
</script>
login_verify.php
<?php
//login_verify.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
session_start();
$error = '';
$next_action = '';
sleep(2);
if(isset($_POST["action"]))
{
if($_POST["action"] == 'email')
{
if($_POST["user_email"] != '')
{
$data = array(
':user_email' => $_POST["user_email"]
);
$query = "
SELECT * FROM register_user
WHERE user_email = :user_email
";
$statement = $connect->prepare($query);
$statement->execute($data);
$total_row = $statement->rowCount();
if($total_row == 0)
{
$error = 'Email Address not found';
$next_action = 'email';
}
else
{
$result = $statement->fetchAll();
foreach($result as $row)
{
$_SESSION["register_user_id"] = $row["register_user_id"];
$_SESSION["user_name"] = $row["user_name"];
$_SESSION['user_email'] = $row["user_email"];
$_SESSION["user_password"] = $row["user_password"];
}
$next_action = 'password';
}
}
else
{
$error = 'Email Address is Required';
$next_action = 'email';
}
}
if($_POST["action"] == 'password')
{
if($_POST["user_password"] != '')
{
if(password_verify($_POST["user_password"], $_SESSION["user_password"]))
{
$login_otp = rand(100000,999999);
$data = array(
':user_id' => $_SESSION["register_user_id"],
':login_otp' => $login_otp,
':last_activity'=> date('d-m-y h:i:s')
);
$query = "
INSERT INTO login_data
(user_id, login_otp, last_activity)
VALUES (:user_id, :login_otp, :last_activity)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$_SESSION['login_id'] = $connect->lastInsertId();
$_SESSION['login_otp'] = $login_otp;
require 'class/class.phpmailer.php';
$mail = new PHPMailer;
$mail->IsSMTP();
$mail->Host = 'smtpout.secureserver.net';
$mail->Port = '80';
$mail->SMTPAuth = true;
$mail->Username = 'xxxxxxxxxxxxxx';
$mail->Password = 'xxxxxxxxxxxxxx';
$mail->SMTPSecure = '';
$mail->From = 'tutorial@webslesson.info';
$mail->FromName = 'Webslesson';
$mail->AddAddress($_SESSION["user_email"]);
$mail->WordWrap = 50;
$mail->IsHTML(true);
$mail->Subject = 'Verification code for Login';
$message_body = '
<p>For verify your login details, enter this verification code when prompted: <b>'.$login_otp.'</b>.</p>
<p>Sincerely,</p>
<p>Webslesson.info</p>
';
$mail->Body = $message_body;
if($mail->Send())
{
$next_action = 'otp';
}
else
{
$error = '<label class="text-danger">'.$mail->ErrorInfo.'</label>';
$next_action = 'password';
}
}
}
else
{
$error = 'Wrong Password';
$next_action = 'password';
}
}
else
{
$error = 'Password is Required';
$next_action = 'password';
}
}
if($_POST["action"] == "otp")
{
if($_POST["user_otp"] != '')
{
if($_SESSION['login_otp'] == $_POST["user_otp"])
{
$_SESSION['user_id'] = $_SESSION['register_user_id'];
unset($_SESSION["register_user_id"]);
unset($_SESSION["user_email"]);
unset($_SESSION["user_password"]);
unset($_SESSION["login_otp"]);
}
else
{
$error = 'Wrong OTP Number';
$next_action = 'otp';
}
}
else
{
$error = 'OTP Number is required';
$next_action = 'otp';
}
}
$output = array(
'error' => $error,
'next_action' => $next_action
);
echo json_encode($output);
}
?>
home.php
<?php
//home.php
session_start();
if(!isset($_SESSION["user_id"]))
{
header("location:login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Login with OTP Authentication</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<br />
<div class="container">
<h3 align="center">PHP Login with OTP Authentication</h3>
<br />
<br />
<h1 align="center">Welcome <?php echo $_SESSION["user_name"]; ?></h1>
<p align="center"><a href="logout.php">Logout</a></p>
</div>
<br />
<br />
</body>
</html>
logout.php
<?php
//logout.php
session_start();
session_destroy();
header("location:login.php");
?>
