topic Re: Token problem in Spotify for Developers

Token problem

XHyperDEVX — Wed, 09 Aug 2023 00:23:24 GMT

Plan

Premium

Country

Device

Windows 11/MS Edge

Operating System

Windows 11

My Question or Issue

I have an HTML page that is supposed to show me the currently playing song on my Spotify account. I have gotten as far as getting an access token and working with it. Unfortunately, I get these two errors in the browser console when retrieving the name of the current song:

- Invalid token scopes.
- This functionality is restricted to premium users only

The token is correct, I am sure. And it is associated with a premium account. Where could be the error?

I am very grateful for tips and help 🙂

Re: Token problem

Ximzend — Wed, 09 Aug 2023 05:26:38 GMT

Which flow are you using?

Re: Token problem

XHyperDEVX — Wed, 09 Aug 2023 08:15:57 GMT

This is my code:

<!DOCTYPE html>
<html>
<head>
<title>Song played</title>
<script src="https://sdk.scdn.co/spotify-player.js"></script>
</head>
<body>
<h1>Song:</h1>
<div id="current-song"></div>
<button onclick="authorize()">Connect Spotify</button>

function authorize() {
const clientId = "my-client-id";
const redirectUri = encodeURIComponent("https://my-url-in-my-app");
const scope = "user-read-currently-playing";

const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=token&show_dialog=true`;

window.location.href = authUrl;
}

window.onSpotifyWebPlaybackSDKReady = () => {
const token = window.location.hash.substr(1).split('&')[0].split('=')[1];
accessToken = token;
console.log(accessToken);

const player = new Spotify.Player({
name: 'Web Playback SDK',
getOAuthToken: cb => { cb(token); }
});

// Error handling
player.addListener('initialization_error', ({ message }) => { console.error(message); });
player.addListener('authentication_error', ({ message }) => { console.error(message); });
player.addListener('account_error', ({ message }) => { console.error(message); });
player.addListener('playback_error', ({ message }) => { console.error(message); });

// Playback status updates
player.addListener('player_state_changed', state => {
const { current_track } = state.track_window;
const { name, artists } = current_track;
const artistNames = artists.map(artist => artist.name).join(', ');
document.getElementById('current-song').innerHTML = `Song: ${name} - ${artistNames}`;
});

// Connect to the player!
player.connect();
};
</script>
</body>
</html>

Re: Token problem

Ximzend — Wed, 09 Aug 2023 10:15:09 GMT

I think that code is not going to work, because making it requires more complex code.

Here is a GitHub repo you can use: https://github.com/tthn0/Spotify-Readme

Re: Token problem

XHyperDEVX — Wed, 09 Aug 2023 10:31:30 GMT

So it is not possible to show in a html page the currently played song? Only with the HTML page.

Re: Token problem

Ximzend — Wed, 09 Aug 2023 13:03:19 GMT

No, because a access token expires in 60 minutes, and refreshing that needs to be done server side.

Re: Token problem

XHyperDEVX — Wed, 09 Aug 2023 22:35:11 GMT

But I can retrieve the current accesstoken every time I visit the page, can't I?

Re: Token problem

Ximzend — Thu, 10 Aug 2023 09:37:30 GMT

The missing scope is user-read-playback-state.

I thought you also wanted to show others what you are listening to. Sorry for the misunderstanding.

Re: Token problem

XHyperDEVX — Fri, 11 Aug 2023 21:00:27 GMT

Unfortunately, I still get the error message "Invalid token scopes." in my browser console. Apparently it is only because the scope is wrong. Or not? What could be the correct one?

Re: Token problem

temlabs — Wed, 30 Oct 2024 10:57:42 GMT

Did you ever fix this? I took keep getting "Invalid token scopes" and I'm pretty sure my scopes are correct

Re: Token problem

XHyperDEVX — Wed, 30 Oct 2024 13:30:15 GMT

no unfortunately not 😞

Re: Token problem

tomjaimz — Wed, 30 Oct 2024 14:14:01 GMT

If you are sure that your scopes are correct in your code but you are still getting invalid scopes, you might need to re-authenticate your user, just refreshing the token is not enough to update the scopes associated with the token.

XHyperDEVX - looking at your code at the very least to use the Web Playback SDK you will need the streaming, user-read-email and user-read-private scopes.