Con este tutorial aprenderás sencillamente a implementar en tu servidor local un inicio de sesión con Node.js, Express y MySQL, con el que podrás autenticar el acceso de tus usuarios finales desde el registro en base de datos.
Cabe agregar que esta aplicación es totalmente básica, solo muestra una landing page donde poner usuario y contraseña; y según las validaciones correspondientes se confirma si el usuario puede ingresar a una nueva página, a un home o no.
Si el usuario marca la URL con el home sin validar su usuario y contraseña, le aparecerá un mensaje de usuario o contraseña inválidos, pero en caso de que haya ingresado las credenciales correctamente, relacionadas con la información persistente en la base de datos, entonces, será redireccionado al home, con un mensaje de bienvenida.
Node.js es un potente gestor para funciones de servidor que a base de javascript, es muy popular actualmente, se dice de node.js que es el desarrollo del futuro y por esto es muy importante aprender de esta tecnología.
Puesta a punto del sistema de inicio de sesión con Node.js Express y MySQL
Lo primero es instalar NPM, para poder acceder a la tecnología, instalar las librerías necesarias y activar el servidor para ejecutar la aplicación.
Descarga e Instalación de node.js
El proceso de descarga he instalación no lo abordaré en el presente tutorial, aunque cabe agregar que es bien sencillo es solo acceder a la URL a continuación y realizar todos los procesos por defecto que apliquen para la instalación en tu ordenador, entonces el siguiente es el enlace de descarga de nodejs:
https://nodejs.org/es/download/
Descarga e Instalación de Visual Studio Code
Posterior a la descarga e instalación de nodejs, te recomiendo la instalación de Visual Studio Code que es el editor de código más popular del mundo, esta aplicación la puedes descargar en el enlace a continuación:
https://code.visualstudio.com/download
Descarga he Instalación de XAMPP
Es necesario instalar XAMPP por el servidor de la base de la base de datos lo ejecutaremos desde XAMPP, con phpMyAdmin y MariaDB.
El proceso de la descarga e Instalación tampoco lo abordaré porqué es muy sencillo es cuestión de acceder al siguiente enlace y darle siguiente, siguiente a todas la opciones que te plantea el instalador de XAMPP, el siguiente es el enlace de descarga de XAMPP:
https://www.apachefriends.org/es/download.html
Instalación de Express y MySQL
Express es una infraestructura de aplicaciones web Node.js mínima y flexible que proporciona un conjunto sólido de características para las aplicaciones web y móviles.
Para descargar he instalar Express en el proyecto de inicio de sesión con Node.js Express y MySQL vamos a utilizar la consola desde Visual Studio Code.
Desde VS Code, pulsamos en File, Open Folder y nos vamos donde vayamos a ubicar el proyecto, en mi caso la carpeta que elegí fue login-nodejs.
Ya ubicados en este punto pulsamos en View, Terminal y en la parte inferior de VS Code nos aparecerá una pantalla negra, donde podremos ejecutar comandos ya ubicados desde terminal en la carpeta del proyecto.
Ahora desde terminal copio y pego el siguiente comando:
npm install express --saveDespués instalamos Express Session con la siguiente línea de comandos:
npm install express-session --savePor último instalo una librería de MySQL para Nodejs con el siguiente script:
npm install mysql --saveYa en este punto desde consola ya puedo iniciar formalmente un proyecto npm, con el siguiente script:
npm initLa consola me va a hacer ciertas preguntas, en el nombre del package name, pongo login después doy enter seguidamente hasta que me pida el entry point, en esta instancia escribo login.js
Diseño del CSS para el formulario del sistema de login en nodejs
Debo crear una carpeta llamada static dentro del proyecto y en esta carpeta crear un documento llamado style.css.
El siguiente es el código con el que se ajustaron los estilos de la aplicación:
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
}
body {
background-color: #fc7d1c;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login a {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #1984bc;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #1984bc;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #1984bc;
transition: background-color 0.2s;
}Formulario HTML de Login
Creación del archivo login.html donde estará el formulario donde el usuario final va a ingresar sus credenciales de acceso. Este archivo se crea sobre la carpeta raíz del proyecto, el siguiente es el código que lleva el Formulario:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>ConfiguroWeb</title>
<!-- the form awesome library is used to add icons to our form -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<!-- include the stylesheet file -->
<link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="login">
<h1>Login | <a href="https://configuroweb.com/">ConfiguroWeb</a></h1>
<form action="/auth" method="post">
<label for="username">
<!-- font awesome icon -->
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Usuario" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Contraseña" id="password" required>
<input type="submit" value="Ingresar">
</form>
</div>
</body>
</html>Creación de la lógica del Inicio de sesión con Node.js Express y MySQL en el archivo login.js
const mysql = require('mysql');
const express = require('express');
const session = require('express-session');
const path = require('path');
const connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'login-socket'
});
const app = express();
app.use(session({
secret: 'secret',
resave: true,
saveUninitialized: true
}));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'static')));
// http://localhost:3000/
app.get('/', function(request, response) {
// Render login template
response.sendFile(path.join(__dirname + '/login.html'));
});
// http://localhost:3000/auth
app.post('/auth', function(request, response) {
// Capture the input fields
let username = request.body.username;
let password = request.body.password;
// Ensure the input fields exists and are not empty
if (username && password) {
// Execute SQL query that'll select the account from the database based on the specified username and password
connection.query('SELECT * FROM accounts WHERE username = ? AND password = ?', [username, password], function(error, results, fields) {
// If there is an issue with the query, output the error
if (error) throw error;
// If the account exists
if (results.length > 0) {
// Authenticate the user
request.session.loggedin = true;
request.session.username = username;
// Redirect to home page
response.redirect('/home');
} else {
response.send('Usuario y/o Contraseña Incorrecta');
}
response.end();
});
} else {
response.send('Por favor ingresa Usuario y Contraseña!');
response.end();
}
});
// http://localhost:3000/home
app.get('/home', function(request, response) {
// If the user is loggedin
if (request.session.loggedin) {
// Output username
response.send('Te has logueado satisfactoriamente:, ' + request.session.username + '!');
} else {
// Not logged in
response.send('¡Inicia sesión para ver esta página!');
}
response.end();
});
app.listen(3000);Creación de la base de datos con el usuario de acceso
El nombre de la base de datos es login-socket, para el proceso de creación de la base de datos, debes acceder a XAMPP y activar el servicio de Apache y MySQL.
Después se accede a la siguiente URL:
http://localhost/phpmyadmin/
Se crea la base de datos con el nombre login-socket, se pulsa en el apartado SQL y se inserta el siguiente código:
-- phpMyAdmin SQL Dump
-- version 5.1.1
-- https://www.phpmyadmin.net/
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 09-05-2022 a las 17:18:44
-- Versión del servidor: 10.4.21-MariaDB
-- Versión de PHP: 8.0.11
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Base de datos: `login-socket`
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `accounts`
--
CREATE TABLE `accounts` (
`id` int(11) NOT NULL,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Volcado de datos para la tabla `accounts`
--
INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES
(1, 'configuroweb', '1234abcd..', 'hola@configuroweb.com');
--
-- Índices para tablas volcadas
--
--
-- Indices de la tabla `accounts`
--
ALTER TABLE `accounts`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT de las tablas volcadas
--
--
-- AUTO_INCREMENT de la tabla `accounts`
--
ALTER TABLE `accounts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Activación del servidor nodejs desde consola
En este punto desde la consola, pego el siguiente script y este habilitará la URL http://localhost:3000/ para la ejecución de la aplicación:
node login.jsSi no te muestra desde consola el sistema ningún error solo tendrás que acceder a la siguiente URL y ya podrás probar la aplicación:
http://localhost:3000/
El único usuario de acceso es configuroweb y la contraseña es 1234abcd.. como es lo habitual.
Descarga del sistema de Login en Nodejs
Puedes descargar la aplicación en el siguiente enlace de GitHub
Cualquier duda quedo al pendiente, si requieres más aplicaciones PHP, en Python o JavaScript te recomiendo te suscribas a mi contenido en Youtube y estés al pendiente de cualquier cambio, que vaya haciendo.
