Invalid redirect URI for spotify

Question

I'm trying to get the Spotify API working with AngularJS. I'm getting an invalid redirect URI error at the authorization stage (https://developer.spotify.com/web-api/authorization-guide/).

I have added the redirect_uri in the white list and it works when I have a URI such as

http://localhost:3000 

but it doesn't work when I have a URI with a hash

http://localhost:3000/#/main

The reason I want to use the latter URI is because with the former I get a URI which I can't get the parameters from via angular

http://localhost:3000/<parameters returned from spotify>/#/main) 

whereas I'd expect the URI to be like this:

http://localhost:3000/#/main/<parameters returned from spotify>

Any help would be much appreciated, thanks.

Answer 1

There are several ways you can do it. I recommend you to have a look at the possan/webapi-player-example, which is built using AngularJS and uses a PostMessage to communicate between the redirect URI (callback.html) and the Angular app (app.js).

If PostMessages is not an option, you can try this:

1. Start a loop to check a certain key on localStorage
2. Open the login page in a popup.
3. From the callback page, write in localStorage the data you get back from Spotify (i.e. access_token, refresh_token, expires_in).
4. Close the popup after a couple of seconds
5. The loop should have realised about the new value being written in localStorage.

The previous flow, although a bit more complex, works well in environments such as iOS devices where it is sometimes impossible to communicate between the callback page and the "main" page properly.