Announcements

Help Wizard

Step 1

NEXT STEP

FAQs

Please see below the most popular frequently asked questions.

Loading article...

Loading faqs...

VIEW ALL

Ongoing Issues

Please see below the current ongoing issues which are under investigation.

Loading issue...

Loading ongoing issues...

VIEW ALL

Token problem

Token problem

Plan

Premium

Country

DE

 

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 🙂

Reply
11 Replies

Which flow are you using?

XimzendSpotify Star
Help others find this answer and click "Accept as Solution".
If you appreciate my answer, maybe give me a Like.
Note: I'm not a Spotify employee.

This is my code:

 

Spoiler

<!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>

<script>
let accessToken = null;

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=${sco...`;

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>

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

XimzendSpotify Star
Help others find this answer and click "Accept as Solution".
If you appreciate my answer, maybe give me a Like.
Note: I'm not a Spotify employee.

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

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

XimzendSpotify Star
Help others find this answer and click "Accept as Solution".
If you appreciate my answer, maybe give me a Like.
Note: I'm not a Spotify employee.

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

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.

XimzendSpotify Star
Help others find this answer and click "Accept as Solution".
If you appreciate my answer, maybe give me a Like.
Note: I'm not a Spotify employee.

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?

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

no unfortunately not 😞

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.

Suggested posts