Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Vue.js
  3. Consumir API REST y GraphQL
Extrait - Vue.js Desarrolle aplicaciones web modernas en JavaScript con un framework progresivo
Extractos del libro
Vue.js Desarrolle aplicaciones web modernas en JavaScript con un framework progresivo Volver a la página de compra del libro

Consumir API REST y GraphQL

Varios tipos de API (REST y GraphQL)

1. Definición e histórico

Una API (Application Programming Interface) es una interfaz de programación de aplicaciones. API es un término genérico que se utiliza tanto para las interfaces que permiten que varios componentes de la aplicación se comuniquen entre sí (lo hemos visto con algunas API nativas del navegador, por ejemplo, la API DOM, LocalStorage, etc.) como para las que permiten que diferentes aplicaciones se comuniquen.

Hoy en día, con la llegada de las SOA (Services Oriented Architecture) y los microservicios en las empresas (servicios backend de negocio construidos como servicios web), también usamos API web para hacer que los servicios web se comuniquen entre sí, a través de Internet o de la red corporativa interna, usando principalmente el protocolo de transporte HTTP.

En Internet se usa el término API para hacer referencia a interfaces de aplicaciones web, que permiten que las aplicaciones del lado del cliente (frontend) interactúen con las del lado del servidor (backend).

En el pasado, se utilizaron por primera vez las API de SOAP (Simple Object Access Protocol). Es un protocolo que se utilizaba para intercambiar objetos con el navegador, usando lenguajes como Java o C#, o entre servidores a través de mensajes en formato XML.

Pero este protocolo de intercambio tenía dos inconvenientes importantes:

  • El formato XML es mucho más descriptivo que el formato JSON, por lo que los mensajes pueden ser muy grandes.

  • SOAP describe cómo se deben comunicar las aplicaciones entre sí usando XML, lo que implica un fuerte acoplamiento entre la aplicación del lado del cliente y la del lado del servidor. Por lo tanto, una modificación de la API en el lado del servidor hace necesaria una modificación en el lado del cliente.

2. API REST

a. Definición

En la actualidad se utiliza normalmente API REST (Representational State Transfer), que es otro tipo de API web que no tiene estos defectos.

La idea de este tipo de arquitectura es poder acceder de forma estandarizada a recursos sin estado devueltos en formato HTML, JSON o XML. Los recursos se definen usando URI (Uniform Resource Identifier) y, para indicar la acción que queremos aplicar sobre estos recursos, usamos los verbos del protocolo HTTP (llamados métodos):...

Seguridad y modos de autenticación

1. Principios que hay que adoptar

Utilizar el protocolo HTTPS

S significa Secure. Este protocolo es el mismo que el protocolo HTTP, excepto que agrega una capa de seguridad adicional TLS (Transport Layer Security), que funciona de la siguiente manera:

  • El cliente se pone en contacto con un servidor y le solicita una conexión segura, ofreciendo una lista de métodos de cifrado de conexión.

  • El servidor elige uno de los métodos que puede utilizar y envía al cliente un certificado (paquete cifrado), que contiene una clave pública. Una autoridad de certificación emite este certificado (el equivalente a un notario) y comprueba que el servidor tiene una identidad verificada y segura. Esto permite protegerse contra atacantes que «olfatean» la conexión, usando un servidor pirata ubicado entre el cliente y el servidor. A continuación, el cliente puede cifrar los datos que envía con esta clave pública. Seguidamente, el servidor puede descifrar el mensaje utilizando la clave privada, que la entidad de certificación proporciona con el certificado.

Es muy recomendable utilizar este protocolo para comunicarse con la API de su aplicación en backend.

No utilice parámetros en la URL para datos sensibles

Cuando usamos una API REST, usamos los métodos HTTP POST, PUT, PATCH y DELETEGET y DELETE no utilizan un cuerpo de petición (Body). Por lo tanto, si envía parámetros, estos se colocarán en la URL.

Si envía un nombre de usuario y una contraseña en una petición GET, se mantendrán en el historial del navegador. Por lo tanto, alguien con acceso a su ordenador puede recuperarlos para reutilizarlos.

De la misma manera, un usuario desinformado que no tenga cuidado, podría publicar esta URL en un foro, red social o incluirla en un correo electrónico, sin sospechar que está compartiendo este nombre de usuario y contraseña.

Una URL está limitada a 2000 caracteres, mientras que el cuerpo de una petición puede contener varios megabytes si, por ejemplo, carga un archivo. Además, un servidor puede limitar la cantidad de parámetros aceptados en una petición. 

Prevenir los ataques por fuerza bruta

Si un atacante utiliza un robot, puede realizar múltiples peticiones...

Crear una API rápidamente con Strapi

1. Crear el backend de su API

a. Presentación

Ahora llegaremos al meollo del asunto y veremos cómo consumir un API REST y una API GraphQL. Para esto, en primer lugar usaremos Strapi para crear rápidamente una API: https://strapi.io/. Strapi es una solución para crear una API REST y GraphQL. Lo desarrolló una start-up francesa fundada en 2018. Strapi también se puede utilizar como CMS Headless.

Permite que el código de backend de una API se cree en unas pocas líneas de comando y una interfaz gráfica de front-office permite a los usuarios agregar contenido. Strapi puede utilizar varias bases de datos, como SQLite, MySQL, PostgreSQL, MariaDB y MongoDB. A continuación, la API se puede implementar en un servidor Node.js o en un host PaaS, como Netlify o Heroku.

Para una API REST, Strapi le permite usar en sus URI parámetros de clasificación, filtros y paginación.

También es posible usar múltiples complementos para agregar funcionalidad adicional.

Esta es la lista de complementos oficiales mantenidos por el equipo central de Strapi:

  • Documentation API: para generar automáticamente documentación en línea de su API, con la interfaz gráfica de Swagger.

  • Email: para enviar correos electrónicos de manera instantánea y planificada. También es posible utilizar un servicio de envío de correo electrónico de terceros para campañas de distribución masiva de correo, como SendGrid o MailChimp.

  • GraphQL: por defecto, Strapi crea una API REST. Este complemento también le permite generar una API GraphQL y ofrece un cliente gráfico GraphQL con una función de autocompletar en función del esquema GraphQL generado, para consultar la API y probar sus consultas.

  • Upload: para subir archivos al servidor backend o a un servicio como Amazon S3.

  • Roles y permisos: para gestionar la autenticación de sus usuarios con el método Bearer + JWT y gestionar los diferentes permisos de usuario. Si desea utilizar el servidor de autenticación de un proveedor externo con el protocolo OAuth2, Strapi utiliza las siguientes librerías:

  • Grant: le permite gestionar el flujo de autenticación con más de 200 proveedores para autenticar a sus usuarios.

  • Purest: le permite enviar peticiones...

Fetch y Axios para consumir API REST

1. Fetch

a. Definición y uso

Fetch es una API nativa, disponible en todos los navegadores modernos, para enviar peticiones HTTP asíncronas. Esta API sustituye al antiguo método que se utilizaba para realizar peticiones AJAX (Asynchronous JavaScript And XML) a través del objeto XMLHttpRequest. Es más flexible y ofrece potentes funciones:

  • Utiliza los objetos nativos Request y Response; por lo tanto, es particularmente adecuada para usarlo con ServiceWorkers o para alimentar la API Cache del navegador. 

  • Utiliza conceptos CORS y permite definir encabezados de petición.

El primer argumento del método fetch() es el URI de un punto final de la API y, opcionalmente, recibe un objeto de opciones como segundo parámetro.

let promesa = fetch("URI", {/* opciones */}); 

Cuando fetch() recibe la respuesta del servidor, devuelve una promesa cumplida, independientemente del estado HTTP (200+, 300+, 400+ o 500), con un objeto Response como valor de resolución.

Luego llamamos a la función .json() del objeto Response, que devuelve una promesa cumplida, con los datos del cuerpo de la respuesta en formato JSON como valor de resolución.

let promesa = fetch("URI", {/* opciones */}); 
 
promesa.then(reponse => { 
  console.log(reponse.json()); 
)); 

b. Los objetos Request y Response

En lugar de pasar el URI como primer parámetro, también puede proporcionar un objeto Request. El constructor del objeto Request recibe exactamente los mismos parámetros que fetch():

const request = new Request("miURI", {/* opciones */ }); 
 
let promesa = fetch(request)); 

Dado que las opciones del objeto Request son las mismas que las de fetch(), más adelante veremos que las opciones se pasan directamente a fetch().

Las propiedades del objeto Request:

Propiedad

Descripción

method

El método HTTP utilizado: "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS".

mode

El modo CORS de la petición, que recibe el siguiente valor:

  • ’cors’: para permitir una petición entre dominios (modo predeterminado).

  • ’no-cors’: para permitir una petición entre dominios, pero impidiendo modificar el método con un valor que no sea GET o POST...

Apollo para consumir las API GraphQL

1. Instalación

a. Instalación con Vue CLI

Apollo es un conjunto de herramientas para crear una API GraphQL en el servidor y consumir cualquier API GraphQL en el cliente.

Para más información: https://www.apollographql.com/

La comunidad Vue.js ha desarrollado el plugin Vue Apollo para poder integrar fácilmente el cliente Apollo en un proyecto Vue.js. La documentación oficial está disponible en la siguiente dirección: https://vue-apollo.netlify.app/

Hay diferentes tipos de instalación. La forma más sencilla es utilizar Vue CLI cuando usa una API GraphQL creada con Apollo (este no es el caso con Strapi).

Así puede:

  • Instalar un proyecto de backend usando el servidor Apollo para su API.

  • Instalar el motor que permite utilizar un esquema GraphQL creado en el sitio de Apollo.

  • Instalar y configurar el cliente GraphQL.

  • Generar ejemplos de código en su proyecto de frontend para consumir su API de backend Apollo.

Si está utilizando Vue CLI, el complemento se puede instalar de manera muy sencilla y sin ninguna configuración con el siguiente comando:

vue add apollo 

También es posible instalarlo a través de la interfaz gráfica:

vue ui 

b. Instalación manual para consumir una API Strapi

Usamos la API GraphQL de Strapi. Por tanto, vamos a instalar solo los siguientes elementos necesarios para consumirla:

  • vue-apollo: para la integración con Vue.js.

  • graphql: para utilizar la sintaxis de consulta GraphQL.

  • apollo-client: para consumir una API GraphQL.

  • apollo-link: permite usar interfaces para enviar y recibir respuestas GraphQL con el cliente Apollo.

  • apollo-link-http: permite usar la interfaz http con apollo-link.

  • apollo-cache-inmemory: permite mantener la respuesta de sus consultas GraphQL en caché para no volver a ejecutarlas varias veces si utiliza los mismos datos. 

  • graphql-tag: permite parsear las peticiones GraphQL definidas en cadenas de caracteres en el código y convertirlas al formato AST (Abstract Syntax Tree) para que las utilice el cliente Apollo. Las peticiones se definen en cadenas de caracteres en el código que ESLint analizará.

 Con su terminal, ubicado en la carpeta /frontend, escriba el siguiente comando para instalar las dependencias necesarias:

// con npm 
npm install --save vue-apollo graphql apollo-client apollo-link...