User Registration With Email OTP Verification Using PHP
In this tutorial, we will learn how users can registration with Email OTP Verification Using PHP. First user can register himself then verifiy account using OTO sent on his/her registered email id.
File Structure for the coding
- config.php (Database connection file)
- index.php (User Signup file)
- verify-otp.php (Email OTP Verification file)
- resend-otp.php (Used to resend the the otp)
- login.php (User login file)
- welcome.php (After login user will redirect to this page)
- logout.php (For logout)
- emailoptverification.sql (This file the contain the tblusers schema)
MySQL Table Structure for this tutorial. In this tutorial we will use tbluser MySQL table. Here is the schema of the table.
1 2 3 4 5 6 7 8 9 10 11 |
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; |
Database connection file config.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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()); } ?> |
First we will create a HTML Form for user registration/signup.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<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="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> |
Now write PHP Code for user registration/signup. In this process, we will check the user email is registered with us or not. If not registered with us then we will create a random 6 digit Otp and send this OTP to the user email id.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?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"."\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n"; $headers .= 'From:User Signup<yourname@yourdomain.com>'."\r\n"; $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='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>"; } }?> |
Here is the full code that we have written for user registration/signup process (index.php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
<?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"."\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n"; $headers .= 'From:User Signup<yourname@yourdomain.com>'."\r\n"; $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='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="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="login.php">Login here</a></div> </div> </body> </html> |
After signup user will redirect to verify OTP page. Here user have to proveide OTP that is sent to his/her registered email id.If user will provide correct OTP then user registration/signup will complete. Here is the full code for email verification (verify-otp.php)
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<?php session_start(); include_once('config.php'); error_reporting(0); //validation page if($_SESSION['emailid']=='' ){ echo "<script>window.location.href='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='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="#">Login here</a></div> </div> </body> </html> |
If user want to resend the email OTP then he/send can send the OTP again by clickin gin the resend OTP link. Here is the code for resend OTP (resend-otp.php)
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
<?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"."\r\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n"; $headers .= 'From:User Signup<yourname@yourdomain.com>'."\r\n"; $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='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="login.php">Login here</a></div> </div> </body> </html> |
After successfull OTP Verification user can login. Here is the code for login (login.php)
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<?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 type='text/javascript'> 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="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> |
After successful login user will redirect to welcome.php
. $_SESSION[‘ulogin’] will autheticate the page if there is invalid or blank session user will redirect to login page. Here is the code for welcome.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<?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 } ?> |
Here is the code for logout (logout.php
)
1 2 3 4 5 |
<?php session_start(); session_destroy(); // destroy session header("location:login.php"); ?> |