如何使用隐式授权流获取应用程序请求授权答案

【问题标题】：How to fetch application request authorization with Implicit Grant Flow如何使用隐式授权流获取应用程序请求授权
【发布时间】：2019-11-25 05:05:19
【问题描述】：

我正在尝试使用以下代码将用户重定向到 Spotify 帐户服务的 /authorize 端点：

        var state = generateRandomString(16);
        function login() {
            var client_id = '02a53684fa064d66a9dff00afeb42fd7';
            var redirect_uri = 'https://localhost:3000';
            var url = new URL('https://accounts.spotify.com/authorize');
            var scope = 'user-read-private user-read-email';
            var params = {
                client_id: client_id,
                response_type: 'token',
                redirect_uri: redirect_uri,
                scope: scope,
                state: state
            };
            url.search = new URLSearchParams(params).toString();
            fetch(url, {
                mode: 'no-cors'
            }).then(response => response.json())
            .catch(error => alert(error));
        }

这样成功创建了请求url：

https://accounts.spotify.com/login?continue=https%3A%2F%2Faccounts.spotify.com%2Fauthorize%3Fscope%3Duser-read-private%2Buser-read-email%26response_type%3Dtoken%26redirect_uri%3Dhttps%253A%252F%252Flocalhost%253A3000%26state%3DofeflC6YYWLbW7sl%26client_id%3D02a53684fa064d66a9dff00afeb42fd7

尽管已成功请求授权访问，但为什么我无法在浏览器上看到 Spotify 登录屏幕？

【问题讨论】：

这是在浏览器上还是在服务器上（就像节点一样）？在服务器上，here is an example 他们调用重定向以打开 Spotify 登录屏幕。
@KevinGuebert 他们在示例中使用了 ExpressJS。我没有使用它。我没有进行 fetch 调用，而是使用了window.location = url;，这似乎有效。
不错！很高兴你得到它！

标签： javascript oauth spotify

【解决方案1】：

我自己不久前也遇到过同样的问题。如果其他人需要一种使用 JQuery 的方法，你可以尝试这样的事情：

$.ajax({
    url: auth_url,                      // Authorize url: https://accounts.spotify.com/authorize
    type: 'GET',
    data: {
        client_id: client_id,        // The id given when registering your application.
        redirect_uri: redirect_uri, // The uri specified on the Spotify dashboard.
        scope: scopes,             // Your scopes that the user will authorize.
        response_type: 'token',   // The response type you are expecting.
        state: state             // The randomGenerateString() function from the quick start guide.
    }
}).done(function callback(response) {
    /* Redirect user to home page */
    console.log("Success");
    $(location).attr('href', this.url);  // On success, user will be redirected to your redirect uri you specified on the dashboard.

}).fail(function (error) {
    console.log("Error happened: " + error.status);
    // Handle error ...
});

我是 Web 开发的新手，所以如果我传播不良做法或让事情变得更加困难，请原谅我。

【讨论】：