Clever Geek Handbook

Invalid redirect URI to identify

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

I added redirect_uri to whitelist and it works when I have a URI like

http://localhost:3000

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

http://localhost:3000/#/main

The reason why I want to use the last URI is because with the first one I get the URI which I cannot get using angular parameters

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

whereas I expect the URI to be like this:

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

Any help would be greatly appreciated, thanks.

+3


source to share


1 answer


There are several ways to do this. I recommend that you take a look at possan / webapi-player-example , which is built with AngularJS and uses PostMessage

to communicate between redirect ( callback.html

) and Angular ( app.js

) URIs .

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



  • Run a loop to test a specific key for localStorage

  • Open the login page in a pop-up window.
  • Callback page, enter the localStorage

    data that you are returning from Spotify (ie access_token

    , refresh_token

    , expires_in

    ).
  • Close the popup after a couple of seconds
  • The loop had to figure out that the new value was being written to localStorage.

The previous thread, although a bit more complex, works well in environments like iOS devices where it is sometimes impossible to communicate between the callback page and the master page.

+1


source






More articles:


All Articles