در این آموزش ، ما یاد می گیریم که چگونه کاربران می توانند با استفاده از PHP در تأیید ایمیل OTP ثبت نام کنند. ابتدا کاربر می تواند خود را ثبت کند و سپس حساب را با استفاده از OTO ارسال شده در شناسه ایمیل ثبت شده خود تأیید کند.
ساختار فایل برای کد نویسی
- config.php (فایل اتصال به پایگاه داده)
- index.php (فایل ثبت نام کاربر)
- verify-otp.php (فایل تأیید ایمیل OTP)
- resend-otp.php (برای ارسال مجدد otp استفاده می شود)
- login.php (فایل ورود کاربر)
- welcome.php (پس از ورود کاربر به این صفحه هدایت می شود)
- logout.php (برای خروج از سیستم)
- emailoptverification.sql (این فایل شامل طرح tblusers است)
ساختار جدول MySQL برای این آموزش. در این آموزش ما از جدول tbluser MySQL استفاده می کنیم. در اینجا طرح جدول است.
CREATE TABLE `tblusers` (
`id` int(11) NOT NULL,
`userName` varchar(150) DEFAULT NULL,
`emailId` varchar(150) DEFAULT NULL,
`ContactNumber` bigint(12) DEFAULT NULL,
`userPassword` varchar(200) DEFAULT NULL,
`regDate` timestamp NOT NULL DEFAULT current_timestamp(),
`emailOtp` int(6) DEFAULT NULL,
`isEmailVerify` int(1) DEFAULT NULL,
`lastUpdationDate` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
فایل اتصال به پایگاه داده config.php
<?php
// DB credentials.
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME','emailoptverification');
// Establish database connection.
try
{
$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
}
catch (PDOException $e)
{
exit("Error: " . $e->getMessage());
}
?>
ابتدا یک فرم HTML برای ثبت نام/ثبت نام کاربر ایجاد می کنیم.
<form method="post">
<div class="form-header">
<h2>Sign Up</h2>
<p>Fill out this form for registration</p>
</div>
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="username" required="required">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email" required="required">
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control" name="contactnumber" required="required">
</div>
<div class="form-group">
<label> Password</label>
<input type="password" class="form-control" name="password" required="required">
</div>
<div class="form-group">
<label class="form-check-label"><a href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/resend-otp.php">Resend OTP</a></label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-lg" name="submit">Sign Up</button>
</div>
</form>
اکنون کد PHP را برای ثبت نام/ثبت نام کاربر بنویسید. در این فرآیند ، ما بررسی می کنیم که ایمیل کاربر در ما ثبت شده است یا خیر. اگر با ما ثبت نام نکرده اید ، یک Otp تصادفی 6 رقمی ایجاد می کنیم و این OTP را به شناسه ایمیل کاربر ارسال می کنیم.
<?php session_start();
include_once('config.php');
//Code for Signup
if(isset($_POST['submit'])){
//Getting Post values
$name=$_POST['username'];
$email=$_POST['email'];
$cnumber=$_POST['contactnumber'];
$loginpass=md5($_POST['password']); // Password is encrypted using MD5
//Generating 6 Digit Random OTP
$otp= mt_rand(100000, 999999);
// Query for validation of email-id
$ret="SELECT id FROM tblusers where (emailId=:uemail)";
$queryt = $dbh -> prepare($ret);
$queryt->bindParam(':uemail',$email,PDO::PARAM_STR);
$queryt -> execute();
$results = $queryt -> fetchAll(PDO::FETCH_OBJ);
if($queryt -> rowCount() == 0)
{
//Query for Insert user data if email not registered
$emailverifiy=0;
$sql="INSERT INTO tblusers(userName,emailId,ContactNumber,userPassword,emailOtp,isEmailVerify) VALUES(:fname,:emaill,:cnumber,:hashedpass,:otp,:isactive)";
$query = $dbh->prepare($sql);
// Binding Post Values
$query->bindParam(':fname',$name,PDO::PARAM_STR);
$query->bindParam(':emaill',$email,PDO::PARAM_STR);
$query->bindParam(':cnumber',$cnumber,PDO::PARAM_STR);
$query->bindParam(':hashedpass',$loginpass,PDO::PARAM_STR);
$query->bindParam(':otp',$otp,PDO::PARAM_STR);
$query->bindParam(':isactive',$emailverifiy,PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();
if($lastInsertId)
{
$_SESSION['emailid']=$email;
//Code for Sending Email
$subject="OTP Verification";
$headers .= "MIME-Version: 1.0"."rn";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."rn";
$headers .= 'From:User Signup<yourname@yourdomain.com>'."rn";
$ms.="<html></body><div><div>Dear $name,</div></br></br>";
$ms.="<div style="padding-top:8px;">Thank you for registering with us. OTP for for Account Verification is $vericationcode</div><div></div></body></html>";
mail($email,$subject,$ms,$headers);
echo "<script>window.location.href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/verify-otp.php"</script>";
}else {
echo "<script>alert('Something went wrong.Please try again');</script>";
}} else{
echo "<script>alert('Email id already assicated with another account.');</script>";
}
}?>
در اینجا کد کامل است که ما برای مراحل ثبت نام/ثبت نام کاربر نوشته ایم (index.php)
<?php session_start();
include_once('config.php');
//Code for Signup
if(isset($_POST['submit'])){
//Getting Post values
$name=$_POST['username'];
$email=$_POST['email'];
$cnumber=$_POST['contactnumber'];
$loginpass=md5($_POST['password']); // Password is encrypted using MD5
//Generating 6 Digit Random OTP
$otp= mt_rand(100000, 999999);
// Query for validation of email-id
$ret="SELECT id FROM tblusers where (emailId=:uemail)";
$queryt = $dbh -> prepare($ret);
$queryt->bindParam(':uemail',$email,PDO::PARAM_STR);
$queryt -> execute();
$results = $queryt -> fetchAll(PDO::FETCH_OBJ);
if($queryt -> rowCount() == 0)
{
//Query for Insert user data if email not registered
$emailverifiy=0;
$sql="INSERT INTO tblusers(userName,emailId,ContactNumber,userPassword,emailOtp,isEmailVerify) VALUES(:fname,:emaill,:cnumber,:hashedpass,:otp,:isactive)";
$query = $dbh->prepare($sql);
// Binding Post Values
$query->bindParam(':fname',$name,PDO::PARAM_STR);
$query->bindParam(':emaill',$email,PDO::PARAM_STR);
$query->bindParam(':cnumber',$cnumber,PDO::PARAM_STR);
$query->bindParam(':hashedpass',$loginpass,PDO::PARAM_STR);
$query->bindParam(':otp',$otp,PDO::PARAM_STR);
$query->bindParam(':isactive',$emailverifiy,PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();
if($lastInsertId)
{
$_SESSION['emailid']=$email;
//Code for Sending Email
$subject="OTP Verification";
$headers .= "MIME-Version: 1.0"."rn";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."rn";
$headers .= 'From:User Signup<yourname@yourdomain.com>'."rn";
$ms.="<html></body><div><div>Dear $name,</div></br></br>";
$ms.="<div style="padding-top:8px;">Thank you for registering with us. OTP for for Account Verification is $vericationcode</div><div></div></body></html>";
mail($email,$subject,$ms,$headers);
echo "<script>window.location.href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/verify-otp.php"</script>";
}else {
echo "<script>alert('Something went wrong.Please try again');</script>";
}} else{
echo "<script>alert('Email id already assicated with another account.');</script>";
}
}?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700">
<title>User Registration with email otp verification in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #999;
background: #e2e2e2;
font-family: 'Roboto', sans-serif;
}
.form-control {
min-height: 41px;
box-shadow: none;
border-color: #e1e1e1;
}
.form-control:focus {
border-color: #00cb82;
}
.form-control, .btn {
border-radius: 3px;
}
.form-header {
margin: -30px -30px 20px;
padding: 30px 30px 10px;
text-align: center;
background: #00cb82;
border-bottom: 1px solid #eee;
color: #fff;
}
.form-header h2 {
font-size: 34px;
font-weight: bold;
margin: 0 0 10px;
font-family: 'Pacifico', sans-serif;
}
.form-header p {
margin: 20px 0 15px;
font-size: 17px;
line-height: normal;
font-family: 'Courgette', sans-serif;
}
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f0f0f0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 14px;
}
.signup-form input[type="checkbox"] {
position: relative;
top: 1px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #00cb82;
border: none;
min-width: 200px;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #00b073 !important;
outline: none;
}
.signup-form a {
color: #00cb82;
}
.signup-form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<form method="post">
<div class="form-header">
<h2>Sign Up</h2>
<p>Fill out this form for registration</p>
</div>
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="username" required="required">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email" required="required">
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control" name="contactnumber" required="required">
</div>
<div class="form-group">
<label> Password</label>
<input type="password" class="form-control" name="password" required="required">
</div>
<div class="form-group">
<label class="form-check-label"><a href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/resend-otp.php">Resend OTP</a></label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-lg" name="submit">Sign Up</button>
</div>
</form>
</div>
</form>
<div class="text-center small">Already have an account? <a href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/login.php">Login here</a></div>
</div>
</body>
</html>
پس از ثبت نام کاربر جهت تأیید صفحه OTP تغییر مسیر می دهد. در اینجا کاربر باید OTP را که به شناسه ایمیل ثبت شده خود ارسال می شود ، اثبات کند. اگر کاربر OTP صحیح ارائه دهد ، ثبت نام/ثبت نام کاربر تکمیل می شود. در اینجا کد کامل برای تأیید ایمیل وجود دارد (verify-otp.php)
به
<?php session_start();
include_once('config.php');
error_reporting(0);
//validation page
if($_SESSION['emailid']=='' ){
echo "<script>window.location.href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/login.php"</script>";
}else{
//Code for otp verification
if(isset($_POST['verify'])){
//Getting Post values
$emailid=$_SESSION['emailid'];
$otp=$_POST['emailotp'];
// Getting otp from database on the behalf of the email
$stmt=$dbh->prepare("SELECT emailOtp FROM tblusers where emailId=:emailid");
$stmt->execute(array(':emailid'=>$emailid));
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
$dbotp=$row['emailOtp'];
}
if($dbotp!=$otp){
echo "<script>alert('Please enter correct OTP');</script>";
} else {
$emailverifiy=1;
$sql="update tblusers set isEmailVerify=:emailverifiy where emailId=:emailid";
$query = $dbh->prepare($sql);
// Binding Post Values
$query->bindParam(':emailid',$emailid,PDO::PARAM_STR);
$query->bindParam(':emailverifiy',$emailverifiy,PDO::PARAM_STR);
$query->execute();
session_destroy();
echo "<script>alert('OTP verified successfully');</script>";
echo "<script>window.location.href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/login.php"</script>";
}}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700">
<title>User Registration with email otp verification in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #999;
background: #e2e2e2;
font-family: 'Roboto', sans-serif;
}
.form-control {
min-height: 41px;
box-shadow: none;
border-color: #e1e1e1;
}
.form-control:focus {
border-color: #00cb82;
}
.form-control, .btn {
border-radius: 3px;
}
.form-header {
margin: -30px -30px 20px;
padding: 30px 30px 10px;
text-align: center;
background: #00cb82;
border-bottom: 1px solid #eee;
color: #fff;
}
.form-header h2 {
font-size: 34px;
font-weight: bold;
margin: 0 0 10px;
font-family: 'Pacifico', sans-serif;
}
.form-header p {
margin: 20px 0 15px;
font-size: 17px;
line-height: normal;
font-family: 'Courgette', sans-serif;
}
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f0f0f0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 14px;
}
.signup-form input[type="checkbox"] {
position: relative;
top: 1px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #00cb82;
border: none;
min-width: 200px;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #00b073 !important;
outline: none;
}
.signup-form a {
color: #00cb82;
}
.signup-form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<form method="post">
<div class="form-header">
<h2>Verify OTP</h2>
</div>
<div class="form-group">
<label>Email OTP</label>
<input type="text" class="form-control" name="emailotp" maxlength="6" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-lg" name="verify">Verify</button>
</div>
</form>
<div class="text-center small">Already have an account? <a href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/#">Login here</a></div>
</div>
</body>
</html>
اگر کاربر می خواهد ایمیل OTP را دوباره ارسال کند ، می تواند OTP را مجدداً با کلیک روی پیوند مجدد OTP ارسال کند. در اینجا کد ارسال مجدد OTP آمده است (resend-otp.php)
به
<?php session_start();
include_once('config.php');
//Code for Resend
if(isset($_POST['resend'])){
//Getting Post values
$email=$_POST['email'];
//Generating 6 Digit Random OTP
$otp= mt_rand(100000, 999999);
// Query for validation of email-id
$ret="SELECT id,isEmailVerify FROM tblusers where (emailId=:uemail)";
$queryt = $dbh -> prepare($ret);
$queryt->bindParam(':uemail',$email,PDO::PARAM_STR);
$queryt -> execute();
$results = $queryt -> fetchAll(PDO::FETCH_OBJ);
if($queryt -> rowCount() > 0)
{
foreach ($results as $result) {
$verifystatus=$result->isEmailVerify;}
//if email already verified
if($verifystatus=='1'){
echo "<script>alert('Email already verified. No need to verify again.');</script>";
} else{
$_SESSION['emailid']=$email;
$_SESSION['otp']=$otp;
$sql="update tblusers set emailOtp=:otp where emailId=:emailid";
$query = $dbh->prepare($sql);
// Binding Post Values
$query->bindParam(':emailid',$email,PDO::PARAM_STR);
$query->bindParam(':otp',$otp,PDO::PARAM_STR);
$query->execute();
//Code for Sending Email
$subject="OTP Verification";
$headers .= "MIME-Version: 1.0"."rn";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."rn";
$headers .= 'From:User Signup<yourname@yourdomain.com>'."rn";
$ms.="<html></body><div><div>Dear $name,</div></br></br>";
$ms.="<div style="padding-top:8px;">Thank you for registering with us. OTP for for Account Verification is $vericationcode</div><div></div></body></html>";
mail($email,$subject,$ms,$headers);
echo "<script>window.location.href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/verify-otp.php"</script>";
}}else {
echo "<script>alert('Email id not registered yet');</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700">
<title>User Registration with email otp verification in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #999;
background: #e2e2e2;
font-family: 'Roboto', sans-serif;
}
.form-control {
min-height: 41px;
box-shadow: none;
border-color: #e1e1e1;
}
.form-control:focus {
border-color: #00cb82;
}
.form-control, .btn {
border-radius: 3px;
}
.form-header {
margin: -30px -30px 20px;
padding: 30px 30px 10px;
text-align: center;
background: #00cb82;
border-bottom: 1px solid #eee;
color: #fff;
}
.form-header h2 {
font-size: 34px;
font-weight: bold;
margin: 0 0 10px;
font-family: 'Pacifico', sans-serif;
}
.form-header p {
margin: 20px 0 15px;
font-size: 17px;
line-height: normal;
font-family: 'Courgette', sans-serif;
}
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f0f0f0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 14px;
}
.signup-form input[type="checkbox"] {
position: relative;
top: 1px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #00cb82;
border: none;
min-width: 200px;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #00b073 !important;
outline: none;
}
.signup-form a {
color: #00cb82;
}
.signup-form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<form method="post">
<div class="form-header">
<h2>Resend OTP</h2>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-lg" name="resend">Resend</button>
</div>
</form>
<div class="text-center small">Already have an account? <a href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/login.php">Login here</a></div>
</div>
</body>
</html>
پس از موفقیت آمیز بودن تأیید OTP ، کاربر می تواند وارد سیستم شود. در اینجا کد ورود به سیستم آمده است (login.php)
به
<?php session_start();
include_once('config.php');
//Code for login
if(isset($_POST['login']))
{
$uname=$_POST['email'];
$password=md5($_POST['password']);
$sql ="SELECT id,isEmailVerify,userName FROM tblusers WHERE emailId=:uname and userPassword=:password";
$query= $dbh -> prepare($sql);
$query-> bindParam(':uname', $uname, PDO::PARAM_STR);
$query-> bindParam(':password', $password, PDO::PARAM_STR);
$query-> execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0)
{
foreach ($results as $result) {
$emailstatus=$result->isEmailVerify;
$fname=$result->userName;
$uid=$result->id;
}
if($emailstatus==1){
$_SESSION['ulogin']=$uid;
$_SESSION['fname']=$fname;
echo "<script > document.location = 'welcome.php'; </script>";
} else{
echo "<script>alert('Email not verified. Please verify for email by entrying otp sent on your email');</script>";
}} else{
echo "<script>alert('Invalid Details');</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700">
<title>User Registration with email otp verification in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #999;
background: #e2e2e2;
font-family: 'Roboto', sans-serif;
}
.form-control {
min-height: 41px;
box-shadow: none;
border-color: #e1e1e1;
}
.form-control:focus {
border-color: #00cb82;
}
.form-control, .btn {
border-radius: 3px;
}
.form-header {
margin: -30px -30px 20px;
padding: 30px 30px 10px;
text-align: center;
background: #00cb82;
border-bottom: 1px solid #eee;
color: #fff;
}
.form-header h2 {
font-size: 34px;
font-weight: bold;
margin: 0 0 10px;
font-family: 'Pacifico', sans-serif;
}
.form-header p {
margin: 20px 0 15px;
font-size: 17px;
line-height: normal;
font-family: 'Courgette', sans-serif;
}
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f0f0f0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 14px;
}
.signup-form input[type="checkbox"] {
position: relative;
top: 1px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #00cb82;
border: none;
min-width: 200px;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #00b073 !important;
outline: none;
}
.signup-form a {
color: #00cb82;
}
.signup-form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<form method="post">
<div class="form-header">
<h2>Sign in</h2>
<p>Fill out this form to start login session</p>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email" required="required">
</div>
<div class="form-group">
<label> Password</label>
<input type="password" class="form-control" name="password" required="required">
</div>
<div class="form-group">
<label class="form-check-label"><a href="https://phpgurukul.com/user-registration-with-email-otp-verification-using-php/resend-otp.php">Resend OTP</a></label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-lg" name="login">Sign Up</button>
</div>
</form>
<div class="text-center small">Not Signup yet ? <a href="index.php">Signup here</a></div>
</div>
</body>
</html>
پس از ورود موفق کاربر به آدرس هدایت می شود welcome.php
به $ _SESSION[‘ulogin’] اگر جلسه نامعتبر یا خالی باشد کاربر صفحه را به صفحه ورود هدایت می کند. در اینجا کد برای ما آمده استlcome.php
<?php session_start();
include_once('config.php');
if (strlen($_SESSION['ulogin']==0)) {
header('location:index.php');
} else{
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Courgette|Pacifico:400,700">
<title>User Registration with email otp verification in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #999;
background: #e2e2e2;
font-family: 'Roboto', sans-serif;
}
.form-control {
min-height: 41px;
box-shadow: none;
border-color: #e1e1e1;
}
.form-control:focus {
border-color: #00cb82;
}
.form-control, .btn {
border-radius: 3px;
}
.form-header {
margin: -30px -30px 20px;
padding: 30px 30px 10px;
text-align: center;
background: #00cb82;
border-bottom: 1px solid #eee;
color: #fff;
}
.form-header h2 {
font-size: 34px;
font-weight: bold;
margin: 0 0 10px;
font-family: 'Pacifico', sans-serif;
}
.form-header p {
margin: 20px 0 15px;
font-size: 17px;
line-height: normal;
font-family: 'Courgette', sans-serif;
}
.signup-form {
width: 390px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f0f0f0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 14px;
}
.signup-form input[type="checkbox"] {
position: relative;
top: 1px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #00cb82;
border: none;
min-width: 200px;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #00b073 !important;
outline: none;
}
.signup-form a {
color: #00cb82;
}
.signup-form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<form method="post">
<div class="form-header">
<h2>welcome</h2>
</div>
<div class="form-group">
<label>Welcome Back--</label>
<?php echo $_SESSION['fname'];?>
</div>
<div class="form-group">
<a href="logout.php" class="btn btn-primary btn-block btn-lg" style="color: #fff;">Logout</a>
</div>
</form>
</div>
</body>
</html>
<?php } ?>
در اینجا کد خروج از سیستم (logout.php
)
<?php
session_start();
session_destroy(); // destroy session
header("location:login.php");
?>
بارگیری- اسکریپت تأیید OTP ایمیل
اندازه: 11.8 کیلوبایت
نسخه: V 1.0