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

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

Tomar examen

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.

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