DEV Community

Cover image for ** Autenticación en Aplicaciones Web: Explicado al estilo de Beavis & Butthead **🔐
Orli Dun
Orli Dun

Posted on

** Autenticación en Aplicaciones Web: Explicado al estilo de Beavis & Butthead **🔐

¡Hola Chiquis! 👋🏻 ¿Listos para un viaje al mundo de la autenticación web? ️En este universo digital donde nuestras vidas se desarrollan online, la seguridad de nuestra información es crucial. Es aquí donde entra en escena la autenticación web, la llave maestra que protege nuestras cuentas y datos de los hackers malvados.

Image description

¿Imaginan a Beavis & Butthead entrando a un sitio web? 🔑 ¡Sería un desastre total! Sin una autenticación adecuada, cualquiera podría acceder a sus cuentas y causar estragos.

Por eso, hoy vamos a convertirnos en Beavis & Butthead expertos en seguridad web, aprendiendo sobre los diferentes métodos de autenticación de una manera divertida y fácil de entender.

Desde las contraseñas clásicas hasta la autenticación de dos factores, descubriremos cómo protegernos de los intrusos y mantener nuestra información personal a salvo. ️

¿Qué es la Autenticación? 🤔
La autenticación es como cuando Butthead intenta entrar a mi casa. Yo no le abro la puerta hasta que no se identifica correctamente. En el mundo de las aplicaciones web, la autenticación es el proceso de verificar la identidad de un usuario.

Métodos de Autenticación 🛡️
Imagina que Beavis y Butthead quieren entrar a un concierto de rock, pero antes de poder entrar, necesitan pasar por el guardia de seguridad (que en este caso, sería el servidor de la aplicación web). El guardia les pide ver sus boletos (las credenciales de autenticación).

Image description

Beavis: Eh, Butthead, ¿dónde está tu boleto? Butthead: Uh, no sé, Beavis. ¿No podemos simplemente colarnos?

Aquí es donde la autenticación entra en juego. En el mundo de las aplicaciones web, "colarse" no es una opción. Necesitas un "boleto" válido para entrar, lo que significa que debes autenticarte correctamente.

Beavis: Uh, espera, encontré este papelito que dice "cookie". ¿Sirve? Butthead: No, dingo. Eso es una cookie de sesión. Es como un sello en la mano que te da el guardia cuando ya mostraste tu boleto una vez. Te permite entrar y salir del concierto sin tener que mostrar tu boleto cada vez.

La cookie de sesión 🍪 es una forma de autenticación donde el servidor reconoce a Beavis y Butthead (o al usuario) durante la duración de su visita. Pero primero, necesitan mostrar su boleto legítimo, es decir, su nombre de usuario y contraseña.

Beavis: Ah, ya veo. Entonces, ¿cómo nos aseguramos de que nadie más use nuestro boleto? Butthead: Bueno, Beavis, eso se llama autenticación de dos factores. Es como si el guardia te pidiera tu boleto y luego te hiciera una pregunta secreta, como cuál es tu banda de rock favorita.

La autenticación de dos factores 🔐 añade una capa extra de seguridad. Incluso si alguien consigue tu "boleto" (tu contraseña), aún necesitarán responder la "pregunta secreta" (como un código enviado a tu teléfono) para poder entrar.

Beavis: ¡Genial! Entonces, ¿estamos listos para rockear? Butthead: Sí, Beavis. Ahora que estamos autenticados, ¡podemos entrar al concierto y disfrutar del show!

Autenticación Basada en Cookies 🍪
La autenticación basada en cookies es como cuando Butthead viene a mi casa y yo le doy una galleta especial que solo él puede comer. Cada vez que vuelve, me muestra la galleta para demostrar que es él.

Autenticación Usando Tokens 🎟️
La autenticación usando tokens es como cuando voy a un concierto de rock y me dan una pulsera especial. Esa pulsera me permite entrar y salir del concierto cuantas veces quiera.

Image description

Acceso de Terceros (OAuth, Token API) 🔑
El acceso de terceros es como cuando le presto a Butthead mi tarjeta de biblioteca para que pueda sacar libros. La biblioteca confía en mi tarjeta, por lo que Butthead puede sacar libros en mi nombre.

¿Cómo Funciona la Autenticación en una Aplicación Web? 🌐
Cuando Butthead quiere entrar a mi casa (la aplicación web), tiene que tocar la puerta (hacer una solicitud de inicio de sesión). Yo le pregunto quién es (el servidor verifica las credenciales) y si responde correctamente, le permito entrar (el servidor crea una sesión y la mantiene en una cookie o token). Cada vez que Butthead quiere hacer algo en mi casa, tiene que mostrarme su galleta o pulsera (el cliente envía la cookie o token con cada solicitud). Cuando Butthead se va de mi casa, tira su galleta o pulsera (la sesión se cierra cuando el usuario cierra la sesión).

Hablemos del cifrado en el contexto de las aplicaciones web 👦
El cifrado es como un código secreto que Beavis y Butthead podrían usar para comunicarse sin que nadie más entienda lo que están diciendo. En las aplicaciones web, el cifrado se utiliza para proteger los datos y mantenerlos seguros mientras se transmiten a través de Internet.

Hay dos tipos principales de cifrado que se utilizan en las aplicaciones web:

  • Cifrado de datos en tránsito: Este tipo de cifrado protege los datos mientras se transmiten de un lugar a otro, como de tu computadora a un servidor web. Es como si Beavis y Butthead hablaran en su código secreto mientras están en un chat en línea, para que nadie más pueda entender lo que están diciendo.
  • Cifrado de datos en reposo: Este tipo de cifrado protege los datos almacenados en una base de datos o en otro tipo de almacenamiento. Es como si Beavis y Butthead escribieran notas en su código secreto y las guardaran en un cajón, para que nadie más pueda leerlas.

Para cifrar los datos en una aplicación web, puedes usar algoritmos de cifrado como el Estándar de Cifrado Avanzado (AES) con una clave que idealmente tiene 256 bits. También puedes usar TLS versión 1.3 con cifrados fuertes donde sea posible para asegurar los datos durante la transmisión.

Es importante recordar que el cifrado es solo una parte de la seguridad de una aplicación web. También debes considerar otras prácticas de seguridad, como la validación de entrada y el control de acceso. 😊

Image description

Autenticación Web al Estilo Beavis & Butthead 👦🏼
¡Entendido! 🤘🏻 Vamos a profundizar en la autenticación web con un ejemplo de código, manteniendo la analogía de Beavis & Butthead. Imagina que estamos implementando un sistema de autenticación para una aplicación web que usa tokens JWT (JSON Web Tokens). Aquí tienes un ejemplo básico en Node.js utilizando la biblioteca jsonwebtoken:
JavaScript

const jwt = require('jsonwebtoken');
const express = require('express');
const app = express();
// Tu "lista de invitados" con las credenciales de los usuarios
const usuarios = {
  'Beavis': 'password123',
  'Butthead': 'hehehe'
};
// Middleware para autenticar a Beavis y Butthead
app.post('/login', (req, res) => {
  const { usuario, contraseña } = req.body;

  // Verificamos si el usuario está en la lista y si la contraseña coincide
  if (usuarios[usuario] && usuarios[usuario] === contraseña) {
    // Autenticación exitosa, creamos el "boleto" (JWT)
    const token = jwt.sign({ sub: usuario }, 'tuSuperSecreto', { expiresIn: '1h' });

    // Respondemos con el "sello" (JWT)
    res.json({ mensaje: '¡Autenticación exitosa, dude!', token });
  } else {
    // Autenticación fallida
    res.status(401).json({ mensaje: 'Credenciales inválidas, bunghole.' });
  }
});
// Middleware para verificar el "sello" (JWT) en cada solicitud
const verificarToken = (req, res, next) => {
  const token = req.headers['authorization'];

  if (!token) {
    return res.status(403).json({ mensaje: 'Se requiere un token, dillweed.' });
  }

  jwt.verify(token, 'tuSuperSecreto', (err, decoded) => {
    if (err) {
      return res.status(500).json({ mensaje: 'Falló la verificación del token, fartknocker.' });
    }

    // Token verificado, procedemos
    req.usuario = decoded.sub;
    next();
  });
};
// Ruta protegida, solo accesible con un token válido
app.get('/concierto', verificarToken, (req, res) => {
  res.json({ mensaje: `Bienvenido al concierto, ${req.usuario}. ¡Vamos a rockear!` });
});
// Iniciamos el servidor
app.listen(3000, () => {
  console.log('Servidor escuchando en el puerto 3000...');
});
Enter fullscreen mode Exit fullscreen mode

Este código simula un proceso de autenticación donde Beavis y Butthead🎸 intentan acceder a un área protegida de una aplicación web (el concierto). Primero, deben "loguearse" para obtener un token JWT, que actúa como su boleto para las siguientes solicitudes. Luego, cada vez que intenten acceder a la ruta protegida, deben presentar su token para verificar su identidad.

Recuerda que este es un ejemplo simplificado y que en una aplicación real deberías almacenar las contraseñas de forma segura, manejar errores de forma más robusta y utilizar HTTPS para proteger la información transmitida.🕹️

Image description

Aquí tienes otro ejemplo de autenticación, esta vez usando OAuth 2.0 con Beavis & Butthead, implementado en Python con la biblioteca Flask y requests-oauthlib:
Python

from flask import Flask, redirect, request, session
from requests_oauthlib import OAuth2Session
app = Flask(__name__)
app.secret_key = 'supersecreto'
# Configuración del cliente OAuth
CLIENT_ID = 'tu_client_id'
CLIENT_SECRET = 'tu_client_secret'
AUTHORIZATION_BASE_URL = 'https://proveedor-oauth.com/auth'
TOKEN_URL = 'https://proveedor-oauth.com/token'
# Beavis y Butthead quieren acceder a su perfil de rockero
@app.route('/login')
def login():
    # Iniciamos el flujo de OAuth
    oauth = OAuth2Session(CLIENT_ID)
    authorization_url, state = oauth.authorization_url(AUTHORIZATION_BASE_URL)
    # Guardamos el estado en la sesión para la verificación posterior
    session['oauth_state'] = state
    return redirect(authorization_url)
# El proveedor OAuth redirige aquí después de la autenticación
@app.route('/callback')
def callback():
    # Obtenemos el token de acceso del proveedor OAuth
    oauth = OAuth2Session(CLIENT_ID, state=session['oauth_state'])
    token = oauth.fetch_token(TOKEN_URL, client_secret=CLIENT_SECRET,
                              authorization_response=request.url)
    # Guardamos el token en la sesión y redirigimos a la página de perfil
    session['oauth_token'] = token
    return redirect('/perfil')
# Página de perfil protegida, requiere autenticación
@app.route('/perfil')
def perfil():
    # Verificamos que el token esté en la sesión
    if 'oauth_token' not in session:
        return redirect('/login')
    # Obtenemos los datos del perfil del usuario autenticado
    oauth = OAuth2Session(CLIENT_ID, token=session['oauth_token'])
    perfil = oauth.get('https://proveedor-oauth.com/perfil').json()
    return f"Bienvenido, {perfil['nombre']}. ¡Estás listo para rockear!"
if __name__ == '__main__':
    app.run(debug=True)
Enter fullscreen mode Exit fullscreen mode

En este ejemplo, Beavis & Butthead están intentando acceder a un perfil de rockero en una aplicación web. Utilizan OAuth 2.0, un protocolo estándar para la autorización, que les permite conceder acceso a su información sin compartir sus credenciales de acceso.

Beavis: Eh, Butthead, ¿qué es este rollo de OAuth? Butthead: Es como cuando le pides a alguien que hable con el guardia por ti, para que no tengas que darle tu boleto.

Cuando Beavis & Butthead 👨🏼‍🎤 visitan la ruta /login, se inicia el flujo de OAuth y son redirigidos al proveedor de OAuth para autenticarse. Una vez que se autentican, el proveedor los redirige de vuelta a la aplicación con un código que se intercambia por un token de acceso. Este token les permite acceder a la ruta /perfil sin tener que volver a autenticarse.

Espero que este ejemplo te haya ayudado a comprender mejor cómo funciona la autenticación con OAuth 2.0.

Lecciones aprendidas 👨🏻‍🏫

  • La autenticación web es importante para proteger tu información personal.
  • Los nombres de usuario y contraseñas deben ser fuertes para que nadie pueda adivinarlos.
  • Hay otras formas de autenticación web, como la autenticación de dos factores, que son aún más seguras.
  • Es importante crear contraseñas diferentes para cada sitio web o aplicación que uses.

¡Y eso es todo! La autenticación en las aplicaciones web es tan simple como eso. Recuerda, siempre debes proteger tus galletas y pulseras, ¡nunca sabes quién puede intentar robarlas! 🤘

🚀 ¿Te ha gustado? Comparte tu opinión.
Artículo completo, visita: https://lnkd.in/ewtCN2Mn
https://lnkd.in/eAjM_Smy 👩‍💻 https://lnkd.in/eKvu-BHe 
https://dev.to/orlidev ¡No te lo pierdas!

Referencias: 
Imágenes creadas con: Copilot (microsoft.com)

PorUnMillonDeAmigos #LinkedIn #Hiring #DesarrolloDeSoftware #Programacion #Networking #Tecnologia #Empleo #Autentication

Image description

Image description

Top comments (0)