Curso de PHP y MySQL 21: Recuperar Contraseña por Email
Este es el capitulo 21 del Curso de PHP y MySQL. En este capitulo desarrollaremos la pantalla para recuperar contraseña por correo electrónico de nuestro Sistema de Usuarios en PHP y MySQL.
Requisitos:
- Servidor Web, PHP (5.5 o superior) y MySQL. Ver Capitulo 1
- Capitulo 19: Registro de usuarios
- Capitulo 20: Login, logout y Privilegios
- Librería: PHPMailer
- Bootstrap
En la descarga al final del post incluimos los formularios con librerías, hojas de estilo, javascripts y archivo sql con la base de datos, la estructura de carpetas es la siguiente:
Iniciamos con la pantalla de recuperación de contraseña, recupera.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 |
<?php require 'funcs/conexion.php'; include 'funcs/funcs.php'; session_start(); if(isset($_SESSION["id_usuario"])){ header("Location: welcome.php"); } $errors = array(); if(!empty($_POST)) { $email = $mysqli->real_escape_string($_POST['email']); if(!isEmail($email)) { $errors[] = "Debe ingresar un correo electronico valido"; } if(emailExiste($email)) { $user_id = getValor('id', 'correo', $email); $nombre = getValor('nombre', 'correo', $email); $token = generaTokenPass($user_id); $url = 'http://'.$_SERVER["SERVER_NAME"].'/login/cambia_pass.php?user_id='.$user_id.'&token='.$token; $asunto = 'Recuperar Password - Sistema de Usuarios'; $cuerpo = "Hola $nombre: <br /><br />Se ha solicitado un reinicio de contraseña. <br/><br/>Para restaurar la contraseña, visita la siguiente dirección: <a href='$url'>$url</a>"; if(enviarEmail($email, $nombre, $asunto, $cuerpo)){ echo "Hemos enviado un correo electronico a las direcion $email para restablecer tu password.<br />"; echo "<a href='index.php' >Iniciar Sesion</a>"; exit; } } else { $errors[] = "La direccion de correo electronico no existe"; } } ?> <html> <head> <title>Recuperar Password</title> <link rel="stylesheet" href="css/bootstrap.min.css" > <link rel="stylesheet" href="css/bootstrap-theme.min.css" > <script src="js/bootstrap.min.js" ></script> </head> <body> <div class="container"> <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info" > <div class="panel-heading"> <div class="panel-title">Recuperar Password</div> <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="index.php">Iniciar Sesión</a></div> </div> <div style="padding-top:30px" class="panel-body" > <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> <form id="loginform" class="form-horizontal" role="form" action="<?php $_SERVER['PHP_SELF'] ?>" method="POST" autocomplete="off"> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="email" type="email" class="form-control" name="email" placeholder="email" required> </div> <div style="margin-top:10px" class="form-group"> <div class="col-sm-12 controls"> <button id="btn-login" type="submit" class="btn btn-success">Enviar</a> </div> </div> <div class="form-group"> <div class="col-md-12 control"> <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > No tiene una cuenta! <a href="registro.php">Registrate aquí</a> </div> </div> </div> </form> <?php echo resultBlock($errors); ?> </div> </div> </div> </div> </body> </html> |
Aquí también es necesario verificar la configuración del envío de correo electrónico para que podamos enviar los datos para recuperación de contraseña.
Ahora creamos el script que enviamos en la url del correo electrónico, cambia_pass.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 |
<?php require 'funcs/conexion.php'; include 'funcs/funcs.php'; session_start(); if(empty($_GET['user_id'])){ header('Location: index.php'); } if(empty($_GET['token'])){ header('Location: index.php'); } $user_id = $mysqli->real_escape_string($_GET['user_id']); $token = $mysqli->real_escape_string($_GET['token']); if(!verificaTokenPass($user_id, $token)) { echo 'No se pudo verificar los Datos'; exit; } ?> <html> <head> <title>Cambiar Password</title> <link rel="stylesheet" href="css/bootstrap.min.css" > <link rel="stylesheet" href="css/bootstrap-theme.min.css" > <script src="js/bootstrap.min.js" ></script> </head> <body> <div class="container"> <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info" > <div class="panel-heading"> <div class="panel-title">Cambiar Password</div> <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="index.php">Iniciar Sesión</a></div> </div> <div style="padding-top:30px" class="panel-body" > <form id="loginform" class="form-horizontal" role="form" action="guarda_pass.php" method="POST" autocomplete="off"> <input type="hidden" id="user_id" name="user_id" value ="<?php echo $user_id; ?>" /> <input type="hidden" id="token" name="token" value ="<?php echo $token; ?>" /> <div class="form-group"> <label for="password" class="col-md-3 control-label">Nuevo Password</label> <div class="col-md-9"> <input type="password" class="form-control" name="password" placeholder="Password" required> </div> </div> <div class="form-group"> <label for="con_password" class="col-md-3 control-label">Confirmar Password</label> <div class="col-md-9"> <input type="password" class="form-control" name="con_password" placeholder="Confirmar Password" required> </div> </div> <div style="margin-top:10px" class="form-group"> <div class="col-sm-12 controls"> <button id="btn-login" type="submit" class="btn btn-success">Modificar</a> </div> </div> </form> </div> </div> </div> </div> </body> </html> |
Verificamos si los datos que esta proporcionado en la url son validos y mostramos el formulario para agregar un nuevo password, en caso de que los datos no sean validos no muestra el formulario.
El formulario para cambiar el password se envía al script guarda_pass.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 |
<?php require 'funcs/conexion.php'; include 'funcs/funcs.php'; $user_id = $mysqli->real_escape_string($_POST['user_id']); $token = $mysqli->real_escape_string($_POST['token']); $password = $mysqli->real_escape_string($_POST['password']); $con_password = $mysqli->real_escape_string($_POST['con_password']); if(validaPassword($password, $con_password)) { $pass_hash = hashPassword($password); if(cambiaPassword($pass_hash, $user_id, $token)) { echo "Contraseña Modificada <br> <a href='index.php' >Iniciar Sesion</a>"; } else { echo "Error al modificar contraseña"; } } else { echo 'Las contraseñas no coinciden'; } ?> |
Con esto cambiamos nuestra contraseña para iniciar sesión correctamente.