Carpeta API

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?

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.

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

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/

Thunder Client for VS Code 👌

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