Question

我正在尝试使用纯JavaScript进行Spotify身份验证流，以便用户可以登录，然后我可以为其帐户添加新的播放列表。根据我已阅读的说明，我使用一个auth弹出窗口，一旦他们登录，便会在URL中包含访问令牌。我现在有一个弹出窗口，用户可以通过它进行身份验证，一旦执行此操作，它将在URL中具有访问令牌。

我需要从弹出窗口中获取该网址并将其保存为全局变量，但是我在弄清楚如何在javascript中执行此操作时遇到了麻烦。

https://codepen.io/martin-barker/pen/YzPwXaz

我的Codepen使用let popup = window.open(打开一个弹出窗口，我可以在弹出窗口中运行一个函数来检测用户何时成功进行身份验证以及URL是否更改吗？在这种情况下，我想保存要解析的网址并关闭弹出窗口

我的JavaScript代码如下：

async function spotifyAuth() {
let result = spotifyLogin()
}

//open popup
function spotifyLogin() {
console.log("inside spotifyLogin, opening popup")

let popup = window.open(`https://accounts.spotify.com/authorize?client_id=5a576333cfb1417fbffbfa3931b00478&response_type=token&redirect_uri=https://codepen.io/martin-barker/pen/YzPwXaz&show_dialog=true&scope=playlist-modify-public`, 'Login with Spotify', 'width=800,height=600')

}

//get url from popup and parse access token????
window.spotifyCallback = (payload) => {
console.log("inside window? ") //this line never appears in console
popup.close()
fetch('https://api.spotify.com/v1/me', {
headers: {
'Authorization': `Bearer ${payload}`
}
}).then(response => {
return response.json()
}).then(data => {
// do something with data
})
}

Answer 1

这是我在Java脚本中所做的事情。像您提到的全局变量：

var access_token = null;

我的网址看起来像这样：https://...home.jsp#access_token=BQAXe5JQOV_xZmAukmw6G430lreF......rQByzZMcOIF2q2aszujN0wzV7pIxA4viMbQD6s&token_type=Bearer&expires_in=3600&state=vURQeVAoZqwYm4dC

Spotify将用户重定向到您在仪表板上指定的uri后，我将解析包含访问令牌的哈希的URL，如下所示：

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);

输出为：

Access Token: BQAXe5JQOV_xZmAukmw6G430lreF...........rQByzZMcOIF2q2aszujN0wzV7pIxA4viMbQD6s

我将访问令牌保存在sessionStorage中，以防用户导航离开页面并且URL不包含access_token。我假设这是隐式授予流程，因为您想使用纯Java脚本。只需确保它们过期后每小时重新获取访问令牌即可。

请告诉我这是否有帮助。

编辑（12/18/2019）：抱歉耽搁了，我正在为学校完成决赛。我可以在示例中向您展示如何获取令牌并使用它。

我在.html页面上有一个按钮，一旦单击该按钮，就会在名为

的javascript文件中调用一个名为hiddenGrantFlow（）的函数。

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);
    });
}

我正在做的是检查我存储在sessionStorage中的access_token信息是否为空。自从Epoch以来，我花了一些时间来生成令牌的创建时间以及理想情况下令牌的到期时间。如果满足这些参数，那么我将不会再打电话。否则，我打电话来获取访问令牌，如上一篇文章所述，访问令牌成功后会将我重定向到uri（您会在.fail部分中看到重定向。这是由于我没有在我的学校服务器上获得设置权限，以绕过与CORS相关的问题，即使我创建的重定向URL正常，也会阻止我的通话成功。）

然后，当我的白名单uri被加载（重定向到我的主页）时，我就使用了我的标签。

home.jsp

<body onload="getAccessToken()">

在我的标签中，页面加载后，我将其称为此函数。这将调用函数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 hoe 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")
                + " seconds\nOR: " + 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.");
    }

从URL获取访问令牌后，我将令牌存储在会话存储中。我使用我先前的文章中提到的过程，但这是完整的Java脚本。如果在评论后仍不清楚，请告诉我。

现在，我们已经获取并存储了访问令牌，现在可以进行api调用了。这是我的操作方式（一直在使用JQuery，这是获取用户热门曲目的示例）。

示例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!");
    }
});

参数time_range被指定为“ long_term”，以获取用户自开始以来的热门曲目（有关更多信息，请参见Spotify的文档，以了解更多信息），此外，offset从开始处开始为0，限制为50，因为是每次调用的最大提取次数。

成功后，我有一个响应变量'response'，然后我希望解析的根源从'items'部分开始，以使解析变得更加容易（您不必这样做，您只需使用response.xxx .items.xxx）。然后，我将响应打印到控制台。

这是您可以做的基本事情，您决定如何处理数据或存储数据由您决定。我不是专家，我仅在上学期开始学习网络编程，而我正在做的许多实践可能是错误的或不正确的。我希望这有帮助，如果可以的话，我可以投票赞成:)吗？

Answer 2

您在正确的轨道上。

弹出窗口会将您重定向到您在redirect_uri=...下添加的网站。它将代码和状态查询参数添加到该网址。

因此，在充当redirect_uri主机的网页上，您可以解析完整的URL。

不可能在单个页面上完成。

从javascript [spotify auth]中的弹出窗口获取访问令牌URL

2 个答案: