Correo electrónico de verificación OTP usando PHP en Live Server

Posted on by Rudeus Greyrat

La tarea es crear y diseñar un formulario de registro e inicio de sesión. En el formulario de registro, el usuario se registrará con un nombre de usuario y contraseña personalizados y un correo electrónico válido, luego el usuario recibirá una OTP a través del correo electrónico y, después de una verificación exitosa, se creará una cuenta de usuario de OTP y se almacenarán los datos. en la base de datos MySQL, y luego el usuario será redirigido a la página de inicio. En el formulario de inicio de sesión, el usuario puede iniciar sesión con el nombre de usuario y la contraseña que ingresó al crear la nueva cuenta. 

Nota: Implementaremos todo esto en un servidor en vivo, cualquiera puede implementar esto en su propio servidor local como XAMPP, pero la parte de verificación de correo electrónico no funcionará en el servidor local.

Enfoque para el formulario de registro:

  • La primera tarea es crear una base de datos del servidor MySQL y una tabla de acuerdo con nuestros requisitos.
  • Conectamos nuestra base de datos del servidor MySQL utilizando la función PHP mysqli_connect() que toma cuatro argumentos, es decir, nuestro «nombre de servidor», «nombre de usuario», «contraseña» y «base de datos».
  • Después de ingresar todos los detalles del usuario, generaremos un número aleatorio de 6 dígitos usando la función PHP rand() y lo almacenaremos en la variable de sesión local y luego lo enviaremos al correo electrónico del usuario usando la función PHP mailer.
  • Cuando el usuario ingresa a la OTP, lo verificaremos con la OTP almacenada en la sesión si estos coinciden y luego la tienda redirigirá al usuario a la página de inicio.
  • Cree una nueva tabla con el nombre como nombre de usuario que proporcionó el usuario para almacenar el correo electrónico y la contraseña de ese usuario.

Enfoque para el formulario de inicio de sesión:

  • Conéctese a la base de datos como se describe anteriormente, luego verifique la credencial proporcionada por el usuario, si coinciden con los datos almacenados en la base de datos, redirija al usuario a la página de inicio; de lo contrario, mostrará el error relacionado.

Código PHP para el formulario de registro: register.php 

PHP

<!DOCTYPE html>
<html lang="en">
 
<?php
    session_start();
    $otp=$_SESSION["OTP"];
    if(isset($_SESSION["logged-in"])){
        header("Location:profile.php");
    }
    $username="sign up";
    $login_btn="Login";
    if(isset($_SESSION["username"])){
        $username=$_SESSION["username"];
        $login_btn="Logout";
    }
    if($_SERVER["REQUEST_METHOD"]=="POST"){
        $con=mysqli_connect('localhost',
            'database_username',
            'database_pass','database_name');
 
        if(!$con)
            echo ("failed to connect to database");
        $username1=$_POST['username'];
        $prefix="_";
        $username=$prefix.$username1;
        $password=$_POST['Password'];
        $repassword=$_POST['RePassword'];
        $email1=$_POST['Email'];
        $email=strval($email1);
        if($password!=$repassword){
            echo("<script>alert('password not matches')</script>");
        }
        else{
            if(strlen($password)<8){
                echo(
    "<script>alert('password length must be atleast 8')</script>");
            }
            else{
                $query="insert into 1_user(username,email,password)
                        values('$username','$email','$password')";
 
                $sql = "SELECT id,username, password FROM 1_user";
                $result = $con->query($sql);
                $username_already_exist=false;
                $email_already_exist=false;
 
                // Checking if user already exist
                if(($result->num_rows)> 0){
                    while($row = $result->fetch_assoc()) {
 
                        // echo "<br> id: " . $row["id"] .
                            " - username= " . $row["username"] .
                            " password= " . $row["password"] . "<br>";
 
                        if($row["username"]==$username){   
                            $username_already_exist=true;
                            break;
                        }
                        if($row["email"]==$email){   
                            $email_already_exist=true;
                            break;
                        }
                    }
                }
 
                // echo($ok);
                if($username_already_exist==false){
 
                    // This is my hosting mail
                    $from ="support@libraryatcoer.tk";
                    $to=$email;
                    $subject="verify-account-otp";
 
                    // Generating otp with php rand variable
                    $otp=rand(100000,999999);
                    $message=strval($otp);
                    $headers="From:" .$from;
                    if(mail($to,$subject,$message,$headers)){
                        $_SESSION["username"]=$username;
                        $_SESSION["OTP"]=$otp;
                        $_SESSION["Email"]=$email;
                        $_SESSION["Password"]=$password;
                        $_SESSION["registration-going-on"]="1";
                        header("Location:verify-otp.php");
                    }
                    else
                        echo("mail send faild");
                }
                else{
                    echo(
            "<script>alert('username  already taken')</script>");
                }
            }
        }
    }
?>
 
 
<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>Document</title>
    <link rel="stylesheet" type="text/css"
        href="css/style.css" media="screen" />
    <!--  adding bootstrap  -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
     
    <div class="nav-bar">
        <div class="title">
            <h3>welcome to my website</h3>
        </div>
    </div>
</head>
 
<body>
    <form class="form-register"
        action="register.php" method="POST">
        <div class="form-group">
            <label>username</label>
            <input type="text" class="form-control"
                name="username" id="username"
                aria-describedby="emailHelp"
                placeholder="username" required>
        </div>
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control"
                name="Email" id="Email"
                placeholder="Email" required>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control"
                name="Password" id="Password"
                placeholder="Password" required>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password"
                class="form-control" name="RePassword"
                id="RePassword" placeholder="RePassword"
                required>
        </div>
 
        <button type="submit"
            class="btn btn-primary btn-lg">
            Register
        </button>
 
        <button type="button"
            class="btn btn-warning btn-lg"
            id="login-button">
            Already Registered
        </button>
    </form>
     
    <script>
        $("#login-button").click(function () {
            window.location.replace("index.php");
        });
    </script>
</body>
 
</html>

Código PHP para enviar y verificar OTP: verificar-otp.php

PHP

<!DOCTYPE html>
<html lang="en">
    <?php
        session_start();
     
        // Retrieving otp with session variable
        $otp=$_SESSION["OTP"];
    ?>
 
<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>Document</title>
    <link rel="stylesheet" type="text/css"
        href="css/style.css" media="screen" />
 
    <!--  Adding bootstrap  -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
     
    <div class="nav-bar">
        <div class="title">
            <h3>welcome to my website</h3>
        </div>
    </div>
</head>
 
<body>
    <form class="form-login">
        <div class="form-group">
            <input type="text" class="form-control"
                name="otp" id="OTP"
                aria-describedby="emailHelp"
                placeholder="Enter OTP" required>
        </div>
 
        <button type="button"
            class="btn btn-primary btn-lg"
            id="verify-otp">
            verify otp
        </button>
    </form>
 
    <script>
        $("#resend-otp").click(function () {
            window.location.replace("resend-otp.php");
        });
        $("#verify-otp").click(function () {
 
            // window.location.replace("index.php");
            var otp1 = document.getElementById("OTP").value;
 
            // alert(otp1);
            var otp2 = ("<?php echo($otp)?>");
             
            // alert(otp2);
            if (otp1 == otp2) {
                window.location.replace("logged-in.php");
            }
            else {
                alert("otp not matches")
            }
        });
    </script>
</body>
 
</html>

Código PHP para reenviar OTP en caso de que no se reciba OTP: resend-otp.php

PHP

<!DOCTYPE html>
<html lang="en">
 
<?php
 
    session_start();
     
    // ini_set('dispaly_errors',1);
    // error_reporting(E_ALL);
    $from ="support@libraryatcoer.tk";
    $to=$_SESSION["Email"];
    $subject="verify-account-otp";
    $otp=rand(100000,999999);
    $message=strval($otp);
    $headers="From:" .$from;
         
    if(mail($to,$subject,$message,$headers)){
        $_SESSION["OTP"]=$otp;
        header("Location:verify-otp.php");
    }
    else
        echo("mail send faild");
?>
 
<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>Document</title>
    <link rel="stylesheet" type="text/css"
        href="css/style.css" media="screen" />
 
    <!--  Adding bootstrap  -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
     
    <div class="nav-bar">
        <div class="title">
            <h3>welcome to coer library</h3>
        </div>
    </div>
</head>
 
<body>
    <div class="form">
        <form action="register.php" method="POST">
            <label><b>Register To MY website</b></label>
            <hr class="first">
            <label><b>Coer-ID</b></label>
            <input type="text" name="Coer-ID"
                placeholder="Coer-ID" required id="Coer-ID"
                class="float-left1">
            <br><br>
 
            <label><b>Email</b></label>
            <input type="email" name="Email"
                placeholder="Email" required id="Email"
                class="float-left1">
            <br><br>
 
            <label><b>Password </b> </label>
            <input type="Password" name="Password"
                placeholder="Password" required id="Password"
                class="float-left1">
            <br><br>
 
            <label><b>RePassword </b> </label>
            <input type="Password" name="RePassword"
                placeholder=" Re Type Password"
                required id="Repassword"
                class="float-left1">
            <br><br>
 
            <button type="submit" name="login"
                value="login" id="register-button">
                create account
            </button>
            <br><br>
        </form>
    </div>
</body>
 
</html>

Después de una verificación OTP exitosa, inserte los datos del usuario en la tabla 1_user:

Esquema de tabla, cada fila tiene estas 4 columnas: 

id (tipo de datos int como clave principal)

nombre de usuario (tipo de datos de texto)

correo electrónico (tipo de datos de texto)

contraseña (tipo de datos de texto) 

 Código PHP para el formulario de inicio de sesión también la página predeterminada: index.php

PHP

<!DOCTYPE html>
<html lang="en">
<?php
    $message=
    "logged in successfully...redirecting to home page";
 
    session_start();
    if(isset($_SESSION["logged_in"])){
        header("Location:profile.php");
    }
 
    if($_SERVER["REQUEST_METHOD"]=="POST"){
        $con=mysqli_connect('localhost',
            'database_username',
            'database_pass','database_name');
 
        if($con);
        else
            echo "failed to connect to database";
        $username1=$_POST['username'];
        $prefix="_";
        $username=$prefix.$username1;
        $password=$_POST['Password'];
 
        $sql = "SELECT id,username, password FROM 1_user";
        $result = $con->query($sql);
 
        if ($result->num_rows > 0) {
            $fnd=0;
            while($row = $result->fetch_assoc()) {
 
                /* echo "<br> id: ". $row["id"].
                " - username= ". $row["username"].
                " password= " . $row["password"] . "<br>"; */
 
                if($row["username"]==$username and
                    $row["password"]==$password) {   
                     
                    $_SESSION["username"] = $username;
                    $_SESSION["registration-going-on"]="0";
                    $fnd=1;
                    $_SESSION["logged_in"]="1";
                    echo '<div class="alert alert-success"
                        role="alert">'.$message.'</div>';
 
                    echo
"<script>setTimeout(\"location.href = 'profile.php';\",3000);</script>";
                }
            }
            if($fnd==0)
                echo(
"<script>alert('username password not matches')</script>");
 
        }
        else {
            echo(
"<script>alert('username password not matches')</script>");
        }
        $con->close();
    }
?>
 
<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>Document</title>
 
    <link rel="stylesheet" type="text/css"
        href="css/style.css" media="screen" />
 
    <!--  Adding bootstrap  -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
     
    <div class="nav-bar">
        <div class="title">
            <h3>welcome to my website</h3>
        </div>
    </div>
</head>
 
<body>
    <form class="form-login" action="index.php" method="POST">
        <div class="form-group">
            <label>username</label>
            <input type="text" class="form-control"
                name="username" id="username"
                aria-describedby="emailHelp"
                placeholder="username" required>
        </div>
 
        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control"
                name="Password" id="Password"
                placeholder="Password" required>
        </div>
 
        <button type="submit"
            class="btn btn-primary btn-lg">Login
        </button>
         
        <button type="button"
            class="btn btn-warning btn-lg"
            id="register-button">
            Create Account
        </button>
    </form>
     
    <script>
            $("#register-button").click(function () {
                window.location.replace("register.php");
            });
    </script>
</body>
 
</html>

Código PHP de la página de perfil: profile.php 

PHP

<!DOCTYPE html>
<html lang="en">
<?php
    session_start();
?>
 
<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>Document</title>
    <link rel="stylesheet" type="text/css"
        href="css/style.css" media="screen" />
 
    <!--  Adding bootstrap  -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
     
    <div class="nav-bar">
        <div class="title">
            <h3>welcome to my website</h3>
        </div>
    </div>
</head>
 
<body>
    <h1>welcome you are loggend in successfully</h1>
</body>
 
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Stream_Cipher y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *