AngularJS oauth endpoint with hash in url (SpotifyAPI)

Question

I want to receive the oauth callback from Spotify and have problems with the # in my URL.

routes.js

 app.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
      ...
      when('/callback', {
        templateUrl: 'views/callback.html',
        controller: 'CallbackCtrl'
      })
      ...
  }]);

So to access that route the URL is e. g. http://test.com/#/callback

For the spotify endpoint the redirect_uri has to be url-encoded:

https://accounts.spotify.com/authorize/?client_id=...&response_type=code&redirect_uri=http%3A%2F%2Ftest.com%2F%23%2Fcallback&scope=user-read-private%20user-read-email&state=profile%2Factivity

The redirect from spotify:

http://test.com/%23/callback?code=..&state=profile%2Factivity

Which results in a 404

I know there are some workarounds like using the / route or enabling html5mode to get rid of the # but I hope there is a true solution for this.

Answer 1

Well your situation is not that awkward at all.

Since you can't control the way that spotify's redirect after OAuth works, it leaves you with two options:

1) Create a URL Path for example http://test.com/redirect_uri/?code=.... which will automatically redirect the user to the webapp in the state of logged in.

This method is not a good practice, unless you really know exactly what you are doing. The major problem here is security. Unless you add really good Mechanism to the redirection page.

2) Easier, and actually better in all aspects:

$locationProvider.html5Mode(true); A small introduction on this:

Why does this remove the #? Because when HTML5 mode is on, it will use history to refer to native paths in your app.

But hold on this is not the only thing you have to do: You have to redirect all request to go through the main page normally index.html.

I use to do this with .htaccess, But since of AngularJS 1.3 I know there is another method with adding meta tag of <base href=/base/path/of/app/directory">. Usually <base href="/">

But I still prefer .htacces rewriterule or w/e webserver you are using accordingly.

Answer 2

It looks like you are going to implement the Authorization Code flow client-side, exposing the secret key you were provided when you register your app. This is wrong, since someone might generate tokens on behalf of your application using the client id and secret key.

A better approach is to either use Implicit Grant (in example how it is done on https://github.com/possan/webapi-player-example) or implement the token exchange server-side and pass the token to your AngularJS webapp.