fix(sample): use hash-based routing

Author: manfredsteyer

package-lock.json

@@ -20,15 +20,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "9.0.5",
-    "@angular/common": "9.0.5",
-    "@angular/compiler": "9.0.5",
-    "@angular/core": "9.0.5",
-    "@angular/elements": "9.0.5",
-    "@angular/forms": "9.0.5",
-    "@angular/platform-browser": "9.0.5",
-    "@angular/platform-browser-dynamic": "9.0.5",
-    "@angular/router": "9.0.5",
+    "@angular/animations": "9.0.7",
+    "@angular/common": "9.0.7",
+    "@angular/compiler": "9.0.7",
+    "@angular/core": "9.0.7",
+    "@angular/elements": "9.0.7",
+    "@angular/forms": "9.0.7",
+    "@angular/platform-browser": "9.0.7",
+    "@angular/platform-browser-dynamic": "9.0.7",
+    "@angular/router": "9.0.7",
     "@webcomponents/custom-elements": "^1.2.4",
     "angular-oauth2-oidc": "^9.0.1",
     "angular-oauth2-oidc-jwks": "^9.0.0",
@@ -39,16 +39,16 @@
     "rxjs": "6.5.4",
     "rxjs-compat": "^6.5.2",
     "text-encoder-lite": "^1.0.1",
-    "tsickle": "^0.35.0",
+    "tsickle": "^0.38.1",
     "tslib": "^1.11.1",
     "zone.js": "^0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.1",
-    "@angular-devkit/build-ng-packagr": "~0.900.1",
-    "@angular/cli": "^9.0.1",
-    "@angular/compiler-cli": "9.0.5",
-    "@angular/language-service": "9.0.5",
+    "@angular-devkit/build-angular": "~0.900.7",
+    "@angular-devkit/build-ng-packagr": "~0.900.7",
+    "@angular/cli": "^9.0.7",
+    "@angular/compiler-cli": "9.0.7",
+    "@angular/language-service": "9.0.7",
     "@compodoc/compodoc": "^1.1.11",
     "@types/jasmine": "~3.3.13",
     "@types/jasminewd2": "~2.0.6",
@@ -68,6 +68,6 @@
     "protractor": "~5.4.3",
     "ts-node": "~8.6.2",
     "tslint": "~5.18.0",
-    "typescript": "3.7.5"
+    "typescript": "^3.7.5"
   }
 }

package.json

@@ -15,7 +15,7 @@ import { HttpClientModule } from '@angular/common/http';
     AppComponent
   ],
   providers: [
-    { provide: OAuthStorage, useValue: localStorage }
+    // { provide: OAuthStorage, useValue: localStorage }
   ],
   bootstrap: [AppComponent]
 })

projects/quickstart-demo/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { Router } from '@angular/router';
 import { filter} from 'rxjs/operators';
 import { authCodeFlowConfig } from './auth-code-flow.config';
 import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
+import { useHash } from '../flags';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -41,14 +42,17 @@ export class AppComponent {
 
   }
 
-
   private configureImplicitFlow() {
 
     this.oauthService.configure(authConfig);
     // this.oauthService.setStorage(localStorage);
     this.oauthService.tokenValidationHandler = new JwksValidationHandler();
 
-    this.oauthService.loadDiscoveryDocumentAndTryLogin();
+    this.oauthService.loadDiscoveryDocumentAndTryLogin().then(_ => {
+      if (useHash) {
+        this.router.navigate(['/']);
+      }
+    });
 
     // Optional
     this.oauthService.setupAutomaticSilentRefresh();

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

@@ -5,23 +5,34 @@ import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { AppRouterModule } from './app.routes';
+import { APP_ROUTES } from './app.routes';
 import { BASE_URL } from './app.tokens';
 import { FlightHistoryComponent } from './flight-history/flight-history.component';
 import { HomeComponent } from './home/home.component';
 import { PasswordFlowLoginComponent } from './password-flow-login/password-flow-login.component';
 import { SharedModule } from './shared/shared.module';
+import { RouterModule, ExtraOptions } from '@angular/router';
+import { CustomPreloadingStrategy } from './shared/preload/custom-preloading.strategy';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { useHash } from '../flags';
+
+
+const ROUTING_OPTIONS: ExtraOptions = {
+  // preloadingStrategy: CustomPreloadingStrategy,
+  useHash: useHash,
+  initialNavigation: !useHash
+};
 
 @NgModule({
   imports: [
     BrowserModule,
+    RouterModule.forRoot(APP_ROUTES, ROUTING_OPTIONS),
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
     SharedModule.forRoot(),
-    AppRouterModule,
     OAuthModule.forRoot({
-      resourceServer: {
+      resourceServer: { 
         allowedUrls: ['http://www.angular.at/api'],
         sendAccessToken: true
       }
@@ -34,6 +45,7 @@ import { SharedModule } from './shared/shared.module';
     PasswordFlowLoginComponent,
   ],
   providers: [
+    // (useHash) ? { provide: LocationStrategy, useClass: HashLocationStrategy } : [],
     // {provide: AuthConfig, useValue: authConfig },
     // { provide: OAuthStorage, useValue: localStorage },
     // { provide: ValidationHandler, useClass: JwksValidationHandler },

projects/sample/src/app/app.module.ts

@@ -2,7 +2,6 @@ import { PasswordFlowLoginComponent } from './password-flow-login/password-flow-
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { FlightHistoryComponent } from './flight-history/flight-history.component';
-import { CustomPreloadingStrategy } from './shared/preload/custom-preloading.strategy';
 
 export let APP_ROUTES: Routes = [
   {
@@ -32,9 +31,3 @@ export let APP_ROUTES: Routes = [
     redirectTo: 'home'
   }
 ];
-
-export let AppRouterModule = RouterModule.forRoot(APP_ROUTES, {
-  preloadingStrategy: CustomPreloadingStrategy,
-  useHash: localStorage.getItem('useHashLocationStrategy') === 'true',
-  // initialNavigation: false
-});

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

@@ -1,8 +1,5 @@
 import { AuthConfig } from 'angular-oauth2-oidc';
-
-// Set this to true, to use silent refresh; otherwise the example
-// uses the refresh_token via an AJAX coll to get new tokens.
-const useSilentRefresh = false;
+import { useSilentRefreshForCodeFlow } from '../flags';
 
 export const authCodeFlowConfig: AuthConfig = {
   issuer: 'https://idsvr4.azurewebsites.net',
@@ -29,7 +26,7 @@ export const authCodeFlowConfig: AuthConfig = {
   // 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: (useSilentRefresh) ? 
+  scope: (useSilentRefreshForCodeFlow) ? 
     'openid profile email api' :  
     'openid profile email offline_access api',
 
@@ -43,7 +40,7 @@ export const authCodeFlowConfig: AuthConfig = {
   silentRefreshRedirectUri: 
     `${window.location.origin}/silent-refresh.html`,
 
-  useSilentRefresh: useSilentRefresh,
+  useSilentRefresh: useSilentRefreshForCodeFlow,
 
   showDebugInformation: true,
 

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

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

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

@@ -121,4 +121,6 @@ <h1>Flight Search!</h1>
 ----------------------
 {{selectedFlight | json}}
 </pre>
-</div>
+</div>
+
+<button class="btn btn-primary" (click)="refresh()">Refresh Token</button>

projects/sample/src/app/flight-booking/flight-search/flight-search.component.html

@@ -34,4 +34,22 @@ export class FlightSearchComponent {
 
     // .map(function(resp) { return resp.json() })
   }
+
+  refresh() {
+
+    this.oauthService.oidc = true;
+
+    if (!this.oauthService.useSilentRefresh && this.oauthService.responseType === 'code') {
+      this.oauthService
+        .refreshToken()
+        .then(info => console.debug('refresh ok', info))
+        .catch(err => console.error('refresh error', err));
+    } else {
+      this.oauthService
+        .silentRefresh()
+        .then(info => console.debug('silent refresh ok', info))
+        .catch(err => console.error('silent refresh error', err));
+    }
+  }
+
 }

projects/sample/src/app/flight-booking/flight-search/flight-search.component.ts

@@ -15,6 +15,8 @@ export class HomeComponent implements OnInit {
   }
 
   ngOnInit() {
+    // This would directly (w/o user interaction) redirect the user to the 
+    // login page if they are not already logged in.
     /*
         this.oauthService.loadDiscoveryDocumentAndTryLogin().then(_ => {
             if (!this.oauthService.hasValidIdToken() || !this.oauthService.hasValidAccessToken()) {
@@ -101,8 +103,8 @@ export class HomeComponent implements OnInit {
     } else {
       this.oauthService
         .silentRefresh()
-        .then(info => console.debug('refresh ok', info))
-        .catch(err => console.error('refresh error', err));
+        .then(info => console.debug('silent refresh ok', info))
+        .catch(err => console.error('silent refresh error', err));
     }
   }
 

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

@@ -0,0 +1,7 @@
+
+// Use HashLocationStrategy for routing?
+export const useHash = false;
+
+// Set this to true, to use silent refresh; otherwise the example
+// uses the refresh_token via an AJAX coll to get new tokens.
+export const useSilentRefreshForCodeFlow = false;