api - freeCodeCamp.org

Como ocultar las llaves API en aplicaciones frontend usando Netlify Functions

Israel Palma — Fri, 24 Nov 2023 18:00:00 +0000

Artículo original: How to Hide API Keys in Frontend Apps using Netlify Functions

Netlify es una plataforma muy popular para desarrollo web que facilita la compilación, despliegue y administración de sitios web.

Puedes usar Netlify como hosting para tus sitios y te ayuda a editarlos y publicar los cambios que realices. También te brinda características adicionales como seguridad, servicios de autenticación y autorización de usuarios y más.

Esta guía se enfoca en mostrarte como configurar una función serverless en Netlify para ocultar las API keys de la aplicación del lado del cliente.

Para esta lección crearás un motor de búsqueda de imágenes y lo desplegarás en Netlify, que además realizará llamadas a la API de Pixabay usando funciones serverless.

Este es el mismo proceso para cualquier otra aplicación front-end (cliente) elaborada con JavaScript, con librerías JavaScript o frameworks JS como ReactJS, NextJS, VueJS, Angular, etc.

Prerrequisitos

Para seguir los pasos en este tutorial deberás contar con lo siguiente:

Una cuenta en Netlify (regístrate aquí)
Entendimiento básico de APIs RESTFUL, funciones Lambda y conceptos de asincronía (async/await).

El demo terminado lo puedes encontrar en la rama principal de GitHub o en este enlace: https://netlify-func-demo.netlify.app.

¿Qué es una función Netlify?

Una función Netlify es una función serverless o lambda cuyo acceso es provisto por Netlify. Se usan para desplegar código serverless o lógica de "servidor" (back-end) pero sin la necesidad de realmente administrar un servidor dedicado.

El propósito de una función Netlify es manejar código con base en eventos (event-driven) y enviar solicitudes HTTP que devuelvan una respuesta en formato JSON.

"Las funciones serverless, llamadas comercialmente "funciones Netlify" por ejecutarse en la plataforma de Netlify, son una manera de desplegar código del lado del servidor en forma de API endpoints" - Documentación Netlify

La función accede de manera segura el entorno de las variables en segundo plano ("tras bamablinas") mediante una función lambda de Amazon Web Services (AWS).

Las credenciales secretas como los tokens de acceso o claves API que se ocultan sólo usando variables de entorno son menos seguras. Esto se debe a que pueden ser fácilmente obtenidas usando las "Developer Tools" (herramientas de desarrollo) a traves de la API "fetch request" del navegador.

Las claves API, si son interceptadas pueden ser mal usadas por actores maliciosos lo que podría afectar a tu aplicación o incrementar tus costos si esta depende de un servicio API de paga.

Otras funciones serverless utilizadas para ejecutar código sin tener que manejar servidores incluyen: las AWS Lambda Functions, Azure Functions y Google Cloud Functions.

Cómo configurar una aplicación cliente

Cómo clonar la aplicación demo

Para empezar con este tutorial puedes clonar la "aplicación motor de búsqueda de fotos de stock" desde su repositorio GitHub. Mira la previsualización en Netlify en https://netlify-func-demo.netlify.app.

El primer paso es clonar el repositorio:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git

Paso siguiente, cambia (ingresa) al directorio netlify-serverless-functions-demo.

 cd netlify-serverless-functions-demo

Luego tendrás que instalar las dependencias.

npm install
#OR 
yarn add

Ahora ejecuta el servidor de desarrollo. Ejecuta el siguiente comando para este propósito:

netlify dev

La aplicación estará disponible en: https://localhost:8888.

Alternativamente puedes omitir los pasos anteriores si quieres crear la aplicación desde cero. En el próximo paso crearás una aplicación JavaScript para la búsqueda de fotos stock.

Cómo construir la aplicación demo usando JavaScript

El primer paso es configurar la aplicación front-end (cliente). Abre tu editor de código favorito como, por ejemplo: VS Code.

A continuación, crea la carpeta dist y dentro crea el archivo index.html. Copia y pega ahí el siguiente código:



  
    
    
    
    
    Stock Photos Search Engine
  
  
    
      
        Search For Stock Photos

En el mismo directorio dist agrega la siguiente hoja de estilos en un archivo llamado style.css:

/* dist/style.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #222;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  min-width: 100vw;
  width: 100%;
  height: 100%;
}

h1 {
  padding-bottom: 20px;
}

.search-section {
  display: inline;
  text-align: center;
  min-width: 310px;
}

.search,
.search-btn {
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  padding: 15px;
  height: 50px;
}

.search {
  background-color: #d1f3bf;
  color: #222;
  min-width: 225px;
}

.search-btn {
  background-color: #04ab04;
  color: #f6f6f6;
  cursor: pointer;
  margin-left: 5px;
  min-width: 80px;
  transition: all 0.3s ease-in-out;
}

.search-btn:hover {
  background-color: #2dc22d;
}

.photo-wrapper {
  display: flex;
  gap: 15px;
  margin: 30px;
}

.photo-wrapper img {
  width: 200px;
}

Crea una cuenta gratuita en Pixabay

El primer paso para utilizar la Pixabay API es darse de alta una cuenta con tu correo electrónico.

Pixabay API key section

Como se muestra en la imagen de arriba, tus llaves API las puedes encontrar debajo de la seccion de parámetros en la página oficial de documentación de Pixabay API.

Crea una variable de entorno

Las variables de entorno (comúnmente abreviadas como "env") son combinaciones pares de clave/valor que pueden afectar el comportamiento y los procesos de un sistema operativo o aplicación.

Usar variables de entorno se recomienda para configurar servicios de terceros y sus credenciales durante el desarrollo.

Instala dotenv

Una vez que haya completado la creación de tu cuenta en Pixabay, abre tu terminal e instala el paquete dotenv. Esto permitirá que tu aplicación pueda leer las variables de entorno del archivo .env.

npm install dotenv
#O bien
yarn add -D dotenv

Usando tu terminal o línea de comandos

En el próximo paso podrás guardar la clave API en el archivo .env.

Crea el archivo .env

En la raíz del directorio de tu aplicación crea el archivo .env y almacena las llaves (keys) API copiadas de tu perfil Pixabay.

PIXABAY_API_KEY=123456-7890

Donde PIXABAY_API_KEY=123456-7890 representa la llave y su valor asociado.

Nota: Reemplaza este par clave/valor con el valor apropiado.

Crea el archivo .gitignore

Para evitar incluir archivos y valores sensibles como node_modules y secret keys en cada commit en repositorios públicos, crea el archivo .gitignore en la misma carpeta raíz del proyecto y agrega lo siguiente:

node_modules
.env
.netlify

.gitignore

La carpeta .netlify que contiene funciones serverless compiladas y otros archivos serán excluidos cuando el proyecto se empuje a GitHub o a cualquier otro sistema de control de versiones.

Crea una función get request

Ahora deberás añadir la lógica para realizar la petición fetch en el archivo script.js. Ajustaremos la lógica más adelante usando funciones Netlify.

/* dist/script.js */
const dotenv = require("dotenv").config();

const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
  }
});

async function getPhoto(keyword) {
  const apiKey = PIXABAY_API_KEY;
  let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    let imageURL = data.hits;

    imageURL.forEach((result) => {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${result.webformatURL}`);
      photoWrapper.appendChild(imageElement);
    });
  } catch (error) {
    alert(error);
  }
}

Nota: Como he mencionado anteriormente, si se publica este repositorio en GitHub, podremos acceder a la clave API en el "lado del cliente" desde un navegador, aunque hayamos excluido el archivo .env, mas adelante veremos como.

Para ilustrar esto, selecciona la rama testing del repositorio de esta aplicación. La previsualización del sitio mostrara los siguientes errores de referencia (Reference Errors) en la consola del navegador:

Uncaught ReferenceError: require is not defined
Uncaught ReferenceError: require is not defined at getPhotos
Uncaught ReferenceError: process is not defined at getPhotos

Esto se debe a que no hay manera de vincular con las variables de entorno especificadas en el archivo .env, ya que este no se envió en el commit al repositorio público en GitHub.

En el siguiente paso, selecciona y clona la rama testing en tu máquina de forma local con los siguientes comandos:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git
cd netlify-serveless-functions-demo
npm install
netlify dev

La aplicación estará disponible en tu navegador en la dirección localhost:8888.

Ahora abre las herramientas para desarrolladores (Developer Tools) o haz clic derecho y selecciona inspeccionar. O puedes presionar la tecla F12. Luego vea la pestaña Network y haz clic en la URL de la petición del archivo getPhotos.js.

Clave API mostrada en la pestaña Red (Network) en las herramientas de Desarrollo

Ahora deberías poder ver la clave API expuesta públicamente en la sección de encabezados de la pestaña Network donde fue devuelta con los datos de la respuesta en tu navegador.

Esto es un problema de seguridad ya que la pestaña Network en las herramientas de desarrollo típicamente permite mostrar información tal como la URL de la petición, el estado y los datos de la respuesta.

Clave de la API devuelta como dato de respuesta y expuesto en el URL de la petición

En la siguiente sección encontraras la manera segura de ocultas la clave API utilizando las funciones Netlify.

Cómo empezar a usar Netlify Functions

Primero, necesitarás iniciar sesión en tu terminal e instalar la Netlify CLI y Lambda como dependencias de desarrollo. Puedes hacerlo al ejecutar este comando:

npm install -g netlify-cli netlify-lambda
#OR 
yarn add -D netlify-cli netlify-lambda --save-dev

Agrega los comandos personalizados build y dev en package.json

Estos comandos, crearán e iniciarán la aplicación en el servidor y también la ejecutarán en el nevegador. Aquí puedes ver un ejemplo de como podrías agregar este script con comandos en el archivo package.json:

"scripts": {
   "build": "npm run-script",
   "dev": "netlify dev"
 }

Instala Axios

Usaremos el método axios.get porque esta función de Node difiere del método fetch en que este último está pensado para correr en el navegador.

Para instalar Axios, abre tu terminal e ingresa el comando:

npm install axios
#OR
yarn add -D axios

En este caso vamos a trabajar nuestra aplicación solo con JavaScript puro (vanilla JS), es decir sin usar librerías o marcos de trabajo para nuestro frontend, por lo que deberás importar axios de la siguiente manera:

const axios = require("axios");

Para cuando se usan librerias como React, debes importar asi:

import axios from "axios";

Crea una función serverless

En la raíz del proyecto, crea una carpeta llamada netlify y a su vez dentro de este crea otra carpeta functions. En esta carpeta functions crea un archivo llamado getPhotos.js.

Crearás una función serverless en el archivo getPhotos. Esto ocultará efectivamente las llaves API cuando traigamos las imágenes desde la API de Pixabay.

//netlify/functions/getPhotos.js 
require("dotenv").config();

const axios = require("axios");

exports.handler = async (event, context) => {
  try {
    const { keyword } = event.queryStringParameters;
    let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

    let imageURL = response.data.hits;

    return {
      statusCode: 200,
      body: JSON.stringify({ imageURL }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error }),
    };
  }
};

Aquí la clave process.env.PIXABAY_API_KEY hace referencia al entorno de configuración de la clave API especificado en el archivo .env para el modo de desarrollo.

El parámetro keyword acepta una cadena de texto (string) que es accesible en la propiedad queryStringParameters y devuelve datos commo respuesta almacenados en la variable imageURL. Esta será enviada al archivo script.js como respuesta a la petición (veremos esto más adelante).

Si la petición GET es exitosa, devolverá una respuesta con el código (statusCode) 200 y el objeto JSON correspondiente. En caso de errores, recibiremos una alerta con el mensaje y código de estado.

Debido a cambios de versión, Axios podría devolver un Buffer como respuesta en tu terminal que se vera algo como esto:

Buffer de respuesta de Axios en la terminal

Para evitar esto deberás adjuntar lo siguiente a la petición GET:

 let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

Crea un archivo de configuracion Netlify

En la raíz del proyecto, crea el archivo netlify.toml. Este archivo especifica como es que Netlify construirá y desplegará tu aplicación.

Ahora, agrega la siguiente configuración en el archivo netlify.toml:

[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "dist"

Nota:

command = "npm run build" ejecuta la Netlify CLI (Interfaz de Línea de Comandos) para que realice la construcción de la aplicación a partir de las funciones.
functions = "netlify/functions" indica que las funciones en getPhotos existen en ña carpeta netlify/functions.
publish = "dist" identifica dist como la carpeta desde donde será "servido" este archivo.

Edita el archivo script.js con la URL para las peticiones a Netlify functions

Siguiente paso, edita la apiURL de esto:

let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

A esto (el endpoint para la petición HTTP a las Netlify Functions):

  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

Esta función "serverless" será consultada desde el lado del cliente de tu aplicación mediante el endpoint: /.netlify/functions/getPhotos. Una vez que la solicitud es enviada, la función getPhotos será invocada desde script.js.

La respuesta imageURL obtenida de la Netlify functions getPhotos será pasada o enviada como el valor asignado al parámetro keyword en el "query string" (cadena de texto de consulta) de la función. Su contenido será recorrido mediante un ciclo for para devolver las 3 imágenes desde la API de Pixabay.

El archivo script.js debe verse así:

/* dist/script.js */
const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
  photoWrapper.innerHTML = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
    photoWrapper.innerHTML = "";
  }
});

async function getPhoto(keyword) {
  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    for (let i = 0; i < data.imageURL.length; i++) {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${data.imageURL[i].webformatURL}`);
      photoWrapper.appendChild(imageElement);
    }
  } catch (error) {
    alert(error);
  }
}

Nota: En el código de arriba mantiene tu variable de entorno segura ya que se accede a esta desde una función serverless.

Ejecuta el servidor de desarrollo

Ahora, ejecuta tu aplicación con el siguiente comando:

netlify dev

Esto hará que se cargue la función getPhotos mediante https://localhost:8888/.netlify/functions/getPhotos.

Resultado en terminal de netlify build

Luego, inicia el servidor de desarrollo y lanza la aplicación en tu navegador por defecto en localhost:8888.

La función Netlify está ahora lista en https://localhost:8888

En este punto, la configuración de la función Netlify está completa y ya es posible realizar solicitudes GET HTTP.

Cómo realizar solicitudes para traer datos

Ahora que ya tienes la aplicación servida, hagamos una solicitud (fetch) para traer datos. Ingresa algún texto en el campo input y dale Enter o haz clic en el botón para traer las imágenes desde la API de Pixabay.

Imágenes de flores buscados dese la API de Pixabay

Para mayor información acerca del API de Pixabay, ve a su sitio oficial de documentación.

El comando anterior enviará una solicitud a la función serverless y luego devolverá seis respuestas. Aquí cómo se verá la respuesta en la ventana de tu terminal:

Request from ::1: GET /.netlify/functions/getPhotos?keyword=flower
Response with status 200 in 4895 ms.

También puedes utilizar las herramientas de desarrollador (Developer Tools) en la pestaña Network (Red) para validar la solicitud.

Datos de respuesta de la función serverless de la API

La solicitud devuelve la URL de nuestra aplicación, la función Netlify getPhotos, el script.js y las imágenes de Pixabay.

Respuesta de la petición realizada a la función Netlify vista en la sección de encabezado en la pestaña de Red (Network) del navegador.

Cómo hospedar la aplicación en el repositorio remoto

Ahora, deberías empujar tu proyecto al hosting de control de versiones GitHub.

git add .
git commit -m"initial commit"
git push origin -u main

Cómo desplegar la aplicación y la función serverless en Netlify

Una vez que hayas publicado el proyecto en GitHub, inicia sesión en Netlify y conecta tu cuenta GitHub para dar autorización.

Importar un proyecto para despliegue en Netlify

Como se muestra en la imagen de arriba, haz clic en Add New Projecty luego busca el repositorio de tu aplicación en la lista desplegable. Enseguida, haz clic en Build Your Site. Esto tomará algunos minutos en completarse.

Acabas de desplegar la aplicación usando la UI de Netlify. Ahora tu aplicación estará disponible en: https://netlify-func-demo.netlify.app.

La URL para peticiones "fetch" (del inglés traer) debería verse como ésta: https://netlify-func-demo.netlify.app/.netlify/functions/getPhotos.

Opcional - Cómo configurar la aplicación desde el tablero Netlify

Alternativamente, puedes configurar el comando Netlify desde el tablero (o panel de control, del inglés, Dashboard). Si estas configuraciones ya han sido especificadas en el archivo netlify.toml, se sobreescribirán cualquier configiracion correspondiente.

Primero, selecciona la configuración de la carpeta del proyecto en "Site settings".

Opciones de Sitio para la carpeta del proyecto en Netlify

Configura el comando Build y el directorio público

Ve a Site settings> Deploy > Build & Deploy, edita los siguientes comandos y luego guarda los cambios:

Commando build: npm run build
Directorio público: dist

Sección de Construcción y despliegue en Netlify

Configura la carpeta de las funciones

Por defecto, Netlify utiliza netlify/functions como el directorio en el cual encontrar las funciones a desplegar. En este caso, nuestra función serverless getPhotos se encuentra en la carpeta netlify/funcions.

Ahora configuraremos una carpeta personalizada donde Netlify puede encontrar tus funciones compiladas. Ve a Site settings > Functions e ingresa la ruta la carpeta en donde se encuentran almacenadas las funciones de tu repositorio.

Sección de Carpeta de Funciones en Netlify

Cómo configurar variables de entorno para producción

En el panel de control de Netlify (Dashboard) haz clic en Site settings > Build & deploy > Environment> Environment varibales y luego configura el par clave/valor de la siguiente manera:

PIXABAY_API_KEY=your-api-key-here

Sección de Variables de Entorno en Netlify

Haz clic en guardar, y enseguida redespliega la aplicación para que los cambios se apliquen.

Para redesplegar la aplicación en Netlify, ve a Deploys > Trigger deploy. A continuación, selecciona Clear cache and redeploy site.

Ejecuta el redespliegue en la pestaña "Deploys" en Netlify

Nota: El nombre de la variable de entorno (PIXABAY_API_KEY) debe coincidir con el que se referencia en el código en getPhotos.

Para una aplicación React, usa el prefijo REACT_APP_ para que puedan ser leídas desde el archivo .env.

 REACT_APP_PIXABAY_API_KEY=your-api-key-here

Cómo inicializar la función serverless desde la aplicación remota

Para conectar la carpeta de tu proyecto a la aplicación web ya desplegada, inicia sesión en tu cuenta Netlify desde la terminal:

netlify login

A continuación, inicializa la aplicación en Netlify ejecutando el siguiente comando en tu terminal:

netlify init

Tu aplicación ahora está configurada para despliegues continuos via Netlify.

Cómo compilar la función serverless de Netlify

Necesitas enlazar tu aplicación con el ID del sitio en Netlify antes de poder ejecutar el comando build en tu terminal. Para conectar la carpeta local de tu proyecto con el ID de tu sitio en Netlify, ingresa el siguiente comando en tu terminal:

netlify link

Luego de esto, se te pedirá que enlaces la carpeta mediante cualquiera de las siguientes formas:

Búsqueda por nombre completo o parcial del sitio.
Elegir de una lista de tus sitios recientemente editados.
Ingresa el ID de tu sitio.

Una vez que hayas seleccionado tu opción preferida, se habrá enlazado la carpeta de tu proyecto con el sitio hospedado en Netlify. Esto te permite ejecutar comandos con la CLI de Netlify y automáticamente desplegar el proyecto desde el repositorio cada que haya cambios en el código.

En el siguiente paso, compilarás una función serverless mientras se ejecuta en el servidor. Para correr el comando build definido en el archivo netlify.toml, ejecuta el siguiente comando:

netlify build

Esto a su vez, ejecutará el comando npm run-script como fue especificado en el package.json. Ahora, tu función serverless que está en la carpeta netlify/functions será empaquetado ¡exitosamente!

Cómo poner a prueba la aplicación

Para realizar pruebas y confirmar que la función Netlify funciona correctamente, ejecuta el comando siguiente en tu terminal:

netlify functions:serve

Esto inyecta las variables de entorno de tu proyecto del archivo .env y ejecuta la función serverless..

Cómo confirmar la seguridad de la clave API Keys

Para inspeccionar tu aplicación y confirmar que las claves API se encuentran ocultas sigue los pasos a continuación:

Haz clic en la URL de tu aplicación hospedada y una vez abierta, navega a las herramientas de desarrollador (Developer Tools) presionando la tecla F12 o haciendo clic en cualquier lugar y seleccionando Inspeccionar. Navega a la pestaña de Red, donde deberías ver los datos traídos desde la API Pixabay.

Clave API ahora oculta de la vista pública usando las herramientas de desarrollador (Developer Tools).

Ahora ya has confirmado que has configurado exitosamente una función serverless y la has desplegado en Netlify.

Conclusión

Este tutorial introdujo las funciones serverless, JavaScript asíncrono y conceptos de APIs RESTful.

Espero que ahora sepas cómo crear funciones serverless/lambda y mantener de manera segura cualquier valor sensible como las llaves/claves API que utiliza tu aplicación del lado del cliente.

Si te atoraste con algo, puedes tener acceso al código completo en el Repositorio en GitHub.

¡Gracias por leer el artículo! Sígueme en Twitter.

Enlaces relevantes

Consumiendo APIs con ReactJS: Aprende useEffect y useState

Leonardo José Castillo Lacruz — Mon, 13 Nov 2023 02:43:05 +0000

Introducción a las APIs

Empecemos por conocer lo que es una API. Estas letras son el acrónimo de application programming interface, en español lo podemos traducir como Interfaz de programación de aplicaciones, su objetivo fundamental es permitir que la comunicación entre 2 o más elementos o sistemas.

Con la definición anterior, también indicar que existen diferentes tipos de API, una de las más conocidas es la API que ofrece Windows para poder acceder a los recursos del sistema operativo y construir aplicaciones sobre él. Otro tipo de API y es el foco de nuestra atención, es el tipo encargado del transporte de datos entre sistemas, siendo ampliamente utilizado actualmente.

Arquitecturas de API para transporte de datos

Dado su amplio uso, las APIs de transporte de datos se pueden organizar o implementar de diferentes formas, teniendo como aspectos diferenciales, el formato de datos y la forma como se definen las reglas de comunicación entre los principales puntos a definir, veamos algunos tipos de arquitectura de API para transporte de datos:

REST (Representational State Transfer o Transferencia del estado representacional), es actualmente la arquitectura más usada, utiliza el protocolo http como base para el transporte de datos, cada petición u operación es independiente y realiza una tarea completa, es decir no hay dependencia entre operaciones.
GraphQL, al igual que REST, esta basado en el protocolo http, pero se diferencia en la forma como realiza las operaciones, ya que estas se basan en un lenguaje de consulta y manipulación de datos, lo cual hace posible manejarlas de manera más detallada y óptima pero incrementando un poco la complejidad.
Websocket. Es una arquitectura basada en el concepto de socket, el cual mediante el protocolo TCP, crea una conexión directa entre 2 puntos y la mantiene abierta, de forma tal que cualquier operación se ejecuta en el menor tiempo posible. Es indicada para casos en que la comunicación debe realizarse en tiempo real.
Webhook. Es un tipo de arquitectura un poco diferente a las anteriores, el inicio del proceso se atribuye a eventos, es decir, es a partir de una acción, que el proceso se inicia, como por ejemplo, cuando un registro en el sistema está en la condición X, se ejecuta la petición a la URL y en general son respuestas a procesos, por lo que esta arquitectura se denomina API reversa o inversa.
RPC y gRPC. Esta arquitectura actua como un proceso remoto ejecutado en ambiente local, trabaja bajo http, tcp, o udp. Se base en la definición de un servicio que es invocado por el cliente y resuelto por el servidor, a diferencia de REST, tanto como cliente como servidor comparten definiciones del servicio, es decir debe haber correspondencia en sus implementaciones, en REST cada lado implementa de su forma y es solo en el transporte de datos que debe correspondencia.
SOAP. Mas que una arquitectura es protocolo de comunicación, basado en http pero con transporte de datos hecho en XML (eXtensible Markup Language, o en español 'Lenguaje de Marcado Extensible'), su forma de trabajo es basada en acceso a objetos y tiene un conjunto de reglas y restricciones que la hacen un poco más compleja de manejar pero posee mayor seguridad.

Tipos de arquitecturas más conocidos. Tomado de: https://www.linkedin.com/in/brijpandeyji/

Detallando una API REST

Como comentamos anteriormente, una API REST es una herramienta o mecanismo que permite interconectar componentes o sistemas. Su uso actualmente se ha enfocado en ser la forma ideal para implementar procesos de gestión de datos, conocidos como CRUD (C-reate, R-ead, U-pdate y D-elete), de uso común para cualquier aplicación.

El formato común de transporte de datos este tipo de APIs es JSON (Javascript Object Notation), el cual por ser liviano y muy bien estructurado permite que podamos representar de forma simple y entendible los modelos que serán procesados.

La comunicación entre el cliente y el servicio se realiza a través de protocolo http como indicamos anteriormente y cada tipo de operación está relacionada o identificada por un verbo, veamos que significa ello.

Para saber que operación se va a realizar existen 2 elementos fundamentales que permiten definirla, la ruta o endpoint y el verbo. Cuandon realizamos operaciones sobre una API REST, estas las denominamos peticiones, solicitudes o requisiciones, recordando que quien inicia la operación es el cliente, conversando con el servicio que dispone o habilita la API.

Ruta o endpoint de una petición en API REST

Es la dirección o url que se va a ejecutar cuando realicemos la petición, solicitud o requisición, de esta forma el protocolo http, identificará que servidor va a responder y que modelo o entidad es la que se va a procesar. Sigue a continuación lo que se denomina la anatomía de una ruta o endpoint.

Elementos o partes de un endpoint

Verbos de una API REST

Para que esta conversación sea posible, existen lo que se denominan verbos, que son los que definen que tipo de operación se va a realizar, los verbos más comunes en una API REST son:

GET: se define o identifica como el verbo que permite realizar consultas, es importante indicar que este verbo trabaja de la misma forma que en el protocolo http, donde los datos que enviamos quedan expuestos en la url. Esta operación es la R de R-ead.
POST: es el verbo que nos permite definir operaciones de creación de registros, los datos al igual que en el protocolo http, viajan por un mecanismo interno o cuerpo de la petición, no son visibles. En este caso enviamos los datos en lo que denominamos el cuerpo o body de la petición, generalmente se envian en formato JSON
PUT: mediante este verbo hacemos actualizaciones completas de registros, es decir, lo que enviamos va a sustituir lo que existe, generalmente en la url o endpoint de la petición se envía un identificador que permite saber sobre que registro se hace la actualización, importante tener claro este punto, ya que en REST tenemos 2 formas de actualizar registros, los datos al igual que en POST, no son visibles en el envío.
PATCH: con el uso de este verbo, podemos realizar actualizaciones de forma incremental, es decir podemos cambiar partes de registro sin afectarlo por completo, es decir son actualizaciones parciales. Los datos en este caso de igual forma viajan mediante el cuerpo o body de la petición, es decir no son visibles en el envío. En la ruta o endpoint generalmente se indica un parámetro que pemite identificar el registro a ser actualizado.
DELETE: a través de este verbo podemos indicar la operación de borrado de registros. No es necesario enviar body, ya que en la ruta o endpoint se indica un parámetro que permite identificar que registro se va a eliminar.

En las definiciones anteriores se indica que para identificar un registro, la buena práctica o común implementación es indicarlo en la ruta, pero no hay una restricción técnica que sea de obligatorio cumplimiento.

ReactJS y los hooks

Iniciamos recordando que ReactJS es una libreria que permite implementar y construir el front-end para aplicaciones web, esta libreria es de amplio uso, por estar basada en Javascript tiene una comunidad fuerte que apoya su evolución continua.

React trabaja de la forma en que la aplicación sólo comunica al navegador la página inicial, esto se denomina SPA o Single Page Application, y toda la lógica es controlada e implementada por la libreria, esto hace que el performance y la usabilidad de cara al usuario sea mucho mejor que las aplicaciones web tradicionales (basadas en html+css+JS y renderizado total).

Uno de los puntos fuertes que surgió a partir de la versión 16.8, es la implementación en base a componentes funcionales, lo cual facilitó de forma enorme la construcción e implementación, de igual manera en esa versión nacieron los hooks, pero que son y como funcionan?, en las siguientes lineas lo revisamos en detalle.

Entiendo los hooks de ReactJS

Empecemos por definir y entender que son los Hooks, expresémoslo en los términos más simples, un hook es una función, partiendo de esa premisa entonces podemos indicar que no es cualquier función, está claro ello, en ese caso podemos decir:

Un hook es una función especial con un objetivo especifico, simplificar algún proceso que hasta el momento se realizaba de otra forma.

Con este concepto más amplio, podemos decir que los hooks, son funciones que simplifican procesos relacionados al ciclo de vida de componente funcionales, porque hasta la versión 16.7 de React, los componentes funcionales sólo recibían props y no era posible gestionar su estado, solo los componentes de clases (antigua forma de construir componentes, basada en POO ) soportaban está gestión.

Un detalle interesante, es que dada la usabilidad y potencia de los Hooks, no solo la librería base React actualmente tiene hooks, ahora otros paquetes de amplio uso también implementan hooks, tal como es el caso de react-router-dom por ejemplo.

Gestión de estado - useState en ReactJS

Uno de los puntos críticos y de suma importancia cuando construimos aplicaciones de una sóla página (SPA - Single Page Application) es la gestión de estado, dado que en el enfoque tradicional (html + css + js + server), la gestión es realizada mediante la gestión de sesiones en el lado del server, en el enfoque de ReactJS, la gestión es hecha a través de hooks, siendo el hook encargado de esta operación el useState.

Conociendo a useState

Este hook permite mantener el control de los estados de un componente, entiendo a los estados como las características o propiedades que definen el comportamiento y presentación del componente. Toda vez que un estado cambia, significa que el componente ha cambiado y por tanto debe actualizarse o renderizarse (es decir construirse nuevamente).

Tomemos un ejemplo práctico, una aplicación que presenta productos, en ese caso hablamos de un componente tipo "Galeria", que muestra datos y fotos de estos productos. Al iniciar no tiene productos, es decir, tenemos un estado tipo lista o arreglo, pero que está vacía al inicio, por lo tanto se presenta un mensaje de "Sin productos disponibles". Ahora mediante algún proceso (que vamos a entender más adelante), esa lista se llena con algunos datos, que debe suceder? que al recibirlos estos datos disparan un proceso de actualización del componente "Galeria".

Entendido el concepto teórico de funcionamiento de la gestión de estado, pasemos a colocar las manos en el código. Vamos a crear una aplicación con Vite y vamos a crear un componente funcional llamado Galeria. En este material puedes verificar como se realiza la creación de componentes en React.

Para definir un estado se sigue la siguiente anatomia:

//Definición de un estado
const [estado, setEstado] = useState();

Observa que siempre que se define un estado, se invoca al hook useState el cual nos retorna un arreglo que desestructuramos (recordar que la desestructuración está disponible en Javascript desde la versión ES2015) en 2 variables, una se refiere al estado en sí y otra es la función que permite asignar o atribuirle valor a ese estado.

Por ser de manejo especial, a los estados no le podemos asignar valor, como tradicionalmente lo hacemos en Javascript, entonces lo hacemos siempre a través de la función setteadora.

Por nuestra aplicación necesitar presentar múltiples productos, también va a ser necesario crear un componente para esta gestión. Es buena práctica en ReactJS, granular o despiezar de la manera más detallada la gestión de componentes, para que podamos aprovechar las características de la libreria y obtener un comportamiento óptimo de nuestras aplicaciones.

Veamos el código del componente Galeria:

import React, { useState } from 'react'
import Product from '../Product/Product';

const productos = [
    {
        "_id": "652803510a598cf5573918f3",
        "nombre": "The Complete Common Core: State Standards Kit, Grade 5",
        "sku": "D82015FFBF",
        "precio": 12.88,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b006",
        "url": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f4",
        "nombre": "Flash Furniture 25''W x 45''L Trapezoid Red HP Laminate Activity Table - Height Adjustable Short Legs",
        "sku": "39F1B8A212",
        "precio": 117.26,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b00b",
        "url": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f3",
        "nombre": "The Complete Common Core: State Standards Kit, Grade 5",
        "sku": "D82015FFBF",
        "precio": 12.88,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b006",
        "url": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f4",
        "nombre": "Flash Furniture 25''W x 45''L Trapezoid Red HP Laminate Activity Table - Height Adjustable Short Legs",
        "sku": "39F1B8A212",
        "precio": 117.26,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b00b",
        "url": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f3",
        "nombre": "The Complete Common Core: State Standards Kit, Grade 5",
        "sku": "D82015FFBF",
        "precio": 12.88,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b006",
        "url": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/41gxkFaSFfL.jpg"
        },
        ]
    },
    {
        "_id": "652803510a598cf5573918f4",
        "nombre": "Flash Furniture 25''W x 45''L Trapezoid Red HP Laminate Activity Table - Height Adjustable Short Legs",
        "sku": "39F1B8A212",
        "precio": 117.26,
        "descripcion": "...",
        "imagenes": [
        {
        "_id": "654f7cae84c15e3104b1b00b",
        "url": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg",
        "nombre": "https://images-na.ssl-images-amazon.com/images/I/31WxfYlS8XL.jpg"
        },
        ]
    },
];


const Gallery = () => {
    //Definición del estado
    const [listaProductos, setListaProductos] = useState([]);

    const llenarProductos = () => {
        setListaProductos([...productos]);
    }

    //Si no hay producto emitimos un mensaje
    if (listaProductos.length === 0) {
        return <>
        No hay productos disponibles
        
        
    }
    
    //Mostramos los productos
  return (
    
    {
        listaProductos.map((p) => {
            return 
        })
    }
    
    
  )
}

export default Gallery

Expliquemos un poco el código anterior, empecemos por definir el estado, esto se encuentra en la siguiente línea:

	//Definición del estado
    const [listaProductos, setListaProductos] = useState([]);

Como indicamos anteriormente, realizamos la llamada al hook useState el cual nos retorna 2 variables, nuestro estado listaProductos y su función setteadora setListaProductos, notese que le pasamos a useState un arreglo vacío como valor inicial, de esta forma estamos indicando que el estado va a ser de tipo arreglo.

Luego tenemos una expresión de función que nos va a servir para llenar el arreglo a partir de un evento, este evento será el click de un botón que hemos agregado al mostrar el mensaje de "No hay productos disponibles".

Observa que en esta función llenarProductos se realiza la asignación del estado, de un modo que para quien viene de Javascript puro o vanilla, puede en principio no ser entendida, vamos explicar un poco porque se hace así:

const llenarProductos = () => {
	setListaProductos([...productos]);
}

Observa que se usa el spread operator, el cual es una característica disponible de ES2015, este operador básicamente lo que hace es crear un nuevo arreglo y lo que pasamos como: ..., se copia inmediamente a este nuevo arreglo, de esta forma lo que estamos realizando es la creación de un arreglo con los datos de productos, al ser un nuevo arreglo hay cambio de estado y ReactJS reacciona, actualizando el componente. Y por qué no usar el método push por ejemplo, porque en ese caso estariamos agregando un valor, solo que el arreglo para React no estaria modificado, por ser un tipo de dato estructurado y manejado por referencia, en esencia por ser inmutable, en este caso, para React el arreglo sigue igual, no hay cambio de estado por lo tanto no se renderiza.

Avanzando en el código nos encontramos la implementación del componente, donde lo primero que realizamos es la verificación de existencia o no de productos, si no existen se muestra un mensaje y un botón para cargar productos. En caso de existir productos, se hace un recorrido, recordando que por ser un arreglo, tenemos disponible sus métodos nativos de Javascript, entre ellos el método map.

Recorremos el arreglo y para cada producto construimos un componente de tipo Product. Este componente recibe los datos de cada producto y hace una presentación en pantalla de las informaciones. Sigue a continuación el código del componente Product

import React from 'react'

const Product = ({product}) => {
  return (
    
        
        
        
            
                {product.nombre}
            
            
                {product.descripcion}
            
        
        
            
                Precio: {product.precio}
            
            
                SKU: {product.sku}
            
                
    
  )
}

export default Product

Este código es simple, lo que retorna es el HTML necesario para presentar los datos de productos, le hemos hecho algunos ajustes en cuanto a CSS para presentar la información de una forma agradable. Nota que valimos si hay imágenes en el producto, de lo contrario presentamos una imagen por defecto.

Ya hemos visto como funciona la gestión de estado, solo que en este caso nuestros datos están en memoria o en el código, luego hemos tenido que hacer un clic para poder cargarlos. Avancemos en el uso de otro hook que nos va a permitir, consultar una API externa y luego cargar mediante la actualización del estado.

Efectos secundarios - useEffect en ReactJS

Los efectos secundarios, son acciones que podemos ejecutar durante el ciclo de vida de un componente ReactJS, para ello detallemos cual es el ciclo de vida que ReactJS implementa:

Montaje, es cuando el componente es creado.
Actualización, proceso ejecutado toda vez que un estado del componente cambia, por tanto es necesario reconstruir el componente
Desmontaje, cuando se destruye el componente, por ejemplo si nos cambiamos de vista.

Analizando este ciclo, entendemos que nuestro componente es creado, solo se actualiza por un cambio de estado, el cual es generado a partir de un evento, generalmente ejecutado o invocado por el usuario y luego se destruye. Pensemos ahora que deseamos presentar nuestros productos al momento de que se cargue el componente, sólo que estos productos seran consultados a una API externa, por lo cual no se van a mostrar de inmediato, en el mejor de los casos puede que sean algunos segundos de tiempo, pero puede pasar que sea necesario un tiempo mayor, o peor aún que se genere algún error, en ese caso nuestro usuario va a estar esperando con una pantalla blanca, esto no es correcto.

Es allí en ese punto anterior, que useEffect y los efectos secundario entran en escena. Ahora lo anterior con useEffect, queda de la siguiente forma:

Creamos el componente, sabiendo que no tiene datos, por lo tanto podemos informar al usuario de esto, o mejor aún podemos decirle que estamos buscando los datos.
Inmediatamente luego de creado el componente, podemos invocar a useEffect, el cual ejecutará un callback, donde nosotros tenemos la libertad de poder consumir la API indicada (recordando que esto se hace con promesas o async/await de Javascript).
Al llegar los datos podemos actualizar nuestro estado listaProductos, luego esto va a disparar la actualización del componente. Nuestro usuario va a estar atento y siempre informado de lo que sucede (usabilidad)

Y como se implementan los pasos anteriormente descritos?, vayamos al código, tomando en cuenta que vamos a consumir una API que se encuentra en la siguiente URL: https://apiexpress-x7sl.onrender.com/productos, esta API fue desarrollada por mi y es pública, así que puedes usarla para que realices tus ejercicios.

Implementando el consumo de una API con ReactJS

En nuestro caso, el consumo de datos que queremos realizar es a nivel del componente Galeria, el cual actualmente tiene los datos en memoria, como debemos ajustar su código, primero empecemos por conocer la anatomía del useEffect:

useEffect(() => {
      //Callback a ejecutar en el proceso de montaje y/o actualización
    
      return () => {
        //Callback a ejecutar en el proceso de desmontaje
      }
    }, [Arreglo de dependencias para saber cuando ejecutar el useEffect])

Con lo anterior podemos percibir que el useEffect cumple a cabalidad el ciclo de vida de componentes, de acuerdo a lo indicado anteriormente:

Ejecuta un callback (bloque de código o función) al hacer el montaje (Paso 1 del ciclo de vida) y al hacer actualizaciones (Paso 2 del ciclo de vida, esta ejecución es opcional y va a depender del arreglo de dependencias).
Puede ejecutar un callback al hacer el desmontaje (Paso 3 del ciclo de vida, este es opcional)

Sólo hay una restricción en el useEffect, se ejecuta siempre en el proceso de montaje de acuerdo a lo anterior.

Expliquemos ahora el arreglo de dependencias:

Si el arreglo no se indica, el useEffect se ejecuta tanto en el montaje como en cualquier cambio de estado.
Si el arreglo se indica vacio [], el useEffectse ejecuta solo en el proceso de montaje.
Si dentro del arreglo, indicamos algunos estados, el useEffect se ejecuta tanto en el montaje, como cuando esos estados indicados cambien.

Con ello tenemos flexibilidad para indicar, como queremos que sea ejecutado este efecto secundario.

Veamos como queda nuestro código luego de implementado el useEffect:

import React, { useState, useEffect } from 'react'
import Product from '../Product/Product';



const Gallery = () => {
    //Definición del estado
    const [listaProductos, setListaProductos] = useState([]);

    useEffect(() => {
      const obtenerDatos = async () => {
        const res = await fetch('https://apiexpress-x7sl.onrender.com/productos');
        const data = await res.json();
        setListaProductos([...data]);
      }

      obtenerDatos();

    }, []);
    

    //Si no hay producto emitimos un mensaje
    if (listaProductos.length === 0) {
        return <>
        Cargando productos
        
    }
    
    //Mostramos los productos
  return (
    
    {
        listaProductos.map((p, i) => {
            return 
        })
    }
    
    
  )
}

export default Gallery

Expliquemos los cambios que hemos realizado:

Ya no es necesario tener el arreglo de productos, ni el botón para cargar datos, ni el handler para el clic llenarProductos, con esto nuestro código ha quedado más simple.
Luego hemos implementado el useEffect de la siguiente forma:

useEffect(() => {
      const obtenerDatos = async () => {
        const res = await fetch('https://apiexpress-x7sl.onrender.com/productos');
        const data = await res.json();
        setListaProductos([...data]);
      }

      obtenerDatos();

    }, []);

Tenemos una función de callBack llamada obtenerDatos, la cual de forma asincronica, se conecta con la API (https://apiexpress-x7sl.onrender.com/productos) y obtiene una respuesta, luego pedimos solo los datos en formato JSON, tal como indicamos que la API los retornaba, un ejemplo de los datos se puede ver en la siguiente imagen:

Ejemplo de retorno de la API que estamos usando

Estos datos nos han quedado disponibles en la variable: data, ahora esta variable que es un arreglo de objetos, se lo asignamos al estado listadoProductos, con lo que explicamos anteriormente, este cambio de estado dispara la actualización del componente Galeria, y con ello hemos podido lograr el objetivo planteado, consumir datos via API y usando useState y useEffect.

En el siguiente video podrás apreciar la construcción de todo lo explicado anteriormente.

Cómo crear APIs seguras con Flask y Auth0

Josué Leiva — Mon, 17 Apr 2023 02:48:05 +0000

Artículo original: How to Build Secure APIs with Flask and Auth0

Las APIs son el corazón del desarrollo moderno. Soportan todo tipo de sistemas, desde móviles, web, y aplicaciones de escritorio, hasta dispositivos IoT y autos autónomos. Son un puente entre tus clientes y la lógica y almacenamiento de tu aplicación.

Este punto central de acceso a la información de tu aplicación plantea la pregunta: ¿Cómo puedes proveer acceso a la información a quienes lo necesitan mientras deniegas el acceso a peticiones no autorizadas?

La industria ha provisto de diversos protocolos y buenas prácticas para asegurar APIs. Hoy nos enfocaremos en OAuth2 (artículo en inglés), una de las opciones más populares para autorizar clientes en nuestras APIs.

Pero ¿cómo implementamos OAuth2? hay dos formas de hacerlo:

La forma DIY (hacerlo tu mismo)
Trabajar con un tercero seguro como Auth0

En este artículo, te guiaré a través de una implementación de OAuth2 para Python y Flask (documentación en inglés) usando Autho como nuestro proveedor de identidad. Pero primero, debemos discutir la forma DIY.

¿Por qué no construir tu propia autenticación y autorización?

Por algunos años ahora, he querido devolver a la comunidad que tanto me ha ayudado al enseñarme programación y ayudarme a progresar en mi búsqueda de conocimiento. Siempre he pensado que una gran forma de contribuir era al tener mi propio blog, algo que he intentado más de algunas veces y fallado.

Pero ¿dónde fallé? En vez de enfocarme en escribir, intenté construir mi propio motor de blog, ya que está en mi naturaleza. Es lo que los desarrolladores hacen. Les encanta construir.

Pero ¿por qué menciono esto aquí? Ya que muchos caen en la misma trampa al momento de construir APIs. Permíteme explicarlo con un ejemplo.

Bob es un gran desarrollador, y él tiene esta gran idea de hacer una app de ToDo (lista de tareas pendientes) que podría ser la siguiente gran app. Bob está en conocimiento de que para una implementación exitosa, los usuarios pueden acceder sólo su propia información.

Esta es la línea de tiempo de la app de Bob:

Sprint 0: Investigar ideas y crear prototipos.
Sprint 1: Construir la tabla de usuarios y vista de inicio de sesión con una API.
Sprint 2: Añadir vistas de reset de contraseñas y construir las plantillas de email
Sprint 3: Construir, crear y listar las vistas de ToDos
Sprint 4: MVP se publica
Retroalimentación de usuarios:
Algunos usuarios no pueden ingresar debido a un bug.
Algunos usuarios se sienten inseguros sin autenticación de 2 factores.
Algunos usuarios no quieren otra contraseña más. Prefieren ingresar usando Google o Facebook.

Hablemos sobre lo que ha pasado. Bob pasó los primeros sprints no construyendo su app pero construyendo los bloques básicos, como las funcionalidades de login, notificaciones de email y así. Este valioso tiempo lo podría haber usado de forma distinta, pero lo que sucede a continuación es más preocupante.

El backlog de Bob se comienza a llenar. Ahora él necesita improvisar un método de autenticación de 2do factor, añadir un ingreso rápido (google) y algunas funciones no relacionadas con el producto que podrían potencialmente retrasar su producto.

Y aún hay una gran pregunta para ser respondida: ¿Implementó Bob todos los mecanismos de seguridad correctamente? Un error crítico podría exponer toda la información de los usuarios a terceros.

Lo que Bob hizo es lo que yo hice en mi blog muchas ocasiones. Algunas veces, es de gran ayuda descansar en terceros si queremos hacer las cosas bien.

Hoy en día, los hackers y ataques se han hecho tan sofisticados que la seguridad ya no es un factor trivial. Es un sistema complicado en sí, y es usualmente mejor dejar esa implementación a expertos - no solo para que se haga bien, sino para que también nos podamos enfocar en lo que importa: construir nuestra aplicación y sus APIs.

Cómo Configurar una Cuenta Gratuita de Administración de Identidades en Auth0

Auth0 es un proveedor líder en autorización y autenticación, pero veamos cómo puede ayudar a Bob (o a tí) a construir una app mejor.

Ahorra tiempo
Es segura
Tiene un plan gratis

Es tiempo de ponerse prácticos. Primero, asegúrate de tener una cuenta Auth0. Sino, puedes crear una aquí gratuitamente.

Crear una nueva API Auth0

Aún hay una cosa que debemos hacer antes de comenzar a programar. Ve a la sección de APIs de tu dashboard en Auth0 y haz click en el botón "Crear API" (Create API). Después de ello, llena el formulario con tus detalles. Sin embargo, asegúrate que selecciones RS256 como Signing Algorithm.

Tu formulario debiera verse así:

Creating the API – image showing fields to fill out

Después de crear un API exitosamente, se abre la página de detalles. Mantén esa pestaña abierta, ya que contiene información que necesitaremos para configurar nuestra aplicación. Si la cierras, no te preocupes, siempre puedes acceder a ella nuevamente.

Cómo impulsar nuestra aplicación

Ya que nos enfocaremos sólo en aspectos de seguridad, tomaremos algunos atajos al construir nuestra demo de API. Sin embargo, cuando desarrolles APIs reales (artículo en inglés), por favor sigue las mejores prácticas para APIs Flask (artículo en inglés).

Instalar las dependencias

Primero, instala las siguientes dependencias para establecer Flask y autenticar usuarios.

pipenv install flask python-dotenv python-jose flask-cors six

Construir los endpoints

Nuestra API será directa. Consistirá sólo de tres endpoints, las cuales todas serán, por ahora, accesibles públicamente. Sin embargo, arreglaremos eso pronto. Acá están nuestros endpoints:

/ (endpoint público)
/user (requiere un usuario autenticado)
/admin (sólo los usuarios de rol admin)

Vamos a ello:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index_view():
    """
    Endpoint por defecto, es publico y puede ser accedido por cualquiera
    """
    return jsonify(msg="Hello world!")

@app.route("/user")
def user_view():
    """
    Endpoint Usuario, solo puede ser accedido por un usuario autorizado
    """
    return jsonify(msg="Hello user!")

@app.route("/admin")
def admin_view():
    """
    Endpoint Admin, solo puede ser accedido por un admin
    """
    return jsonify(msg="Hello admin!")

Bastante simple, no? Vamos a ejecutarlo:

~ pipenv run flask run
* Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Y si accedemos nuestro endpoint:

~ curl -i http://localhost:5000
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:24:57 GMT

{"msg":"Hello world!"}

~ curl -i http://localhost:5000/user
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 22
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:25:42 GMT

{"msg":"Hello user!"}

~ curl -i http://localhost:5000/admin
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:26:18 GMT

{"msg":"Hello admin!"}

Cómo asegurar los endpoints

Ya que estamos usando OAuth, vamos a autenticar las peticiones al validar un token de acceso en formato JWT. Lo enviaremos a la API en cada petición como parte de las cabeceras HTTP.

Variables de Configuración Auth0

Como mencionado en la sección previa, nuestra API necesita ser consciente y requerirá información de nuestro dashboard Auth0. Así que ve devuelta a tu página detallada de API y agarra dos valores distintos.

Primero, el identificador de API:

Este es el valor requerido cuando la API es creada. También puedes obtenerla desde tu página detallada de API:

How to find the API identifier on the API details page

Siguiente, dominio Auth0:

A menos que estés utilizando un dominio customizado, este valor será [NOMBRE_TENANT].auth0.com, y puedes agarrarlo desde la pestaña Test (asegúrate no incluir https:// y la última barra diagonal /).

Getting the Auth0 domain

Siguiente, traspasa esos valores a variables para que así puedan ser utilizadas en las funciones de validación.

AUTH0_DOMAIN = 'TU-DOMINIO-AUTH0'
API_IDENTIFIER = 'IDENTIFICADOR-API'
ALGORITHMS = ["RS256"]

Métodos de error

Durante esta implementación, necesitaremos una manera de lanzar errores cuando la autenticación falla. Así que usaremos los siguientes ayudantes para esos menesteres:

class AuthError(Exception):
    def __init__(self, error, status_code):
        self.error = error
        self.status_code = status_code

@app.errorhandler(AuthError)
def handle_auth_error(ex):
    response = jsonify(ex.error)
    response.status_code = ex.status_code
    return response

Cómo capturar el token JWT

El primer paso para validar un usuario es obtener el token JWT desde las cabeceras HTTP. Esto es bastante simple, pero hay algunas cosas a tener en mente. Aquí hay un ejemplo de ello:

def get_token_auth_header():
    """
    Obtiene el Token de Acceso desde la cabecera Authorization
    """
    auth = request.headers.get("Authorization", None)
    if not auth:
        raise AuthError({"code": "authorization_header_missing",
                        "description":
                            "Se esperaba cabecera de autenticacion"}, 401)

    parts = auth.split()

    if parts[0].lower() != "bearer":
        raise AuthError({"code": "invalid_header",
                        "description":
                            "La cabecera de autenticacion debe comenzar con"
                            " Bearer"}, 401)
    elif len(parts) == 1:
        raise AuthError({"code": "invalid_header",
                        "description": "Token no encontrado"}, 401)
    elif len(parts) > 2:
        raise AuthError({"code": "invalid_header",
                        "description":
                            "La cabecera debe ser"
                            " Bearer token"}, 401)

    token = parts[1]
    return token

Cómo validar el token

Tener un token traspasado a nuestra API es una buena señal, pero no significa que es un cliente válido. Necesitamos revisar la firma del token.

Ya que la lógica para requerir autenticación puede ser utilizada para más de un endpoint, sería importante abstraerla y hacerla fácilmente accesible para los desarrolladores su implementación. La mejor forma de hacer esto es usando decoradores (artículos en inglés).

def requires_auth(f):
    """
	Determina si el Token de Acceso es valido
    """
    @wraps(f)
    def decorated(*args, **kwargs):
        token = get_token_auth_header()
        jsonurl = urlopen("https://"+AUTH0_DOMAIN+"/.well-known/jwks.json")
        jwks = json.loads(jsonurl.read())
        unverified_header = jwt.get_unverified_header(token)
        rsa_key = {}
        for key in jwks["keys"]:
            if key["kid"] == unverified_header["kid"]:
                rsa_key = {
                    "kty": key["kty"],
                    "kid": key["kid"],
                    "use": key["use"],
                    "n": key["n"],
                    "e": key["e"]
                }
        if rsa_key:
            try:
                payload = jwt.decode(
                    token,
                    rsa_key,
                    algorithms=ALGORITHMS,
                    audience=API_IDENTIFIER,
                    issuer="https://"+AUTH0_DOMAIN+"/"
                )
            except jwt.ExpiredSignatureError:
                raise AuthError({"code": "token_expired",
                                "description": "token is expired"}, 401)
            except jwt.JWTClaimsError:
                raise AuthError({"code": "invalid_claims",
                                "description":
                                    "incorrect claims,"
                                    "please check the audience and issuer"}, 401)
            except Exception:
                raise AuthError({"code": "invalid_header",
                                "description":
                                    "Unable to parse authentication"
                                    " token."}, 401)

            _request_ctx_stack.top.current_user = payload
            return f(*args, **kwargs)
        raise AuthError({"code": "invalid_header",
                        "description": "Unable to find appropriate key"}, 401)
    return decorated

El nuevo decorador creado requires_auth, cuando aplicado a un endpoint, automáticamente rechazará la petición si no hay un usuario válido que pueda ser autenticado.

Cómo requerir una petición autenticada para un endpoint

Ya estamos listos para asegurar nuestros endpoints, actualicemos los user y admin para utilizar nuestro decorador.

@app.route("/user")
@requires_auth
def user_view():
    """
    Endpoint Usuario, solo puede ser accedido por un usuario autorizado
    """
    return jsonify(msg="Hello user!")

@app.route("/admin")
@requires_auth
def admin_view():
    """
    Endpoint Admin, solo puede ser accedido por un admin
    """
    return jsonify(msg="Hello admin!")

Nuestro único cambio fue añadir @required_auth al comienzo de la declaración de cada función de endpoint, y con ello podemos probar una vez más:

~ curl -i http://localhost:5000/user
HTTP/1.0 401 UNAUTHORIZED
Content-Type: application/json
Content-Length: 89
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:42:26 GMT

{"code":"authorization_header_missing","description":"Se esperaba cabecera de autenticacion"}

~ curl -i http://localhost:5000/admin
HTTP/1.0 401 UNAUTHORIZED
Content-Type: application/json
Content-Length: 89
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:42:42 GMT

{"code":"authorization_header_missing","description":"Se esperaba cabecera de autenticacion"}

Como se esperaba, no podemos acceder a nuestros endpoints ya que la cabecera de autorización no se encuentra. Pero antes de añadir una, veamos si nuestro endpoint público aún funciona:

Como esperado

~ curl -i http://localhost:5000
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 21:43:55 GMT

{"msg":"Hello world!"}

Increíble, funciona como se esperaba.

Cómo probarlo

Para probar nuestros nuevos endpoints asegurados, necesitamos obtener un token de acceso válido que podamos pasar a la petición. Podemos hacer eso directamente en la pestaña Test de la página detallada de la API, y es tan simple como copiar un valor desde la pantalla:

Copying the token for testing

Once we have the token we can change our curl request accordingly:

Una vez que tengamos el token podemos cambiar nuestra petición de curl acorde a:

~ curl -i -H "Authorization: bearer [TOKEN_DE_ACCESO]"  http://localhost:5000/user
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 22
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 22:17:06 GMT

{"msg":"Hello user!"}

Por favor recuerda reemplazar TOKEN_DE_ACCESO con el valor que copiaste desde tu dashboard.

¡Funciona! Pero aún tenemos algo de trabajo que hacer. Incluso cuando nuestro endpoint /admin está asegurado, puede ser accedido por cualquier usuario:

~ curl -i -H "Authorization: bearer [TOKEN_DE_ACCESO]"  http://localhost:5000/admin
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 23
Server: Werkzeug/2.0.1 Python/3.9.1
Date: Tue, 24 Jan 2023 22:21:09 GMT

{"msg":"Hello admin!"}

Control de acceso basado en roles

Para el control de acceso basado en roles hay algunas cosas que debemos hacer:

Crear permisos para la API
Activar el añadir permisos a el token JWT para la API
Actualizar el código
Probar con usuarios

Los primeros 2 puntos están bastante bien explicados en los documentos Auth0 (artículo en inglés), así que sólo asegúrate de añadir los permisos correspondientes en tu API.

Siguiente, necesitamos actualizar el código. Necesitamos una función para revisar si dado permiso existe en el token de acceso y retornar True si lo hace y Falsesi no:

def requires_scope(required_scope):
    """
	Determina si el objetivo requerido esta presente en el Token de Acceso
    Args:
    	required_scope (str): El objetivo requerido para acceder al recurso
    """
    token = get_token_auth_header()
    unverified_claims = jwt.get_unverified_claims(token)
    if unverified_claims.get("scope"):
            token_scopes = unverified_claims["scope"].split()
            for token_scope in token_scopes:
                if token_scope == required_scope:
                    return True
    return False

Y últimamente, puede ser como a continuación:

@app.route("/admin")
@requires_auth
def admin_view():
    """
	Endpoint Admin, solo puede ser accedido por un admin
    """
    if requires_scope("read:admin"):
        return jsonify(msg="Hello admin!")

    raise AuthError({
        "code": "Unauthorized",
        "description": "No tienes acceso a este recurso"
    }, 403)

Ahora, sólo usuarios con el permiso read:admin pueden acceder a nuestro endpoint admin.

Con el fin de probar tu implementación final, puedes seguir los pasos detallados en obtener un token de acceso (artículo en inglés) para un usuario determinado.

También puedes usar el Dashboard de Auth0 para probar los permisos, pero eso va fuera del enfoque de este artículo. Si te gustaría aprender más de ello, lee aquí.

Conclusión

Hoy hemos aprendido cómo asegurar una API Flask. Hemos explorado la forma hágalo-usted-mismo, y hemos construido una API segura con tres niveles de acceso - acceso público, acceso privado y acceso privado-focalizado.

Hay muchas cosas más que Auth0 puede hacer por tus APIs y también para las aplicaciones de tus clientes. Hoy sólo hemos raspado la superficie, y depende de tí y tu equipo cuando se trabajan en escenarios de la vida real el explorar el potencial de sus servicios.

El código completo está disponible en Github.

¡Gracias por leer! Si te gusta mi estilo de enseñanza, puedes Suscribirte a mi newsletter semanal para desarrolladores y constructores y obtener un email semanal lleno de contenido relevante.