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

Question

我尝试使用以下代码将用户重定向到 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));
        }

成功创建了如下请求网址:

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 登录屏幕？

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

我对网络开发非常陌生，所以如果我传播不好的做法或让事情变得更困难，请原谅我。