Casi todas las API necesitan una capa o layer de autenticación, y hay muchas maneras de abordar ese problema, hoy vamos a implementar el token JWT en nuestra API Flask.

Cómo funciona la autenticación de la API

Puedes dividir un proceso de autenticación estándar en 5 pasos principales:

  1. El usuario escribe su nombre de usuario y contraseña en tu sitio web.
  2. El nombre de usuario y la contraseña se envían a la API de backend.
  3. La API busca cualquier registro en la tabla User que coincida con ambos parámetros al mismo tiempo (nombre de usuario y contraseña).
  4. Si se encuentra un usuario, genera un token para ese usuario y responde status_code=200 al front-end.
  5. El front-end utilizará ese token a partir de ahora para realizar cualquier solicitud futura.

Autentication workflow

☝ i no sabes lo que es un token, te recomiendo esta lectura.

¿Qué es JWT?

Hay muchas formas de crear tokens: Basic, Bearer, JWT, etc. Todas ellas son diferentes en su naturaleza, pero el resultado es la misma salida: Un hash (un gran token alfanumérico).

Tipo de tokenEjemplo
Token Básicoecff2099b95ed507a27a4717ec78965d529cc346
Token BearerYWxlc2FuY2hlenI6NzE0YmZhNDNlN2MzMTJiZTk5OWQwYWZlYTg5MTQ4ZTc=
Token JWTeyJhbGciOiJIUzI1NiIsInR5c.eyJzdWIiOFt2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpM

☝ Como puedes ver, los Tokens JWT son más grandes que los otros dos tipos de token.

JSON Web Token o JWT es un estándar abierto para crear tokens

Este estándar se ha vuelto bastante popular ya que es muy efectivo tanto para las Web Apps como las APIs de Google, donde después de la autenticación del usuario se hacen peticiones a la API.

El Token Web JSON es un tipo de token que incluye una estructura, que puede ser descifrada por el servidor que permite autenticar la identidad del usuario de esa aplicación.

¿Por qué usar JWT Token?

En pocas palabras: JWT es una alternativa increíble porque el Token básicoo Basic Token es demasiado simple y fácil de hackear y el Token Bearer es más difícil de mantener porque tienes que almacenar cada token en la base de datos.

Con los tokens JWT no necesitas una base de datos, el propio token contiene toda la información necesaria.

Autentication workflow

## Estructura del token JWT

Autentication workflow

Puedes observar que el string o cadena está dividida en tres secciones separadas por un (.). Cada sección tiene su significado: | Section name | | | -------------- | -------------------------------------------------------------------- | | HEADER | La primera parte almacena el tipo de token y el algoritmo de encriptación. | | PAYLOAD | La segunda parte tiene los datos que identifican al usuario: puede ser su ID, nombre de usuario, etc. | | SIGNATURE | Firma digital, que se genera con las dos secciones anteriores, y permite verificar si el contenido ha sido modificado. |

Implementación de JWT en la API de tu proyecto

Recomendamos encarecidamente el uso de la librería JWT extendida para implementar la autenticación JWT en tu API de Python Flask, el proceso se puede dividir en los siguientes pasos:

1) Incluir la librería JWT en la configuración de tu aplicación Flask

py from flaskjwtextended import JWTManager

ya debes tener esta línea en tu proyecto

no tienes que añadirla de nuevo

app = Flask(name)

Configura la extensión Flask-JWT-Extended

app.config["JWTSECRETKEY"] = "super-secret" # ¡Cambia las palabras "super-secret" por otra cosa! jwt = JWTManager(app)

2) Crear un endpoint para generar nuevos tokens

El endpoint debe ser un POST porque estás creando tokens (POST es para crear).

POST /token
Content-type: application/json
Body:
{
     "username": "alesanchezr",
     "password": "12341234"
}

Así es como podría verse el endpoint en Python:

from flask_jwt_extended import create_access_token
# Crea una ruta para autenticar a los usuarios y devolver el token JWT.
# La función create_access_token() se utiliza para generar el JWT.
@app.route("/token", methods=["POST"])
def create_token():
    username = request.json.get("username", None)
    password = request.json.get("password", None)
    # Consulta la base de datos por el nombre de usuario y la contraseña
    user = User.filter.query(username=username, password=password).first()
    si el User es None:
          # el usuario no se encontró en la base de datos
        return jsonify({"msg": "Bad username or password"}), 401
    
    # crea un nuevo token con el id de usuario dentro
    access_token = create_access_token(identity=user.id)
    return jsonify({ "token": access_token, "user_id": user.id })
   

3) Usar el decorador @jwt_required() en rutas privadas

Ahora... cualquier endpoint que requiera autorización (endpoints privados) debería usar el decorador @jwt_required().

Podrás recuperar la información del usuario autentificada (si es válida) usando la función get_jwt_identity.

from flask_jwt_extended import jwt_required, get_jwt_identity
# Protege una ruta con jwt_required, bloquea las peticiones
# sin un JWT válido presente.
@app.route("/protected", methods=["GET"])
@jwt_required()
def protected():
    # Accede a la identidad del usuario actual con get_jwt_identity
    current_user_id = get_jwt_identity()
    user = User.filter.get(current_user_id)
    
    return jsonify({"id": user.id, "username": user.username }), 200

Implementando JWT en tu proyecto Front-End

En el lado del front-end necesitamos dos pasos principales: Crear un nuevo token (también conocido como "login") y añadir el token a los headers cuando se obtenga cualquier otro endpoint privado.

Crear un nuevo token:

Basándonos en los endpoints que construimos anteriormente tenemos que POST /token con la información del nombre de usuario o username y la contraseña o password en el body de la petición.

const login = (username, password) => {
     fetch(`https://your_api.com/token`)
         .then(resp => {
              if(resp.ok) resp.json()
              else if(resp.status === 401){
                    console.log("Invalid credentials")
              }
              else if(resp.status === 400){
                 console.log("Invalid email or password format")
              }else throw Error('Uknon error')
         })
         .then(data => {
             // guarda tu token en el localStorage
             localStorage.setItem("jwt-token", data.token);
         })
         .catch(error => console.error("There has been an uknown error", error))
}

Obteniendo cualquier información privada

Supongamos que estoy usando la aplicación de front-end y acabo de iniciar sesión, pero ahora quiero obtener algún endpoint privado o protegido:

// asumiendo que "/protected" es un endpoint privado
const getMyTasks = (username, password) => {
     // recupera el token de localStorage
     const token = localStorage.getItem('jwt-token');

     fetch(`https://your_api.com/protected`, {
        method: 'GET',
        headers: { 'Authorization': 'Bearer '+token } // ⬅ authorization token
     })
         .then(resp => {
              if(resp.ok) resp.json();
              else if(resp.status === 403){
                   console.log("Missing or invalid token");
              }
              else{
                   throw Error('Uknon error');
              }
         })
         .then(data => {
             // éxito
             console.log("This is the data your requested", data);
         })
         .catch(error => console.error("There has been an uknown error", error));
}

¡Eso es todo! Como puedes ver es muy sencillo integrar JWT en tu aplicación usando Flask/Python, sólo tres pasos en el backend y dos pasos en el front-ent. Ante cualquier duda puedes contactarme en twitter @alesanchezr o utilizar el canal #public-support en la comunidad Slack de 4Geeks Academy.