Header Ads Widget

Ticker

6/recent/ticker-posts

Construyendo una API REST falsa y protegida por JWT con json-server

 La mayoría de las veces, cuando está creando una aplicación de front-end con bibliotecas como React, Vue o Angular, etc., necesitará trabajar con una API de back-end que puede no estar lista en ese momento, por lo que tendrá que compilar una API simulada para desarrollar contra la cual puede llevar mucho tiempo. Aquí viene: json-serverun servidor Node.js simple que le permite crear API REST completamente funcionales en cuestión de minutos sin la molestia de instalar y configurar un sistema de base de datos e incluso puede agregar autenticación JWT a sus puntos finales usando jsonwebtokenagregando algunas líneas de código.

En este tutorial, aprenderemos con un ejemplo cómo crear rápidamente una API REST y agregar autenticación JWT. También veremos cómo usarlo faker.jspara generar rápidamente datos falsos para nuestra API.

Requisitos

Antes de poder usar json-server, necesitará tener una máquina de desarrollo con Node.js y NPM instalados. Opcionalmente, debe tener cURL o Postman instalado para que pueda probar su API

Puede instalar Node.js y NPM desde el sitio web oficial .

Instalación de json-server

Dirígete a tu terminal y luego ejecuta el siguiente comando:

npm install -g json-server

Dependiendo de su configuración de npm, es posible que deba agregar sudoantes de su installcomando para poder instalar paquetes globalmente.

También puede instalar json-serverlocalmente generando un nuevo módulo Node.js usando:

mkdir myproject
cd myproject
npm init

Ingrese los detalles requeridos y presione OK para generar un nuevo package.jsonarchivo en su carpeta actual.

Luego puede instalar json-server localmente:

npm install json-sever --save

Crear puntos finales de API

Para crear sus puntos finales de API, solo necesita crear un archivo JSON con sus datos. Por ejemplo, creemos una API con /productspunto final

Cree un archivo llamado db.jsony agregue el siguiente contenido:

{
  "products": [
    {
      "id": 1,
      "name": "Product001",
      "cost": 10.0,
      "quantity": 1000
    },
    {
      "id": 2,
      "name": "Product002",
      "cost": 20.0,
      "quantity": 2000
    {
      "id": 3,
      "name": "Product003",
      "cost": 30.0,
      "quantity": 3000
    },
    {
      "id": 4,
      "name": "Product004",
      "cost": 40.0,
      "quantity": 4000
  ]
}

Este archivo actúa como la base de datos de su API.

Ahora corre json-servercon:

json-server --watch db.json

Eso es todo lo que necesita para crear su API en función de los datos que ha agregado db.jsonAhora puede crear, leer, actualizar y eliminar productos de este servidor con funciones avanzadas, como paginación, clasificación y filtrado de fábrica, que puede esperar de un servidor API real.

Paginación de datos

Puede consultar datos paginados desde su punto final de API agregando un parámetro de página a su punto final. Por ejemplo:

curl -X GET "http://localhost:3000/products?_page=1"

Esto enviará una solicitud GET para leer la primera página.

Filtrar datos

También puede agregar filtros para obtener datos filtrados simplemente agregando los filtros a su punto final. Por ejemplo:

curl -X GET "http://localhost:3000/products?name=Product004&cost=30"

& se puede utilizar para combinar varios filtros.

Clasificación de datos

Puede devolver datos ordenados desde su punto final mediante los parámetros _sort_orderPor ejemplo:

curl -X GET "http://localhost:3000/products?_sort=name&order=DESC"

Puede encontrar más funciones visitando la documentación .

Generar datos simulados

Puede agregar datos a su archivo JSON manualmente, lo que puede ser una tarea tediosa o, mejor aún, usar una herramienta para generar automáticamente datos falsos, lo json-serverque es un enfoque más práctico.

La herramienta que vamos a utilizar es faker.js

Dirígete a tu terminal y comienza instalando el paquete desde npm usando:

npm install faker

Luego cree un archivo JavaScript, puede nombrarlo como desee. LlamemosgenerateData.js

var faker = require('faker');

var database = { products: [] };

for (var i=1; i<=1000; i++) {
  database.products.push({
    id: i,
    name: faker.random.words(),
    cost: Math.random()*100,
    quantity: Math.random()*1000
  });
}

console.log(JSON.stringify(database));

Estamos usando un ciclo for para crear 1000 productos falsos con nombres, costos y cantidades falsos.

Ahora todo lo que necesita hacer es ejecutar este script y generar datos en su db.jsonarchivo usando:

node generateData.js > db.json

Adición de autenticación JWT

Json-serverproporciona muchas características de API del mundo real, como paginación y clasificación, etc. Pero en escenarios del mundo real, en la mayoría de los casos también tendrá autenticación JWT que no se proporciona de fábrica, json-serverpero puede aprender a agregarla fácilmente con unas pocas líneas de código. Así que veamos cómo podemos proteger nuestros puntos finales falsos de API usando el jsonwebtokenpaquete.

Primero comience instalando jsonwebtoken

npm install jsonwebtoken --save 

A continuación, debe crear un server.jsarchivo dentro de su carpeta y luego seguir los pasos:

Primero comienza solicitando los módulos que necesitará usar, incluidos jsonwebtokenyjson-server

const fs = require('fs')
const bodyParser = require('body-parser')
const jsonServer = require('json-server')
const jwt = require('jsonwebtoken')

Luego use el create()método para devolver un servidor Express

const server = jsonServer.create()

Llame al router()método para devolver un enrutador Express

const router = jsonServer.router('./db.json')

Ahora necesita leer y analizar JSON el users.jsonarchivo que primero necesita crear. Este archivo actúa como una tabla para usuarios registrados.

const userdb = JSON.parse(fs.readFileSync('./users.json', 'UTF-8'))

Asegúrese de crear users.jsony agregar algunos usuarios y luego guárdelo:

{
    "users": [
      {
        "id": 1,
        "name": "bruno",
        "email": "bruno@email.com",
        "password": "bruno"
      },
      {
        "id": 2,
        "name": "nilson",
        "email": "nilson@email.com",
        "password": "nilson"
      }
    ]
  }

A continuación, configure middlewares predeterminados (logger, static, cors y no-cache)

server.use(jsonServer.defaults());

O también puede agregar su propia configuración

server.use(bodyParser.urlencoded({extended: true}))
server.use(bodyParser.json())

A continuación, defina algunas constantes: SECRET_KEY se usa para firmar las cargas útiles y expiresIn para establecer el tiempo de vencimiento de los tokens de acceso JWT.

const SECRET_KEY = '123456789'
const expiresIn = '1h'

Agregue las siguientes funciones:

// Create a token from a payload 
function createToken(payload){
  return jwt.sign(payload, SECRET_KEY, {expiresIn})
}

// Verify the token 
function verifyToken(token){
  return  jwt.verify(token, SECRET_KEY, (err, decode) => decode !== undefined ?  decode : err)
}

// Check if the user exists in database
function isAuthenticated({email, password}){
  return userdb.users.findIndex(user => user.email === email && user.password === password) !== -1
}

Ahora necesita crear un /auth/loginpunto final POST que verifique si el usuario existe en la base de datos y luego crear y enviar un token JWT al usuario:

server.post('/auth/login', (req, res) => {
  const {email, password} = req.body
  if (isAuthenticated({email, password}) === false) {
    const status = 401
    const message = 'Incorrect email or password'
    res.status(status).json({status, message})
    return
  }
  const access_token = createToken({email, password})
  res.status(200).json({access_token})
})

A continuación, agregue un middleware Express que verifique que el encabezado de autorización tenga el esquema Bearer y luego verifique si el token es válido para todas las rutas excepto la ruta anterior, ya que esta es la que usamos para iniciar sesión los usuarios.

server.use(/^(?!\/auth).*$/,  (req, res, next) => {
  if (req.headers.authorization === undefined || req.headers.authorization.split(' ')[0] !== 'Bearer') {
    const status = 401
    const message = 'Bad authorization header'
    res.status(status).json({status, message})
    return
  }
  try {
     verifyToken(req.headers.authorization.split(' ')[1])
     next()
  } catch (err) {
    const status = 401
    const message = 'Error: access_token is not valid'
    res.status(status).json({status, message})
  }
})

Finalmente monte y json-serverluego ejecute el servidor en el puerto 3000 usando:

server.use(router)

server.listen(3000, () => {
  console.log('Run Auth API Server')
})

También puede montar json-serveren un punto final específico ( /api) usando:

server.use('/api', router;

Eso es todo, ahora tiene una API protegida. Agreguemos dos scripts npm para ejecutar el servidor

Abra su package.jsonarchivo y luego agregue estos dos scripts

  "scripts": {
    "start": "json-server --watch ./db.json",
    "start-auth": "node server.js"
  },

El script de inicio ejecuta json-server normalmente sin ninguna autenticación

Start-auth ejecuta nuestro server.jsscript

Ahora regresa a tu terminal y ejecuta:

npm run start-auth

Puede encontrar el código fuente para este ejemplo en este repositorio de Github

Conclusión

Ahora está listo para crear un prototipo de su aplicación web front-end sin preocuparse por las API o los datos. También puede agregar autenticación JWT a sus puntos finales de API simulados para simular más escenarios del mundo real. ¡Que te diviertas!

Publicar un comentario

0 Comentarios