Carpeta API

6/27

Lectura

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.

Aportes 12

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Dejo por acá la llamada con Postman.

  1. Selecciona el método POST y coloca la url: https://eu.battle.net/oauth/token

  2. Luego dirígete al tab Authorization, en el TYPE selecciona Basic Auth, coloca tu clientID en Username y tu clientSecret en Password.

  3. Luego dirígete al tab Body, chequea la opción form-data, en la key coloca grant_type y en value coloca client_credentials.

  4. 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

De esta forma seria en Insomnia

Pregunta:

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

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

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

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

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

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.

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

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

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