Este login permite al usuario recuperar su contraseña ingresando su correo, además de validar si el correo existe en la base de datos para evitar envíos innecesarios. Por otro lado, el registro de nuevos usuarios esta validado para no aceptar correos duplicados o existentes en la base de datos.
El usuario no podrá ingresar al sistema si no esta registrado en la base de datos. En este caso es necesario un correo y una contraseña.
El usuario tiene que registrar su cuenta ingresando un correo valido, una contraseña y su nombre, luego tendrá que aceptar el mensaje de confirmación.
Si anteriormente ya te haz registrado o alguien a usado tu correo para registrarse, te saldrá el mensaje de que no puedes registrar este correo y deberás de intentar recuperar tu cuenta o registrarte con otro correo.
Una vez creado tu cuenta puedes iniciar sesión sin problemas.
Si olvidaste tu contraseña deberás de presionar "Recuperar contraseña" y te saldrá una ventana, ingresas el correo con el cual te haz registrado, el sistema va verificar si existe el correo.
Si el correo no existe en la base de datos, te mostrará el mensaje "Este correo no existe".
Si el correo existe en la base de datos, te mostrará el mensaje "Contraseña enviado". Revisas tu correo y podrás ver que te acaba de llegar un mensaje del correo administrador del sistema con tu contraseña.
¿Cómo crear?
Primero tienes que configurar el XAMPP para que puedas enviar correos.
En la carpeta XAMPP buscamos la carpeta PHP luego en el archivo php.ini clic derecho y modificar o editar.
Buscamos por [mail function] y podrás ver
SMTP=localhost
smtp_port=25
;sendmail_path =
Debería de quedar de la siguiente manera
SMTP=smtp.gmail.com
smtp_port=587
sendmail_path = "C:\xampp\sendmail\sendmail.exe -t"
Guardar.
En la carpeta XAMPP buscamos la carpeta SENDMAIL luego el archivo sendmail.ini y modificar.
Buscamos por [sendmail] y podrás ver
smtp_server=localhost o mail.mydomain.com
smtp_port=25
Debería de quedar de la siguiente manera
smtp_server=smtp.gmail.com
smtp_port=587
Luego debemos de buscar por auth_username y podrás ver
auth_username=
auth_password=
En esta parte debes de ingresar un correo Gmail, este será el correo administrador que se encargará de enviar las contraseñas al usuario, agregar el correo, la contraseña y guardar el archivo.
Una vez configurado el correo podemos crear los otros archivos.
Creamos la carpeta img que tendrá nuestro logo.
Creamos los siguientes archivos, conexión.php, index.html, login.css, login.php, recuperar.php y registrar.php.
Creamos la base de datos loginvaidroll4, con la tabla login, columnas correo, pass y usu.
create database loginvaidroll4; use loginvaidroll4; CREATE TABLE `login` ( `correo` varchar(50) NOT NULL, `pass` varchar(50) NOT NULL, `usu` varchar(50) NOT NULL )
Continuamos con el código de cada archivo.
conexión.php
<?php $conn = new mysqli("localhost","root","","loginvaidroll4"); if($conn->connect_errno) { echo "No hay conexión: (" . $conn->connect_errno . ") " . $conn->connect_error; } ?>
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin4</title> <link rel="stylesheet" href="login.css"> </head> <body> <div class="cajafuera"> <div class="formulariocaja"> <div class="botondeintercambiar"> <div id="btnvai"></div> <button type="button" class="botoncambiarcaja" onclick="loginvai()" id="vaibtnlogin">Login</button> <button type="button" class="botoncambiarcaja" onclick="registrarvai()" id="vaibtnregistrar">Registrar</button> </div> <!--Formulario para el login --> <form id="frmlogin" class="grupo-entradas" method="POST" action="login.php"> <div class="logovai"><img src="img/logo.png"></div> <b>📧 Correo</b> <input type="email" class="cajaentradatexto" name="txtcorreo" required> <b>🔒 Contraseña</b> <input type="password" class="cajaentradatexto" name="txtpassword" required> <div class="checkboxvai"><a onclick="abrirform()">Recuperar contraseña</a></div> <button type="submit" class="botonenviar" name="btnloginx">Iniciar sesión</button> </form> <!--Formulario para registrar --> <form id="frmregistrar" class="grupo-entradas" method="POST" action="registrar.php"> <b>📧 Correo</b> <input type="email" class="cajaentradatexto" required name="txtcorreo"> <b>🔒 Contraseña</b> <input type="password" class="cajaentradatexto" required name="txtpassword"> </i>👤<b> Nombre</b> <input type="text" class="cajaentradatexto" required name="txtnombre"> <div class="checkboxvai"><input type="checkbox"> Acepto los términos y condiciones de uso.</div> <button type="submit" class="botonenviar" name="btnregistrarx">Registrar</button> </form> </div> </div> <script> var x = document.getElementById("frmlogin"); var y = document.getElementById("frmregistrar"); var z = document.getElementById("btnvai"); var textcolor1=document.getElementById("vaibtnlogin"); var textcolor2=document.getElementById("vaibtnregistrar"); textcolor1.style.color="white"; textcolor2.style.color="black"; function registrarvai() { x.style.left = "-400px"; y.style.left = "50px"; z.style.left = "110px"; textcolor1.style.color="black"; textcolor2.style.color="white"; } function loginvai() { x.style.left = "50px"; y.style.left = "450px"; z.style.left = "0"; textcolor1.style.color="white"; textcolor2.style.color="black"; } function abrirform() { document.getElementById("formrecuperar").style.display = "block"; } function cancelarform() { document.getElementById("formrecuperar").style.display = "none"; } </script> <div class="caja_popup" id="formrecuperar"> <form action="recuperar.php" class="contenedor_popup" method="POST"> <table> <tr><th colspan="2">Recuperar contraseña</th></tr> <tr> <td><b>📧 Correo</b></td> <td><input type="email" name="txtcorreo" required class="cajaentradatexto"></td> </tr> <tr> <td colspan="2"> <button type="button" onclick="cancelarform()" class="txtrecuperar">Cancelar</button> <input class="txtrecuperar" type="submit" name="btnrecuperar" value="Enviar" onClick="javascript: return confirm('¿Deseas enviar tu contraseña a tu correo?');"> </td> </tr> </table> </form> </div> </body> </html>
registrar.php
Esta validado para no aceptar correos existentes en la base de datos.
<?php //Para registrar include('conexion.php'); $correo = $_POST["txtcorreo"]; $pass = $_POST["txtpassword"]; $usu = $_POST["txtnombre"]; $queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE correo = '$correo'"); $nr = mysqli_num_rows($queryusuario); if ($nr == 0) { $queryregistrar = "INSERT INTO login(correo, pass, usu) values ('$correo','$pass','$usu')"; if(mysqli_query($conn,$queryregistrar)) { echo "<script> alert('Usuario registrado: $usu');window.location= 'index.html' </script>"; } else { echo "Error: " .$queryregistrar."<br>".mysql_error($conn); } } else { echo "<script> alert('No puedes registrar este correo: $correo');window.location= 'index.html' </script>"; } /*VaidrollTeam*/ ?>
recuperar.php
Antes de enviar el correo con la contraseña, verifica si existe el correo que acaba de ingresar el usuario, si existe el correo en la base de datos lo envía sin problemas su contraseña, caso contrario le mostrará un mensaje de que este correo no existe.
En la parte donde dice "xxxx@gmail.com" debes de cambiarlo por el correo administrador ingresado en sendmail.ini.
<?php include('conexion.php'); $correo = $_POST['txtcorreo']; $queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE correo = '$correo'"); $nr = mysqli_num_rows($queryusuario); if ($nr == 1) { $mostrar = mysqli_fetch_array($queryusuario); $enviarpass = $mostrar['pass']; $paracorreo = $correo; $titulo = "Recuperar contraseña"; $mensaje = $enviarpass; $tucorreo = "From: xxxx@gmail.com"; if(mail($paracorreo,$titulo,$mensaje,$tucorreo)) { echo "<script> alert('Contraseña enviado');window.location= 'index.html' </script>"; }else { echo "<script> alert('Error');window.location= 'index.html' </script>"; } } else { echo "<script> alert('Este correo no existe');window.location= 'index.html' </script>"; } /*VaidrollTeam*/ ?>
login.php
<?php include('conexion.php'); $correo = $_POST["txtcorreo"]; $pass = $_POST["txtpassword"]; //Para iniciar sesión $queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE correo ='$correo' and pass = '$pass'"); $nr = mysqli_num_rows($queryusuario); if ($nr == 1) { echo "<script> alert('Usuario logueado.');window.location= 'index.html' </script>"; } else { echo "<script> alert('Usuario o contraseña incorrecto.');window.location= 'index.html' </script>"; } /*VaidrollTeam*/ ?>
login.css
* { padding: 0; margin: 0; box-sizing: border-box; font-family: sans-serif; } body { margin:0; padding:0; height: 100%; width: 100%; display: flex; flex-direction: column; } .pagprincipal { width: 380px; height: 500px; position: relative; margin: 10% auto; padding: 2px; overflow: hidden; text-align:center; } h1 { font-size:40px; } .cajafuera { background:#f3f3f3; width: 100vw; height: 100vh; display: grid; } .formulariocaja { width: 400px; height: 500px; position: relative; margin: auto; background: white; padding: 2px; overflow: hidden; border: 1px solid black; border-radius: 2px; background:white; } .botondeintercambiar{ width: 240px; margin: 35px auto; position: relative; box-shadow: 0 0 6px 0.5px black; border-radius: 30px; } .botoncambiarcaja{ padding: 10px 30px; cursor: pointer; background: transparent; border: 0; outline: none; position: relative; font-weight: bold; font-size:16px; } #btnvai{ top: 0; left: 0; position: absolute; width: 130px; height: 100%; background-color: #1C62C1; border-radius: 30px; transition: .5s; } .logovai { text-align: center; } .logovai img { width: 120px; } .grupo-entradas{ position: absolute; width: 280px; transition: .5s; } .cajaentradatexto{ width: 100%; padding: 8px 10px; margin: 10px 0 10px 0; font-size:16px; border-radius:5px; border:1px solid black; } .botonenviar{ width: 100%; padding: 10px 30px; cursor: pointer; display: block; margin: auto; border: 0; outline: none; border-radius: 10px; border:1px solid black; font-size:16px; color:white; background-color: #1C62C1; } .checkboxvai{ margin: 5px 10px 24px 0; text-align:right; font-size:12px; } #frmlogin{ left: 50px; } #frmregistrar{ left: 450px; } .caja_popup { display: none; position: absolute; padding:0; background-color:rgba(0, 0, 0, 0.5); width:100%; height:100%; } .contenedor_popup { border-radius: 5px; top: 10%; left: 50%; position: absolute; transform: translate(-50%,-50%); width:400px; border-radius: 5px; transition: all 0.2s; } a { text-decoration-line: underline; cursor:pointer; } table { text-align:center; width: 98%; border-collapse: collapse; border: 3px solid black; margin:50px auto; background: white; } th { background: steelblue; height: 40px; font-weight: lighter; text-shadow: 0 1px 0 #38678f; color: white; border: 1px solid #38678f; box-shadow: inset 0px 1px 2px #568ebd; transition: all 0.2s; font-size: 18px; } tr { border-bottom: 1px solid #cccccc; width:100%; } td { border: 1px solid #cccccc; padding: 10px; transition: all 0.2s; font-size: 14px; } .txtrecuperar { font-size: 14px; text-align:center; width: 100px; display: inline-block; background-color: #1C62C1; padding: 6px 10px; border-radius:5px; color:white; border:1px solid black; cursor:pointer; }
Listo.
Posibles errores.
Error.
No tengo la carpeta SENDMAIL.Solución.
Debes de volver a instalar el XAMPP y en las opciones activar la casilla FAKE SENDMAIL durante la instalación.
Error.
No envía ningún correo o no funciona el correo.
Solución.
1.- Verificar si php.ini y sendmail.ini están bien configurados al igual que en el vídeo.
2.- El correo administrador ingresado en sendmail.ini debe de ser un correo tuyo y debe de ser Gmail. Además, debe de estar activado la opción de permitir acceso de aplicaciones poco seguras. (Todo esta en el vídeo)
Aquí tienes el vídeo para que puedas ver como se hace paso a paso.
