Support hash location strategy with code flow

projects/lib/src/oauth-service.ts

@@ -1380,24 +1380,8 @@ export class OAuthService extends AuthConfig implements OnDestroy {
         }
     }
 
-
-    private parseQueryString(queryString: string): object {
-        if (!queryString || queryString.length === 0) {
-            return {};
-        }
-
-        if (queryString.charAt(0) === '?') {
-            queryString = queryString.substr(1);
-        }
-
-        return this.urlHelper.parseQueryString(queryString);
-
-
-    }
-
     public tryLoginCodeFlow(): Promise<void> {
-
-        const parts = this.parseQueryString(window.location.search)
+        const parts = this.getCodePartsFromUrl(window.location.search);
 
         const code = parts['code'];
         const state = parts['state'];
@@ -1445,6 +1429,23 @@ export class OAuthService extends AuthConfig implements OnDestroy {
         }
     }
 
+   /**
+   * Retrieve the returned auth code from the redirect uri that has been called.
+   * If required also check hash, as we could use hash location strategy.
+   */
+    private getCodePartsFromUrl(queryString: string): object {
+        if (!queryString || queryString.length === 0) {
+            return this.urlHelper.getHashFragmentParams();
+        }
+
+        // normalize query string
+        if (queryString.charAt(0) === '?') {
+            queryString = queryString.substr(1);
+        }
+
+        return this.urlHelper.parseQueryString(queryString);
+    }
+
     /**
      * Get token using an intermediate code. Works for the Authorization Code flow.
      */

projects/sample/src/app/app.routes.ts

@@ -34,7 +34,7 @@ export let APP_ROUTES: Routes = [
 ];
 
 export let AppRouterModule = RouterModule.forRoot(APP_ROUTES, {
-  preloadingStrategy: CustomPreloadingStrategy
-  // useHash: true,
+  preloadingStrategy: CustomPreloadingStrategy,
+  useHash: localStorage.getItem('useHashLocationStrategy') === 'true',
   // initialNavigation: false
 });

projects/sample/src/app/auth-code-flow.config.ts

@@ -5,7 +5,10 @@ export const authCodeFlowConfig: AuthConfig = {
   issuer: 'https://demo.identityserver.io',
 
   // URL of the SPA to redirect the user to after login
-  redirectUri: window.location.origin + '/index.html',
+  redirectUri: window.location.origin
+    + ((localStorage.getItem('useHashLocationStrategy') === 'true')
+      ? '/#/index.html'
+      : '/index.html'),
 
   // The SPA's id. The SPA is registerd with this id at the auth-server
   // clientId: 'server.code',
@@ -20,7 +23,7 @@ export const authCodeFlowConfig: AuthConfig = {
   responseType: 'code',
 
   // set the scope for the permissions the client should request
-  // The first four are defined by OIDC. 
+  // The first four are defined by OIDC.
   // Important: Request offline_access to get a refresh token
   // The api scope is a usecase specific one
   scope: 'openid profile email offline_access api',

projects/sample/src/app/auth.config.ts

@@ -7,7 +7,10 @@ export const authConfig: AuthConfig = {
   issuer: 'https://steyer-identity-server.azurewebsites.net/identity',
 
   // URL of the SPA to redirect the user to after login
-  redirectUri: window.location.origin + '/index.html',
+  redirectUri: window.location.origin
+    + ((localStorage.getItem('useHashLocationStrategy') === 'true')
+      ? '/#/index.html'
+      : '/index.html'),
 
   // URL of the SPA to redirect the user after silent refresh
   silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',

projects/sample/src/app/home/home.component.html

@@ -9,6 +9,12 @@ <h1 *ngIf="givenName">Welcome, {{givenName}} {{familyName}}!</h1>
             <label><input type="checkbox" [(ngModel)]="requestAccessToken"> Request AccessToken</label>
         </div>
     </div>
+    <div class="panel-body">
+         <p>Test settings</p>
+         <div class="checkbox">
+             <label><input type="checkbox" [(ngModel)]="useHashLocationStrategy"> Use hash location strategy</label>
+         </div>
+     </div>
 </div>
 
 <div class="panel panel-default">
@@ -67,4 +73,4 @@ <h2>Further Actions</h2>
 
         <button class="btn btn-default" (click)="loadUserProfile()">Load User Profile</button>
     </div>
-</div>
+</div>

projects/sample/src/app/home/home.component.ts

@@ -39,7 +39,7 @@ export class HomeComponent implements OnInit {
       this.oauthService.configure(authCodeFlowConfig);
       await this.oauthService.loadDiscoveryDocument();
       sessionStorage.setItem('flow', 'code');
-  
+
       this.oauthService.initLoginFlow('/some-state;p1=1;p2=2');
        // the parameter here is optional. It's passed around and can be used after logging in
   }
@@ -90,6 +90,18 @@ export class HomeComponent implements OnInit {
     return this.oauthService.requestAccessToken;
   }
 
+  set useHashLocationStrategy(value: boolean) {
+    const oldValue = localStorage.getItem('useHashLocationStrategy') === 'true';
+    if (value !== oldValue) {
+      localStorage.setItem('useHashLocationStrategy', value ? 'true' : 'false');
+      window.location.reload();
+    }
+  }
+
+  get useHashLocationStrategy() {
+    return localStorage.getItem('useHashLocationStrategy') === 'true';
+  }
+
   get id_token() {
     return this.oauthService.getIdToken();
   }