Inicio de Sesión seguro y Registro de Usuarios usando PHP, MySQLi, jQuery y Bootstrap

En este tutorial vamos a ver un simple registro de usuarios e inicio de sesión con la opción de restablecer la contraseña en caso de que el usuario la haya olvidado, usaremos programación orientada a objetos con PHP5, MySQLi, jQuery y Bootstrap. Además el sistema incluye una serie de plantillas para mostrar después que el usuario haya iniciado sesión, dichas páginas son (home.php, info.php, header.php, footer.php y account.php).

Paso 1:

Crear la base de datos y la tabla de ejemplo para este tutorial con la siguientes consultas:

--
-- Database: `login`
--
CREATE DATABASE IF NOT EXISTS `login` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `login`;
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(60) NOT NULL,
  `password` varchar(60) NOT NULL,
  `social_id` varchar(100) NOT NULL,
  `picture` varchar(250) NOT NULL,
  `created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`user_id`),
  KEY `email` (`email`),
  KEY `login` (`password`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

-- Database: `login`

CREATE DATABASE IF NOT EXISTS `login` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE `login`;

-- --------------------------------------------------------

-- Table structure for table `users`

CREATE TABLE IF NOT EXISTS `users` (

`user_id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`name` varchar(50) NOT NULL,

`email` varchar(60) NOT NULL,

`password` varchar(60) NOT NULL,

`social_id` varchar(100) NOT NULL,

`picture` varchar(250) NOT NULL,

`created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,

PRIMARY KEY (`user_id`),

KEY `email` (`email`),

KEY `login` (`password`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Paso 2:

Crear archivo config.php y definir información de configuración generales relacionados en el mismo.

<?php
require_once 'messages.php';

define( 'BASE_PATH', 'http://localhost/login/');//Ruta base donde se encuentra
define( 'DB_HOST', 'localhost' );//Servidor de la base de datos
define( 'DB_USERNAME', 'root');//Usuario de la base de datos
define( 'DB_PASSWORD', 'root');//Contraseña de la base de datos
define( 'DB_NAME', 'login');//Nombre de la base de datos

function __autoload($class)
{
	$parts = explode('_', $class);
	$path = implode(DIRECTORY_SEPARATOR,$parts);
	require_once $path . '.php';
}

<?php

require_once 'messages.php';

define( 'BASE_PATH', 'http://localhost/login/');//Ruta base donde se encuentra

define( 'DB_HOST', 'localhost' );//Servidor de la base de datos

define( 'DB_USERNAME', 'root');//Usuario de la base de datos

define( 'DB_PASSWORD', 'root');//Contraseña de la base de datos

define( 'DB_NAME', 'login');//Nombre de la base de datos

function __autoload($class)

{

$parts = explode('_', $class);

$path = implode(DIRECTORY_SEPARATOR,$parts);

require_once $path . '.php';

}

En donde __autoload() es una de las mágicas funciones de PHP5. Si quieres usar las mismas clases en otros archivos php, debes incluir el archivo de la clase usando require_once o include_once para usar las funciones de esa clase.

Ahora crear el archivo messages.php, que tendrá todos los mensaje de éxito así como de error.

<?php
define('FIELDS_MISSING', 'Algunos campos faltan');
define('PASSWORD_NOT_MATCH', 'Las contraseñas no coinciden');
define('USER_REGISTRATION_FAIL', 'Registro de usuarios falló');
define('USER_REGISTRATION_SUCCESS', 'Registro de usuario se ha realizado correctamente , puede iniciar sesión ahora');


define('LOGIN_FIELDS_MISSING', 'Correo electrónico y contraseña faltan');
define('LOGIN_FAIL', 'Correo electrónico y/o Contraseña no coinciden');

define('PASSOWRD_CHANAGE_SUCCESS', 'Contraseña cambiada con éxito.');

<?php

define('FIELDS_MISSING', 'Algunos campos faltan');

define('PASSWORD_NOT_MATCH', 'Las contraseñas no coinciden');

define('USER_REGISTRATION_FAIL', 'Registro de usuarios falló');

define('USER_REGISTRATION_SUCCESS', 'Registro de usuario se ha realizado correctamente , puede iniciar sesión ahora');

define('LOGIN_FIELDS_MISSING', 'Correo electrónico y contraseña faltan');

define('LOGIN_FAIL', 'Correo electrónico y/o Contraseña no coinciden');

define('PASSOWRD_CHANAGE_SUCCESS', 'Contraseña cambiada con éxito.');

Ahora cree DBclass.php y crear DBclass en ella.

<?php
class Cl_DBclass
{
	/**
	 * @var $con llevará a cabo la conexión de base de datos
	 */
	public $con;
	
	/**
	 * Esto creará la conexión de base de datos
	 */
	public function __construct()
	{
		$this->con = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
		if( mysqli_connect_error()) echo "Falló conexión a MySQL: " . mysqli_connect_error();
	}
}

<?php

class Cl_DBclass

{

/**

* @var $con llevará a cabo la conexión de base de datos

public $con;

/**

* Esto creará la conexión de base de datos

public function __construct()

{

$this->con = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if( mysqli_connect_error()) echo "Falló conexión a MySQL: " . mysqli_connect_error();

}

Paso 3:

Crear archivo User.php, que va a manejar todos las funcionalidades lógicas. mientras va a guardar los datos en la base de datos que es valida los datos, una vez que pasen validación entonces guarda los datos enviados a la base de datos. Si falla la validación que entonces envía la Excepción de error.

<?php
class Cl_User
{
	/**
	 * @var va a contener la conexión de base de datos
	 */
	protected $_con;
	
	/**
	 * Inializar DBclass
	 */
	public function __construct()
	{
		$db = new Cl_DBclass();
		$this->_con = $db->con;
	}
	
	/**
	 * Registro de usuarios
	 * @param array $data
	  */
	public function registration( array $data )
	{
		if( !empty( $data ) ){
			
			// Trim todos los datos entrantes:
			$trimmed_data = array_map('trim', $data);
			
			
			
			// escapar de las variables para la seguridad
			$name = mysqli_real_escape_string( $this->_con, $trimmed_data['name'] );
			$password = mysqli_real_escape_string( $this->_con, $trimmed_data['password'] );
			$cpassword = mysqli_real_escape_string( $this->_con, $trimmed_data['confirm_password'] );
			
			
			// Verifica la direccion de correo electrónico:
			if (filter_var( $trimmed_data['email'], FILTER_VALIDATE_EMAIL)) {
				$email = mysqli_real_escape_string( $this->_con, $trimmed_data['email']);
			} else {
				throw new Exception( "Por favor, introduce una dirección de correo electrónico válida!" );
			}
			
			
			if((!$name) || (!$email) || (!$password) || (!$cpassword) ) {
				throw new Exception( FIELDS_MISSING );
			}
			if ($password !== $cpassword) {
				throw new Exception( PASSWORD_NOT_MATCH );
			}
			$password = md5( $password );
			$query = "INSERT INTO users (user_id, name, email, password, created) VALUES (NULL, '$name', '$email', '$password', CURRENT_TIMESTAMP)";
			if(mysqli_query($this->_con, $query)){
				mysqli_close($this->_con);
				return true;
			};
		} else{
			throw new Exception( USER_REGISTRATION_FAIL );
		}
	}
	/**
	 * Este metodo para iniciar sesión
	 * @param array $data
	 * @return retorna falso o verdadero
	 */
	public function login( array $data )
	{
		$_SESSION['logged_in'] = false;
		if( !empty( $data ) ){
			
			// Trim todos los datos entrantes:
			$trimmed_data = array_map('trim', $data);
			
			// escapar de las variables para la seguridad
			$email = mysqli_real_escape_string( $this->_con,  $trimmed_data['email'] );
			$password = mysqli_real_escape_string( $this->_con,  $trimmed_data['password'] );
				
			if((!$email) || (!$password) ) {
				throw new Exception( LOGIN_FIELDS_MISSING );
			}
			$password = md5( $password );
			$query = "SELECT user_id, name, email, created FROM users where email = '$email' and password = '$password' ";
			$result = mysqli_query($this->_con, $query);
			$data = mysqli_fetch_assoc($result);
			$count = mysqli_num_rows($result);
			mysqli_close($this->_con);
			if( $count == 1){
				$_SESSION = $data;
				$_SESSION['logged_in'] = true;
				return true;
			}else{
				throw new Exception( LOGIN_FAIL );
			}
		} else{
			throw new Exception( LOGIN_FIELDS_MISSING );
		}
	}
	
	/**
	 * El siguiente metodo para verificar los datos de la cuenta para el cambio de contraseña
	 * @param array $data
	 * @throws Exception
	 * @return boolean
	 */
	
	public function account( array $data )
	{
		if( !empty( $data ) ){
			// Trim todos los datos entrantes:
			$trimmed_data = array_map('trim', $data);
			
			// escapar de las variables para la seguridad
			$password = mysqli_real_escape_string( $this->_con, $trimmed_data['password'] );
			$cpassword = $trimmed_data['confirm_password'];
			$user_id = mysqli_real_escape_string( $this->_con, $trimmed_data['user_id'] );
			
			if((!$password) || (!$cpassword) ) {
				throw new Exception( FIELDS_MISSING );
			}
			if ($password !== $cpassword) {
				throw new Exception( PASSWORD_NOT_MATCH );
			}
			$password = md5( $password );
			$query = "UPDATE users SET password = '$password' WHERE user_id = '$user_id'";
			if(mysqli_query($this->_con, $query)){
				mysqli_close($this->_con);
				return true;
			}
		} else{
			throw new Exception( FIELDS_MISSING );
		}
	}
	
	/**
	 * Este metodo para cerrar las sesión
	 */
	public function logout()
	{
		session_unset();
		session_destroy();
		header('Location: index.php');
	}
	
	/**
	 * Esto restablece la contraseña actual y la nueva contraseña para enviar correo
	 * @param array $data
	 * @throws Exception
	 * @return boolean
	 */
	public function forgetPassword( array $data )
	{
		if( !empty( $data ) ){
			
			// escapar de las variables para la seguridad
			$email = mysqli_real_escape_string( $this->_con, trim( $data['email'] ) );
			
			if((!$email) ) {
				throw new Exception( FIELDS_MISSING );
			}
			$password = $this->randomPassword();
			$password1 = md5( $password );
			$query = "UPDATE users SET password = '$password1' WHERE email = '$email'";
			if(mysqli_query($this->_con, $query)){
				mysqli_close($this->_con);
				$to = $email;
				$subject = "Nueva solicitud de contraseña";
				$txt = "Su nueva contraseña ".$password;
				$headers = "From: admin@obedalvarado.pw" . "rn" .
						"CC: admin@obedalvarado.pw";
					
				mail($to,$subject,$txt,$headers);
				return true;
			}
		} else{
			throw new Exception( FIELDS_MISSING );
		}
	}
	
	/**
	 * Esto generará una contraseña aleatoria
	 * @return string
	 */
	
	private function randomPassword() {
		$alphabet = "abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ0123456789";
		$pass = array(); //recuerde que debe declarar $pass como un array
		$alphaLength = strlen($alphabet) - 1; //poner la longitud -1 en caché
		for ($i = 0; $i < 8; $i++) {
			$n = rand(0, $alphaLength);
			$pass[] = $alphabet[$n];
		}
		return implode($pass); //convertir el array en una cadena
	}
}

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

190

191

192

193

194

<?php

class Cl_User

{

/**

* @var va a contener la conexión de base de datos

protected $_con;

/**

* Inializar DBclass

public function __construct()

{

$db = new Cl_DBclass();

$this->_con = $db->con;

}

/**

* Registro de usuarios

* @param array $data

public function registration( array $data )

{

if( !empty( $data ) ){

// Trim todos los datos entrantes:

$trimmed_data = array_map('trim', $data);

// escapar de las variables para la seguridad

$name = mysqli_real_escape_string( $this->_con, $trimmed_data['name'] );

$password = mysqli_real_escape_string( $this->_con, $trimmed_data['password'] );

$cpassword = mysqli_real_escape_string( $this->_con, $trimmed_data['confirm_password'] );

// Verifica la direccion de correo electrónico:

if (filter_var( $trimmed_data['email'], FILTER_VALIDATE_EMAIL)) {

$email = mysqli_real_escape_string( $this->_con, $trimmed_data['email']);

} else {

throw new Exception( "Por favor, introduce una dirección de correo electrónico válida!" );

}

if((!$name) || (!$email) || (!$password) || (!$cpassword) ) {

throw new Exception( FIELDS_MISSING );

}

if ($password !== $cpassword) {

throw new Exception( PASSWORD_NOT_MATCH );

}

$password = md5( $password );

$query = "INSERT INTO users (user_id, name, email, password, created) VALUES (NULL, '$name', '$email', '$password', CURRENT_TIMESTAMP)";

if(mysqli_query($this->_con, $query)){

mysqli_close($this->_con);

return true;

};

} else{

throw new Exception( USER_REGISTRATION_FAIL );

}

/**

* Este metodo para iniciar sesión

* @param array $data

* @return retorna falso o verdadero

public function login( array $data )

{

$_SESSION['logged_in'] = false;

if( !empty( $data ) ){

// Trim todos los datos entrantes:

$trimmed_data = array_map('trim', $data);

// escapar de las variables para la seguridad

$email = mysqli_real_escape_string( $this->_con, $trimmed_data['email'] );

$password = mysqli_real_escape_string( $this->_con, $trimmed_data['password'] );

if((!$email) || (!$password) ) {

throw new Exception( LOGIN_FIELDS_MISSING );

}

$password = md5( $password );

$query = "SELECT user_id, name, email, created FROM users where email = '$email' and password = '$password' ";

$result = mysqli_query($this->_con, $query);

$data = mysqli_fetch_assoc($result);

$count = mysqli_num_rows($result);

mysqli_close($this->_con);

if( $count == 1){

$_SESSION = $data;

$_SESSION['logged_in'] = true;

return true;

}else{

throw new Exception( LOGIN_FAIL );

}

} else{

throw new Exception( LOGIN_FIELDS_MISSING );

}

/**

* El siguiente metodo para verificar los datos de la cuenta para el cambio de contraseña

* @param array $data

* @throws Exception

* @return boolean

public function account( array $data )

{

if( !empty( $data ) ){

// Trim todos los datos entrantes:

$trimmed_data = array_map('trim', $data);

// escapar de las variables para la seguridad

$password = mysqli_real_escape_string( $this->_con, $trimmed_data['password'] );

$cpassword = $trimmed_data['confirm_password'];

$user_id = mysqli_real_escape_string( $this->_con, $trimmed_data['user_id'] );

if((!$password) || (!$cpassword) ) {

throw new Exception( FIELDS_MISSING );

}

if ($password !== $cpassword) {

throw new Exception( PASSWORD_NOT_MATCH );

}

$password = md5( $password );

$query = "UPDATE users SET password = '$password' WHERE user_id = '$user_id'";

if(mysqli_query($this->_con, $query)){

mysqli_close($this->_con);

return true;

}

} else{

throw new Exception( FIELDS_MISSING );

}

/**

* Este metodo para cerrar las sesión

public function logout()

{

session_unset();

session_destroy();

header('Location: index.php');

}

/**

* Esto restablece la contraseña actual y la nueva contraseña para enviar correo

* @param array $data

* @throws Exception

* @return boolean

public function forgetPassword( array $data )

{

if( !empty( $data ) ){

// escapar de las variables para la seguridad

$email = mysqli_real_escape_string( $this->_con, trim( $data['email'] ) );

if((!$email) ) {

throw new Exception( FIELDS_MISSING );

}

$password = $this->randomPassword();

$password1 = md5( $password );

$query = "UPDATE users SET password = '$password1' WHERE email = '$email'";

if(mysqli_query($this->_con, $query)){

mysqli_close($this->_con);

$to = $email;

$subject = "Nueva solicitud de contraseña";

$txt = "Su nueva contraseña ".$password;

$headers = "From: admin@obedalvarado.pw" . "rn" .

"CC: admin@obedalvarado.pw";

mail($to,$subject,$txt,$headers);

return true;

}

} else{

throw new Exception( FIELDS_MISSING );

}

/**

* Esto generará una contraseña aleatoria

* @return string

private function randomPassword() {

$alphabet = "abcdefghijklmnopqrstuwxyzABCDEFGHIJKLMNOPQRSTUWXYZ0123456789";

$pass = array(); //recuerde que debe declarar $pass como un array

$alphaLength = strlen($alphabet) - 1; //poner la longitud -1 en caché

for ($i = 0; $i < 8; $i++) {

$n = rand(0, $alphaLength);

$pass[] = $alphabet[$n];

}

return implode($pass); //convertir el array en una cadena

}

Bueno esa sería la configuración básica para hacer funcionar el Script de Registro de Usuarios a la Base de Datos e Inicio de Sesión al Sistema.

Descargar archivos

Andres

Necesito de una ayudame Personal para mi tesis de la universidad porfa si esta a su alcanze en ayudarme mi correo: andresrjh@gmail.com
- Obed
  
  Como te puedo ayudar? En que tipo de proyecto necesitas asesoramiento?
Ariel Garcia

saludos, me gusto mucho este trabajo, aunque me gustaria que me asistiera en algo, descargue el archivo login.rar, lo descomprimi en wamp/www/login , creer la base de datos e hice las configuraciones de lugar para conectar a la base de datos, pero cuando trato de crear un nuevo usuario no hace nada, no inserta nuevos usuario a la tabla y no me presenta ningun error, tampoco puedo logearme… podrias ayudarme, gracias
Pingback: Formulario de inicio de sesión con PHP & MySQL - Sistemas Web()
Emiliano Pamont

Hola, descargué los archivos, y cuando intento cambiar la contraseña de un usuario desde forget_password.php me lanza ésto:

Warning: mail(): Failed to connect to mailserver at “localhost” port 25, verify your “SMTP” and “smtp_port” setting in php.ini or use ini_set() in G:MiauXampphtdocsloginClUser.php on line 171

Notice: Use of undefined constant PASSWORD_RESET_SUCCESS – assumed ‘PASSWORD_RESET_SUCCESS’ in G:MiauXampphtdocsloginforget_password.php on line 7

Cual es el problema?
- Obed
  
  La recuperación de la contraseña, no funciona en un servidor local. Ya que para ello se necesita que este configurado un servidor de correos “SMPT”, para que el sistema pueda enviar el email con los datos de la contraseña!
Jhon Bonilla

Buenas Noches sabes tengo el proyecto y presento dos errores, uno cuando registro un usuario y con su contraseña al momento de ver la bd me cambia la contraseña sola osea me pone una en ramdon porq? si el usuario ya puso su propia contraseña y el otro me presenta en el header.php me sale error en la linea 49 Strict standards: Only variables should be passed by reference in C:wamp7wwwlogintemplatesheader.php on line 49 me podrias ayudar por favor?
- jamarchi
  
  Todavia tienes este problema ?, el del header ?
  - Tulio Buelvas
    
    Al end() solo se le puede pasar variable por referencia prueba esto editando el archivo header.php por la linea 48 donde están las etiquetas de php y listo:
lorenzogzz

buen dia

me gusto mucho tu sistema de login , es una excelente pieza lo que tienes aqui y bien documentada para los novatos .
se agradece tu esfuerzo

quiero saber si puedieras indicar como cambiar el color de headers y footers , algun color algo mas oscuro , ya que cambie algunos valores y no me da efecto alguno

gracias por todo

saludos
- lorenzogzz
  
  se logro cambiar el color de navbar cargando archivo css personal en despues de la linea bootstrap.min.css
  link de referencia stackoverflow.com questions 24127521 change-bootstrap-navbar-background-color-and-font-color
Johan garcia peña

Buen dia, muy excelente el material y me funciona a la perfección.
mi pregunta seria si tienes la opción de eliminar o modificar usuarios registrados.

gracias
Leandro Barria

excelente amigo
Lenin Morales Rivera

No me gusta ser chismoso obed, pero tienes error 403 en este script login en la demostración
Centauro Blanco

error al visitar el demo ..
Forbidden

You don’t have permission to access /demo/login/ on this server.
Server unable to read htaccess file, denying access to be safe

Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.
- Obed
  
  Lo sentimos pero hemos deshabilitado el acceso a la demo, te invitamos a que descargues el código y lo pruebes en tu servidor local.
jamarchi

Hola, acabo de bjar este script y a la hora de crear la base de datos me da este error

Error

consulta SQL:

— ——————————————————–
—
— Table structure for table users
—
CREATE TABLE IF NOT EXISTS users (
user_id int( 10 ) unsigned NOT NULL AUTO_INCREMENT ,
name varchar( 50 ) NOT NULL ,
email varchar( 60 ) NOT NULL ,
password varchar( 60 ) NOT NULL ,
social_id varchar( 100 ) NOT NULL ,
picture varchar( 250 ) NOT NULL ,
created datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ,
PRIMARY KEY ( user_id ) ,
KEY email ( email ) ,
KEY login ( password )
) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT =1;

MySQL ha dicho: Documentación
#1067 – Invalid default value for ‘created’

Que podrá ser? GRacias
- jamarchi
  
  creo que ya lo arregle, cambie esto “datetime” por “timestamp”
jamarchi

Hola, de casualidad tendrás este login pero con foto de usuario ?
- jamarchi
  
  Alguna idea con esto ?
  - Obed
    
    Hola, por el momento no tengo un tutorial de login, pero si te puedo recomendar el siguiente proyecto: http://facturacionweb.site/blog/sistema-de-tickets-y-soporte-con-php-y-mysql/
    
    Dicho proyecto tiene el login con foto de perfil para los usuarios!
    - jamarchi
      
      Ah ok, excelente amigo… voy a chequearlo, muchas gracias
Jorge Luis Saraiva Ruas

Hola acabo de bajar el script instalarlo hay comunicacion con la base de datos per no registra usuario.
Que podria er ya revise user.php y no veo ningun error.

Blog

Suscríbete a nuestro boletín de noticias

Sobre Mi

Scripts exclusivos

Conectar

Blog

Sobre Mi

Scripts exclusivos

Conectar

Diseño Web Profesional El Curso Completo, Practico y desde 0

Aprende a crear cualquier sitio web adaptable a dispositivos móviles con Boostrap 4, el mejor framework de diseño web