Luego de de esta larga búsqueda de datos dimos con la respuesta este conflicto que suelen tener algunos lectores. Te compartimos la respuesta y esperamos que te resulte de gran ayuda.
Solución:
Así es como lo hice en JavaScript. Variable global como mencionaste:
var access_token = null;
Mi URL tiene un aspecto similar a esto, por ejemplo: https: //…home.jsp#access_token=BQAXe5JQOV_xZmAukmw6G430lreF……rQByzZMcOIF2q2aszujN0wzV7pIxA4viMbQD6s&token_typem&staarer=VA
Después de que Spotify redirige al usuario a la uri que especificó en el tablero, analizo la URL del hash que contiene el token de acceso así:
var hash = window.location.hash.substring(1);
var accessString = hash.indexOf("&");
/* 13 because that bypasses 'access_token' string */
access_token = hash.substring(13, accessString);
console.log("Access Token: " + access_token);
Cuál es la salida:
Access Token: BQAXe5JQOV_xZmAukmw6G430lreF...........rQByzZMcOIF2q2aszujN0wzV7pIxA4viMbQD6s
Guardo este token de acceso en sessionStorage en caso de que el usuario navegue fuera de la página y la URL no contenga el access_token. Supongo que este es el flujo de concesión implícito, ya que desea utilizar JavaScript puro. Solo asegúrese de volver a obtener un token de acceso cada hora desde que caduquen.
Apéndice
Puedo mostrarte cómo obtener el token y usarlo en un ejemplo.
Tengo un botón en una página .html que, una vez que se hace clic, llama a una función llamada implícitaGrantFlow () en un archivo JavaScript llamado
Test.js
function implicitGrantFlow() {
/* If access token has been assigned in the past and is not expired, no request required. */
if (sessionStorage.getItem("accessToken") !== null &&
sessionStorage.getItem("tokenTimeStamp") !== null &&
upTokenTime < tokenExpireSec)
var timeLeft = (tokenExpireSec - upTokenTime);
console.log("Token still valid: " + Math.floor(timeLeft / 60) + " minutes left.");
/* Navigate to the home page. */
$(location).attr('href', "home.jsp");
else
console.log("Token expired or never found, getting new token.");
$.ajax(
url: auth_url,
type: 'GET',
contentType: 'application/json',
data:
client_id: client_id,
redirect_uri: redirect_uri,
scope: scopes,
response_type: response_type_token,
state: state
).done(function callback(response)
/* Redirect user to home page */
console.log("COULD THIS BE A SUCCESS?");
$(location).attr('href', this.url);
).fail(function (error)
/* Since we cannot modify the server, we will always fail. */
console.log("ERROR HAPPENED: " + error.status);
console.log(this.url);
$(location).attr('href', this.url);
);
Lo que estoy haciendo es verificar si la información de access_token que almacené en sessionStorage es null. Usé tiempo desde Epoch para generar cuándo se creó el token y cuándo idealmente debería caducar. Si se cumplen estos parámetros, no hago otra llamada.
De lo contrario, hago una llamada para obtener un token de acceso, que en caso de éxito me redirigirá a mi uri como mencioné en mi artículo anterior (verá que tengo la redirección en la sección .fail. Esto se debe a que no tener permiso en el servidor de mi escuela para configurar la configuración para evitar los problemas relacionados con CORS que impiden que mi llamada sea exitosa a pesar de que la URL de redireccionamiento que creo está bien).
Luego, cuando se carga mi uri de la lista blanca (que redirige a mi página de inicio) utilizo mi etiqueta.
home.jsp
Aquí, en mi etiqueta, lo hago llamar a esta función una vez que se carga la página. Esto llama a la función getAccessTokens ().
/**
* The bread and butter to calling the API. This function will be called once the
* user is redirected to the home page on success and without rejecting the terms
* we are demanding. Once through, this function parses the url for the access token
* and then stores it to be used later or when navigating away from the home page.
*/
function getAccessToken() {
access_token = sessionStorage.getItem("accessToken");
if (access_token === null)
if (window.location.hash)
console.log('Getting Access Token');
var hash = window.location.hash.substring(1);
var accessString = hash.indexOf("&");
/* 13 because that bypasses 'access_token' string */
access_token = hash.substring(13, accessString);
console.log("Access Token: " + access_token);
/* If first visit or regaining token, store it in session. */
if (typeof(Storage) !== "undefined")
/* Store the access token */
sessionStorage.setItem("accessToken", access_token); // store token.
/* To see if we need a new token later. */
sessionStorage.setItem("tokenTimeStamp", secondsSinceEpoch);
/* Token expire time */
sessionStorage.setItem("tokenExpireStamp", secondsSinceEpoch + 3600);
console.log("Access Token Time Stamp: "
+ sessionStorage.getItem("tokenTimeStamp")
+ " secondsnOR: " + dateNowMS + "nToken expires at: "
+ sessionStorage.getItem("tokenExpireStamp"));
else
alert("Your browser does not support web storage...nPlease try another browser.");
else
console.log('URL has no hash; no access token');
else if (upTokenTime >= tokenExpireSec)
console.log("Getting a new acess token...Redirecting");
/* Remove session vars so we dont have to check in implicitGrantFlow */
sessionStorage.clear();
$(location).attr('href', 'index.html'); // Get another access token, redirect back.
else
var timeLeft = (tokenExpireSec - upTokenTime);
console.log("Token still valid: " + Math.floor(timeLeft / 60) + " minutes left.");
Aquí estoy almacenando el token en el almacenamiento de sesión una vez que obtengo el token de acceso de la URL. Utilizo el proceso mencionado en mi publicación anterior, pero aquí está el JavaScript completo. Si aún no está claro después de los comentarios, hágamelo saber.
Ahora que tenemos nuestro token de acceso obtenido y almacenado, podemos hacer una llamada a la API. Así es como lo hago (y he estado usando qQuery, un ejemplo de cómo obtener las mejores pistas de un usuario).
Ejemplo de llamada de API
/**
* Function will get the user's top tracks depending on the limit and offset
* specified in addition to the time_range specified in JSON format.
* @param time_range short/medium/long range the specifies how long ago.
* @param offset Where the indexing of top tracks starts.
* @param limit How many tracks at a time we can fetch (50 max.)
*/
function getUserTopTracks(time_range, offset, limit) {
$.get(
url: 'https://api.spotify.com/v1/me/top/tracks',
headers:
'Authorization': 'Bearer ' + access_token,
,
data:
limit: limit, // This is how many tracks to show (50 max @ a time).
offset: offset, // 0 = top of list, increase to get more tracks.
time_range: time_range // short/medium/long_term time ranges.
,
success: function (response)
/* Get the items from the response (The limit) tracks. */
res = JSON.parse(JSON.stringify(response.items));
/* Get all the track details in the json */
for (i = 0; i < res.length; i++)
console.log("Track: " + res[i]);
,
fail: function ()
console.log("getUserTopTracks(): api call failed!");
);
El parámetro time_range se especifica como "long_term" para obtener las pistas principales del usuario desde el principio (lea más en los documentos de Spotify para obtener más información) además de que el desplazamiento es 0 para comenzar al principio y el límite es igual a 50, ya que ese es el máximo. buscar por llamada.
Si tengo éxito, tengo mi variable de respuesta 'respuesta' y luego quiero que la raíz del análisis comience desde la sección 'elementos' para facilitar el análisis (no tiene que hacer esto, simplemente puede usar response.xxx.items. xxx). Luego imprimo en la consola la respuesta.
Estas son las cosas básicas que puede hacer y la forma en que decide manejar los datos o almacenarlos depende de usted. No soy un experto, recién comencé a aprender programación web el semestre pasado y muchas de las prácticas que estoy haciendo pueden ser incorrectas o incorrectas.
Nos puedes añadir valor a nuestra información participando con tu experiencia en los comentarios.