4

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.

user1087943
  • 339
  • 1
  • 4
  • 15
  • Not very knowledgeable in Angular, but couldn't you create a specific endpoint on your backend to just receive the authorization code, e.g. http://:3000/handle-auth/, that redirects to /#/main? – Michael Thelin Aug 11 '14 at 07:58

1 Answers1

0

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.

José M. Pérez
  • 3,053
  • 19
  • 36