API does not support other users

[TobiasLama]

Plan

Premium

Country

Sweden

Device

Desktop PC

Operating System

Windows 10 running Google Chrome

My Question or Issue

I'm having a hard time fully explaining this issue, but here goes!

I'm doing a small hobby project that'll recommend users a random album from their library and/or playlist(s). I'm currently trying to correctly implement user authorization, but have run into a problem and don't know how to proceed.

According to the developer docs, after a successful login/authorization you should get an authorization code that you can exchange for an access token. I don't, though; I get the access token immediately instead, for some reason.

This wouldn't be as much of an issue if not for the fact that when I try to pass this access token to get user information, it works for my own account that I'm developing the website on, but not for other users. I made a dummy Spotify account for testing, which gives me a 403 error when I try to acess its playlists (I gave it a couple ones for testing).

Code for fetching playlists, logging in and acquiring the access token (not yet finished) will be appended at the end of the question. Sorry in advance about the bad code - it's my first time in a good while trying my hand at web development.

Many thanks in advance for any and all replies!

__________________________________

function login(){

    alert("Logging in...");

    var CLIENT_ID = [REDACTED];

    var REDIRECT_URI = "http://127.0.0.1:5500/index.html";

    function getLoginURL(scopes) {

        return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +

          '&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +

          '&scope=' + encodeURIComponent(scopes.join(' ')) +

          '&response_type=token' +

          '&show_dialog=true';

    }

    location.href = (getLoginURL(["user-read-email", "user-library-read", "playlist-read-private"]))

}

function getPlaylists(){

    alert("Trying to fetch playlists...");

    var xmlHttp = new XMLHttpRequest();

    var currentUrl = window.location.href;

    var ACCESS_TOKEN = currentUrl.split("access_token=")[1].split("&")[0];

    var theUrl = "https://api.spotify.com/v1/me/playlists?limit=5";

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

            alert(xmlHttp.responseText);

            document.getElementById("playlistResult").textContent = xmlHttp.responseText;

        }

        else if (xmlHttp.readyState == 4 && xmlHttp.status != 200){

            alert("Request failed, status code is " + xmlHttp.status);

            var responseHeaders = xmlHttp.getAllResponseHeaders();

            alert(responseHeaders);

        }

    }

    xmlHttp.open("GET", theUrl, true);

    xmlHttp.setRequestHeader("authorization", `Bearer ${ACCESS_TOKEN}`);

    xmlHttp.send(null);

}

function requestToken(){

    alert("Trying to fetch access token...");

    var CLIENT_ID = [REDACTED];

    var REDIRECT_URI = "http://127.0.0.1:5500/index.html";

    var CLIENT_SECRET = [REDACTED];

    function getTokenURL() {

        alert("Starting getTokenURL");

        function getAuthCode(){

            alert("Starting getAuthCode");

            var current_url = location.href;

            const split_url = current_url.split("code=");

            alert(split_url.length)

            if (split_url <= 1){

                alert("Auhorization code not found. Probably didn't finish authentication correctly")

            }

            else{

                const auth_array = split_url[1].split("&");

                var auth_code = auth_array[0];

                alert(`Authorization code is: ${auth_code}`);

                return auth_code;

            }

        }

        var token_url = '

'https://accounts.spotify.com/api/token?' +

          '&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +

          '&code=' + getAuthCode() +

          '&grant_type=authorization_code';

        alert(token_url);

        return token_url;

    }

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

            alert("Successfully acquired access token.")

            alert(xmlHttp.responseText);

            document.getElementById("tokenResult").textContent = xmlHttp.responseText;

        }

        else if (xmlHttp.readyState == 4 && xmlHttp.status != 200){

            alert("Failed to receive token. Status code is " + xmlHttp.status);

            var responseHeaders = xmlHttp.getAllResponseHeaders();

            alert(responseHeaders);

        }

    }

    alert(getTokenURL())

    xmlHttp.open("GET", getTokenURL(), true)

    var auth_base64 = btoa(CLIENT_ID + ":" + CLIENT_SECRET);

    xmlHttp.setRequestHeader("authorization", ("Basic " + auth_base64));

    xmlHttp.setRequestHeader("content-type", `application/x-www-form-urlencoded`);

    xmlHttp.send(null);

}

[spotifyjosh · Accepted solution]

Hi @TobiasLama, congrats on making so much headway with your project.

There is more than one OAuth flow available through Spotify. It looks like your app is using the implicit grant flow, which does provide a token parameter instead of the code parameter you were expecting. 

The 403 error that you see with the other user account could happen if your app is in development mode and if the other user has not yet been added to your allowlist. You might inspect the body of the response to see if there is a more detailed error message. More on development mode here: https://developer.spotify.com/documentation/web-api/guides/development-extended-quota-modes/

Hope this helps!

[TobiasLama]

Thanks for the help! I totally forgot about the forum post up until now. You were spot on about the user not being in my allowlist. It now works just as intended. I wasn't aware there even existed an allowlist beforehand.

[WildJohn22]

sorry about i need help please