7. APIS Externas con JS

En este tema aprenderemos a:

  1. Consumir APIs desde JS

  2. Usar el Fetch API para el consumo de servicios Web

  3. Uso del API de autenticación usando el protocolo Oauth

Está organizado en 8 talleres de unas 3 sesiones de clase. En total unas 24 sesiones de clase más tu trabajo en casa.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

Video Clase

7.1. Consumir API REST

Video Clase

  1. Repasa la clase Servicios Web API REST

  2. Al desarrollar la interfaz en cliente:

    1. Usaremos programación asíncrona (ya visto en Programación Funcional y Asíncrona en JS)

    2. Usaremos el Fecth API (no XHR ni jQuery ni similar): AJAX moderno: El API Fetch

      1. Usas la información para modificar el DOM

      2. O la información del código de estado (porque puede haber algún problema)

  3. Puedes ver el siguiente tutorial

    // Construye un objeto JS
// con datos a enviar en la solicutud POST
let _datos = {
       campo1: "valor1",
       campo2: "valor2",
       campo3: "valor3"
};

// Llamada al API enviándole datos vía objeto JS
// El segundo parámetro construye un objeto con
// method, body y headers para construir la solicitud (request) HTTP

// Recuerda que las promesas se van encadenando
// Llama al API, la respuesta la guarda en response, que la convierte en json
// ... que luego utilizas para mostrar en consola

fetch('URL_API', {
       method: "POST",
       body: JSON.stringify(_datos),
       headers: {"Content-type": "application/json; charset=UTF-8"}
       })
       .then(response => response.json())
       .then(json => console.log(json));
       .catch(err => console.log(err));

  4. Recuerda que hay varios tipos de autenticación (Consumir el API)

    1. Pública

    2. Basada de Claves/Tokens

    3. Usando APIs de autenticación

Actividad T07-A01a. Aplicación Web con un API (Ejemplo 1)

Usa JS para utilizar el API Chuck Norris Jokes y crear una pequeña aplicación web que:

  1. Me muestre un chiste aleatorio (chiste, la fecha de actualización y la categoría a la que pertenece).

  2. Que me muestre una lista de todas las categorías disponibles. La lista tiene un url para mostrar un chiste de esa categoría en concreto

  3. Y si quiero, que me muestre un chiste aleatorio, de una búsqueda por un texto concreto (por ejemplo «spain»)

Actividad T07-A01b. Aplicación Web con un API (Ejemplo 2) :class: note

Usa JS para generar una aplicación web sencilla que usando el API OpenWeather me muestre, para una ubicación previamente seleccionada:

  1. El tiempo y humedad (hoy y el 15 de Julio del 2021)

  2. Presión Atmosférica y porcentaje de nubosidad (hoy y el 15 de Julio del 2021)

  3. Una descripción del tiempo en esa ubicación

7.2. Integración de Varias APIS

Video Clase

El uso de programación asíncrona permite integrar fácilmente varias APIs:

  1. APIs Internas: Web APIs

  2. APIs externas: de terceros

Actividad T07-A02. Integrando varias APIs

Crea una aplicación que, use las dos APIs del ejercicio anterior (API Chuck Norris Jokes y OpenWeather) pero integrado en una sola aplicación. Los requisitos son los siguientes:

  1. La información que se consume estará en componentes separados.

    1. Uno con id «jokes»

    2. Otro con id «weather».

  2. Le añadirás la información del estado HTTP (respuesta el API, y alguna cabecera, por ejemplo la fecha), para saber leer el mensaje de respuesta.

  3. Existirá un botón que, al pulsarlo, genere nueva información sobre un chiste aleatorio. Sería el mecanismo de control del primer API.

  4. Cada 20 segundos, se actualizará la información del tiempo y se imprimirá la fecha y la hora de la última actualización. Sería el mecanismo de control del segundo API

7.3. API de Imágenes

Video Clase

  1. El resultado de un API no tiene porqué ser sólo texto, o JSON o XML, puede ser cualquier recurso.

  2. Por ejemplo, un API de Imágenes: Unsplash API

  3. El proceso de implantación es:

    1. Crear una cuenta de desarrollador

    2. Registras tu aplicación (modo demo / educational)

    3. Desarrollas tu aplicación (sin usar las librerías)

  4. 3 ejemplos para revisar:

    1. Ver los detalles de una imagen concreta

    2. Una foto aleatoria

    3. Buscar fotos por palabra

  5. Es un API RESTFul (no sólo permite leer)

Actividad T07-A03. Revisión del API de Unsplash

Se trata de revisar el Unsplash API a un nivel básico para poder implementar una aplicación sencilla. La solución a estas preguntas te pueden ayudar a entender el API:

  1. ¿Cual es la documentación oficial del API?

  2. ¿Cómo hago para usar el API? ¿Es necesario algún tipo de autenticación o registro?

  3. ¿Puedo utilizar el API en una aplicación cliente (browser-based)?¿Y una aplicación servidor (web server)?

  4. ¿Cual es el url para ver una imagen concreta, teniendo su id?

  5. ¿Qué tipo de respuesta me da?

  6. ¿Cómo obtengo el título, el autor, la fecha y el URL de la imagen?

  7. ¿Puedo tener diferentes tipos de imágenes (diferentes resoluciones)?

  8. ¿Cual es el url para buscar imágenes según una palabra clave? ¿Cómo es la respuesta? ¿Cuántas imágenes me devuelve? ¿Cómo accedo a ellas?

  9. ¿Cual sería el URL para acceder a las estadísticas del último mes?

  10. ¿Qué significa que sea un API RESTFul? ¿Podría subir una foto directamente?

7.4. Implementando el API de Imágenes

Video Clase

Hay multitud de aplicaciones, algunos ejemplos:

  1. Mostrar una imagen concreta y todos sus detalles

  2. Mostrar 10 imágenes como resultado de una búsqueda por palabra clave

  3. Ver un listado de los temas (topics)

  4. Ver las estadísticas de UnSplash del último mes

Y mucho más, aquí nos estamos concentrando sólo en obtener información (Operación R ead).

Actividad T07-A04. Aplicación de búsqueda de imágenes

Creas una aplicación que, usando el API de UnSplash, tenga los siguientes requisitos:

  1. Un cuadro de búsqueda.

  2. Un selector para definir el número de imágenes

  3. Al pulsar un botón, muestra las imágenes (en formato miniatura) que cumplan con ese criterio de búsqueda,

  4. Al seleccionar una de las imágenes, se abre una página específica con los detalles de esa imagen

  5. Y genera tres enlaces a la imagen (a esta imagen pero con distinta resolución)

7.5. APIs de Autenticación

Video Clase

  1. La autenticación y la autorización es (era) un problema complejo y no estándar. Algunos conceptos

    1. Sistema AAA: Autenticacion, Autorización y Auditoría

    2. Sistema IAM: Identity Access Management

    3. Sistema SSO: Single Sign On

  2. El protocolo OAuth es una solución a esa complejidad.

    1. Es un estándar abierto (RFC 6749)

    2. Entorno a una arquitectura consumidor (cliente) y proveedor (servicio)

    3. Independiente de la plataforma y el servicio (protocolo estándar «internet»)

  3. Arquitectura del Protocolo:

    1. Roles

      1. Application (el cliente). Tu aplicación consumidora

      2. APIs. El servicio proveedor:

        1. Resource

        2. Authorization

      3. Users. El usuario (y los recursos que quiere compartir)

    2. Tipos de garantías (grant types)

      1. Obtener un código de autorización

      2. Password

      3. Uso de credenciales

    3. Flujo de autorización. Depende de la aplicación

      1. web server. Basado en el servidor

      2. browser-based. Basado en el cliente (el que usaremos)

      3. mobile apps. Para apps

  4. Entender el flujo de autorización OAuth

    1. Al aplicación solicita autorización

    2. El usuario lo acepta, o lo deniega

    3. Si lo acepta, la aplicación tiene autorización de acceso y lo solicita al servidor

    4. El servidor acepta la petición y devuelve un token de acceso

    5. Con el token de acceso la aplicación accede al recurso

    https://www.redeszone.net/app/uploads-redeszone.net/2019/10/oauth_flow_diagram.png

Actividad T07-A05. Entender Arquitectura OAuth

Preguntas sobre la arquitectura y el protocolo

7.6. Implementando OAuth 2.0

Video Clase

  1. De todos los escenarios posibles, usamos el basado en cliente (browser-based app). El flujo de la aplicación es:

    1. Crear un código (code verifier)

    2. Crear una firma SHA256 y codificarlo en base-64 (code challenge)

    3. Construyes el url para solicitar la autorización

    4. Solicitas la autorización

    5. Obtienes un código que usas para acceder a un recurso (al que te dieron permiso)

  2. Ver un ejemplo de implementación

    1. OAuth Request

    2. OAuth Redirect Handling

    3. Obtienes el AccessToken - JWT (que es el objetivo)

  3. El ejemplo usa varias funciones de ayuda

  4. Más material de referencia:

    1. Stackoverflow . En inglés, explicacion del protocolo con detalle.

    2. Digitalocean . En inglés, completa pero orientada a sus servicios, con un URLs de ejemplo

    3. ¿Qué es Oauth? . En español y muy sencilla.

    4. Explicación Completa . En español y explicación muy completa.

Actividad T07-A06. Implementando OAuth

Usamos (y comprendemos) el ejemplo pkce-vanilla-js

Añadir Autenticación Google a tu aplicación

Se trata de que sólo un usuario Google puede acceder a tu aplicación desarrollada en las clases anteriores.

Añadirás simplemente el logo y el correo electrónico a la aplicación (y un botón de cerrar sesión).

Si el usuario rechaza la autorización, le mostrarás una página específica y no podrá usar la aplicación

7.7. Entendiendo el API de Youtube

(revisando el nivel de complejidad)

7.8. Implementando el API de Youtube

(revisando el nivel de complejidad)