Configuración de Axios para llamadas a APIs de Diablo III

Clase 6 de 27 • Curso Avanzado de Vue.js 2

Contenido del curso

Bienvenida al curso

1
Vue consumiendo APIs oficiales de Blizzard
13:27 min

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de los componentes y layouts de nuestro proyecto

Agregando funcionalidades avanzadas a nuestro proyecto

Hora de configurar axios, la librería que utilizaremos para hacer las llamadas a las APIs de Diablo III. Vamos a tener dos tipos de llamadas a las APIs:

La llamada de OAuth, para obtener el token de acceso.
Las llamadas a las APIs que nos van a devolver los datos del juego: perfil de usuario, objetos, etc.

Por lo tanto, en la carpeta /api vamos a crear varios ficheros JavaScript, que contendrán las funciones con las llamadas a las APIs que necesitemos. Creamos los tres ficheros: oauth.js, search.js y season.js.

Dentro de nuestra carpeta /api deberían estar los archivos de la siguiente forma:

📂 src/
└──📂 api/
   ├── oauth.js
   ├── search.js
   └── season.js

> Puedes leer la documentación del flujo OAuth desde este enlace: https://develop.battle.net/documentation/guides/using-oauth/client-credentials-flow

Abrimos el fichero oauth.js con nuestro editor de texto, y vamos a empezar a configurar axios para utilizarlo y hacer una llamada HTTP de tipo POST para obtener el token.

Recuerda que el clientId y el clientSecret los hemos creado anteriormente y puedes acceder a ellos en este enlace: https://develop.battle.net/access/clients/

// oauth.js

// Traemos el método post de 'axios'
import { post } from 'axios'

// Cogemos los datos de nuestra cuenta de Blizzard
// 🔥 Recuerda que debes usar tus datos a la hora de hacer las llamadas a las APIs
// 🔥 Como dice la documentación, tienes un máximo de llamadas por segundo y por hora a la API. 
// 🔥 Estos datos deberían ser privados
const clientId = 'db5d7d6e7db543e0a3e13cf5812ce76'
const clientSecret = 'wuf4Ym9jX5kOurOUnmnB8wdBO6VKSm6'

// API URL para hacer oauth
const region = 'eu'
const API_URL = `https://${region}.battle.net/oauth/token`

Ya tenemos los datos necesarios para obtener el token definidos. Es hora de crear la función que haga uso de estos datos. Por lo tanto, en nuestro fichero oauth.js añadimos el siguiente contenido:

> 💡 Puedes ver la documentación completa de la configuración de axios en este enlace.

// ...oauth.js

// Creamos la función getToken
function getToken () {
  
  // Creamos un objeto de tipo 'FormData', que es un conjunto de pares clave/valor
  const body = new FormData()
  
  // Con 'append', le agregamos la clave 'grant_type' y el valor 'client_credentials'
  body.append('grant_type', 'client_credentials')
  
  // En este objeto llamado 'config' vamos a insertar algunos parámetros de configuración
  // que necesitamos para hacer la llamada.
  const config = {
    headers: { 'Content-Type': 'multipart/form-data' },
    // Nuestros datos de cliente para OAuth: id y secret
    auth: { username: clientId, password: clientSecret }
  }

  // Hacemos una peticion POST
  // Le pasamos la URL como primer parámetro
  // Como segundo, el body, que es un FormData
  // Y la configuración como tercer argumento
  return post(API_URL, body, config)
}

// Exportamos la función para poder usarla más tarde
export {
  getToken
}

Lo único que hemos hecho ha sido seguir lo que dice la documentación de battle.net acerca de cómo obtener un token para utilizarlo en las llamadas a las APIs:

> To request access tokens, an application must make a POST request with the following multipart form data to the token URI: grant_type=client_credentials > The application must pass basic HTTP auth credentials using the client_id as the user and client_secret as the password.

🔥 Bonus: Los formularios de HTML tienen 3 tipos de encoding:

application/x-www-form-urlencoded (valor por defecto)
multipart/form-data (este es el que hemos usado)
text/plain (no deberías usar este nunca)

Ya tenemos la función para obtener el token. Prueba a hacer una llamada de prueba con Postman para ver si funciona.

> ¿No usas Postman? ¿Qué alternativa a Postman usas?

Lo siguiente que vamos a hacer es ir al fichero principal (main.js) y trabajar sobre él para hacer la llamada a la API, obtener el token de acceso y posteriormente guardarlo.

Comentarios

Juan Sanchez

student•

Dejo por acá la llamada con Postman.

Selecciona el método POST y coloca la url: https://eu.battle.net/oauth/token
Luego dirígete al tab Authorization, en el TYPE selecciona Basic Auth, coloca tu clientID en Username y tu clientSecret en Password.
Luego dirígete al tab Body, chequea la opción form-data, en la key coloca grant_type y en value coloca client_credentials.
Luego da click en el botón azul Send y verás la siguiente respuesta: { "access_token": "EUiohFKNYVlnSS3i2Na9RlPOVYeqw8MV27", "token_type": "bearer", "expires_in": 86399 }

Acá el documento en el Drive para mejor comprensión: https://drive.google.com/file/d/1GaFSvYVydziW9A8CYasvk7BocStjJ1Zp/view?usp=sharing

Luis Matos

student•

Muchas gracias!

Usuario anónimo

user•

Excelente, funcionó perfectamente y les comparto la captura de pantalla en la etiqueta BODY de postman para quienes inicien con esta herramienta para testear APIS:

Captura de pantalla de POSTMAN - pestaña de body

José Barrios Pulido

student•

De esta forma seria en Insomnia

Fabián Antonio Salgado Sepúlveda

student•

También uso insomnia, gracias por compartir.

Jaime Ortiz

student•

Pregunta:

const body = new FormData()
// De donde salió la clase FormData() viene nativa con JS?

Jhonathan Alfonso

student•

Hola, esto hace parte de los Web Workers y lo que hace es crear un objeto de FormData.

Jorge Baumann

teacher•

Correcto, es nativo de JavaScript, y sirve para enviar datos de un formulario con clave:valor (Mira más aquí: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData )

Carlos Eduardo Gomez García

teacher•

Genial! ¿Cuál es la diferencia entre enviar un Form Data y un objeto JSON? Porque, por ejemplo con la API de PayPal puedo enviar un JSON normal

Jorge Baumann

teacher•

Son formatos distintos. FormData no me gusta, es mas complicado para depurar y ver la información que llega

Diego Martínez

student•

Tengo una duda: ¿De qué forma evitamos que nuestro ClientSecret quede expuesto al subir el código a GitHub?

Jorge Baumann

teacher•

Al final del curso lo explicamos. Usamos variables de entorno. De momento puedes poner tu repositorio privado o no subir cambios, hasta que lo tengas todo listo.

Diego Martínez

student•

Gracias, ya casi llego por ahí entonces.

Adrian Ernesto German Becerra

student•

Por si alguien está intentando realizar este curso en 2024 y no conoce muy bien axios, hay algunos detalles que debes cambiar ya que ahora no funciona igual (te sugiero que lo cambies desde este punto para que te ahorres dolores de cabeza más adelante).

Al importar post de axios

// Traemos el método post de 'axios'
import { post } from 'axios'

Esto es algo que axios detecta como no valido, lo que en realidad debes importar es toda la libreria de axios:

// Traemos la liberia de 'axios'
import axios from 'axios';

Y en el return vamos a cambiar:

return post(API_URL, body, config)

Por:

return axios.post(API_URL, body, config);

Y eso es todo, te ahorraras varios errores mas adelante. espero haber ayudado a alguien, saludos.

Cristhian Daza

student•

Para usar variables de entorno y no exponer nuestro clientId y/o clientSecret, debemos crear en la raíz de nuestro proyecto un archivo llamado .env, dentro podemos agregar nuestras variables, las cuales deben iniciar VUE_APP (si no empiezan así, no se va a reconocer la variable):

VUE_APP_CLIENTE_ID='db5d7d6e7db543e0a3e13cf5812ce76'
VUE_APP_CLIENT_SECRET='wuf4Ym9jX5kOurOUnmnB8wdBO6VKSm6'

NOTA Para que git no rastree este archivo debemos agregar esta linea en .gitignore:

.env

Y listo, para que los cambios se vean reflejados se deben reiniciar el servidor, así ya podemos acceder a nuestras varíales con

process.env.VUE_APP_CLIENTE_ID
process.env.VUE_APP_CLIENT_SECRET

Angel Infanti

student•

Postman también tiene una extensión para los navegadores

David Alejandro Abreu Abreu

student•

Seria bueno formatear el código con color para legibilidad, nueva feature para los frontend developers de platzi 😄

Jorge Baumann

teacher•

¿Qué tema de color sugieres tú?

David Alejandro Abreu Abreu

student•

Lo formatearon recién? O no cargaba en mi navegador por el internet? 😮 Así esta excelente 👍🏽

Juan Esteban Galvis

student•

Curso de Postman: https://platzi.com/cursos/postman/

Funciona perfecto, simplemente la URL, autorización (Basic Auth) y Form-data con los dos valores que dice la documentación.

Jorge Baumann

teacher•

Genial. 👌

Daniel Ortez

student•

Una buena alternativa a Postman es Insomnia: https://insomnia.rest/

Jorge Baumann

teacher•

También lo he usado, es más ligero que postman y eso me gusta 👌

José Gersain Osorio Morales

student•

Thunder Client for VS Code 👌

Tony Gael

student•

Buenas! alguien sería tan amable de indicarme como hacer la prueba con Postman o Insomnia? Muchas Gracias! :-) me envía un mensajito por whatsapp o telegram +5493764110177

Jorge Baumann

teacher•

¿Ya tienes tu clientSecret y tu clientId?

Tony Gael

student•

Profe! recién veo la notificación de tu respuesta! tenía si el clientSecret y el clientId, aún no se como usar Postman.

// oauth.js

// Traemos el método post de 'axios'
import { post } from 'axios'

// Cogemos los datos de nuestra cuenta de Blizzard
// 🔥 Recuerda que debes usar tus datos a la hora de hacer las llamadas a las APIs
// 🔥 Como dice la documentación, tienes un máximo de llamadas por segundo y por hora a la API. 
// 🔥 Estos datos deberían ser privados
const clientId = 'db5d7d6e7db543e0a3e13cf5812ce76'
const clientSecret = 'wuf4Ym9jX5kOurOUnmnB8wdBO6VKSm6'

// API URL para hacer oauth
const region = 'eu'
const API_URL = `https://${region}.battle.net/oauth/token`

// ...oauth.js

// Creamos la función getToken
function getToken () {
  
  // Creamos un objeto de tipo 'FormData', que es un conjunto de pares clave/valor
  const body = new FormData()
  
  // Con 'append', le agregamos la clave 'grant_type' y el valor 'client_credentials'
  body.append('grant_type', 'client_credentials')
  
  // En este objeto llamado 'config' vamos a insertar algunos parámetros de configuración
  // que necesitamos para hacer la llamada.
  const config = {
    headers: { 'Content-Type': 'multipart/form-data' },
    // Nuestros datos de cliente para OAuth: id y secret
    auth: { username: clientId, password: clientSecret }
  }

  // Hacemos una peticion POST
  // Le pasamos la URL como primer parámetro
  // Como segundo, el body, que es un FormData
  // Y la configuración como tercer argumento
  return post(API_URL, body, config)
}

// Exportamos la función para poder usarla más tarde
export {
  getToken
}

Configuración de Axios para llamadas a APIs de Diablo III

Bienvenida al curso

Vue consumiendo APIs oficiales de Blizzard

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de Aplicaciones Vue.js con API de Diablo III

Desarrollo de Aplicaciones con APIs de Blizzard: Guía Completa

Estructura y gestión de carpetas en proyectos Vue.js

Instalación y configuración de librerías en Vue con Bootstrap