title: Retrieving tokens from OAuth2 authorize endpoint in angularjs
body: <p>I am trying to use IdentityServer with an Angularjs application. The Angularjs front end is meant to call the authorize endpoint when an unauthenticated user attempts to navigate to the root url of the application. The app.config has a resolve property which will generate a routeChangeError. This event triggers a redirect to the OAuth2 Authorization endpoint (IdentityServer in my case, running on Asp.Net MVC).</p>
  
  <pre><code>baseballApp.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
      $routeProvider.when('/players', {
          resolve: {
              auth: function ($q, $rootScope) {                    
                  var deferred = $q.defer();
                  if ($rootScope.token) {
                      deferred.resolve();
                  } else {
                      deferred.reject();
                  }                    
                  return deferred.promise;
              }
      },
      templateUrl: '/FrontEnd/Templates/PlayerList.html',
      controller: 'PlayerListController'        
  });
  $routeProvider.otherwise({ redirectTo: '/players' });
  
  var spinnerFunction = function (data, headersGetter) {
      if (data) {
          $('#spinner').show();
          return data;
      }
  };
  
  $httpProvider.defaults.transformRequest.push(spinnerFunction);
  $httpProvider.interceptors.push('authInterceptor');}]).run(['$rootScope', '$location', 'authenticationService', function ($rootScope, $location, authenticationService) {
  //authenticationService.getBearerToken().then(function(data) {
  //    $rootScope.token = data;
  //});
  
  debugger;
  
  var generateRandomString = function() {
      return (Math.random().toString(16) + "000000000").substr(2, 8);
  }
  
  var nonce = generateRandomString();
  var state = generateRandomString();
  $rootScope.$on('$routeChangeError', function () {
     window.location = 'https://localhost:44301/identity/connect/authorize?client_id=baseballStats&amp;redirect_uri=https%3a%2f%2flocalhost%3a44300%2f&amp;response_type=id_token+token&amp;scope=openid+profile+roles+baseballStatsApi&amp;nonce=' + nonce + '&amp;state=' + state;
  });}]);
  </code></pre>
  
  <p>As you can see I redirect to the authorize endpoint if I don't have a token. However, it's not clear to me how I can retrieve the tokens after I have signed in on the authorization endpoint.</p>
  
  <p>I have specified a return url, and after sign in it does redirect to the application, but how would I set up my angular code to retrieve the token that is supposed to be generated on the Authorize endpoint and sent back to the application?</p>
  
  <p>I have seen many examples of people using bearer token authentication for angular, but I have not seen anyone use the Authorize endpoint of an OAuth2 server with Angular. In MVC, there are many built in callbacks to retrieve the token. I am looking for some ideas on how to implement this in angular. </p>
  
  <p>Could you please give me a hint as to what I'm doing wrong?</p>
  
  <p>EDIT</p>
  
  <p>I have also tried to pass a hash navigation tag in the redirect uri, but get an "Error unknown client" from IdentityServer. Please see the code below</p>
  
  <pre><code>  $rootScope.$on('$routeChangeError', function () {
     var returnUrl = encodeURIComponent('https://localhost:44300/#/players');
     window.location = 'https://localhost:44301/identity/connect/authorize?client_id=baseballStats&amp;redirect_uri=' + returnUrl + '&amp;response_type=id_token+token&amp;scope=openid+profile+roles+baseballStatsApi&amp;nonce=' + nonce + '&amp;state=' + state;
  });
  </code></pre>
  
  <p>Anybody know why?</p>