fix(code flow): Fixed code flow for IE 11

Author: manfredsteyer

package-lock.json

@@ -34,6 +34,7 @@
     "angular-oauth2-oidc-jwks": "^9.0.0",
     "base64-js": "^1.3.0",
     "bootstrap": "^3.3.7",
+    "js-sha256": "^0.9.0",
     "jsrsasign": "^8.0.12",
     "rxjs": "6.5.4",
     "rxjs-compat": "^6.5.2",

package.json

@@ -6,6 +6,9 @@
   },
   "version": "9.0.1",
   "repository": "manfredsteyer/angular-oauth2-oidc",
+  "dependencies": {
+    "js-sha256": "^0.9.0"
+  },
   "peerDependencies": {
     "@angular/common": ">=8.0.0",
     "@angular/core": ">=8.0.0"

projects/lib/package.json

@@ -1436,8 +1436,7 @@ export class OAuthService extends AuthConfig implements OnDestroy {
     public tryLogin(options: LoginOptions = null): Promise<boolean> {
         if (this.config.responseType === 'code') {
             return this.tryLoginCodeFlow(options).then(_ => true);
-        }
-        else {
+        } else {
             return this.tryLoginImplicitFlow(options);
         }
     }
@@ -2243,6 +2242,12 @@ export class OAuthService extends AuthConfig implements OnDestroy {
             if (crypto) {
                 let bytes = new Uint8Array(size);
                 crypto.getRandomValues(bytes);
+
+                // Needed for IE
+                if (!bytes.map) {
+                    (bytes as any).map = Array.prototype.map;
+                }
+
                 bytes = bytes.map(x => unreserved.charCodeAt(x % unreserved.length));
                 id = String.fromCharCode.apply(null, bytes);
             } else {

projects/lib/src/oauth-service.ts

@@ -1,5 +1,8 @@
 import { Injectable } from '@angular/core';
 
+import { sha256 } from 'js-sha256';
+
+
 /**
  * Abstraction for crypto algorithms
 */
@@ -11,10 +14,23 @@ export abstract class HashHandler {
 export class DefaultHashHandler implements HashHandler {
 
     async calcHash(valueToHash: string, algorithm: string): Promise<string> {
-        const encoder = new TextEncoder();
-        const data = encoder.encode(valueToHash);
-        const hashArray = await window.crypto.subtle.digest(algorithm, data);
-        return this.toHashString(hashArray);
+        // const encoder = new TextEncoder();
+        // const hashArray = await window.crypto.subtle.digest(algorithm, data);
+        // const data = encoder.encode(valueToHash);
+
+        const hashArray = sha256.array(valueToHash);
+        // const hashString = this.toHashString(hashArray);
+        const hashString = this.toHashString2(hashArray);
+
+        return hashString;
+    }
+
+    toHashString2(byteArray: number[]) {
+      let result = '';
+      for (let e of byteArray) {
+        result += String.fromCharCode(e);
+      }
+      return result;
     }
 
     toHashString(buffer: ArrayBuffer) {

projects/lib/src/token-validation/hash-handler.ts

@@ -15,6 +15,7 @@ export class AppComponent {
   constructor(private oauthService: OAuthService) {
     this.oauthService.configure(authCodeFlowConfig);
     this.oauthService.loadDiscoveryDocumentAndLogin();
+    this.oauthService.setupAutomaticSilentRefresh();
 
     // Automatically load user profile
     this.oauthService

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

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { OAuthModule } from 'angular-oauth2-oidc';
+import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
@@ -14,7 +14,9 @@ import { HttpClientModule } from '@angular/common/http';
   declarations: [
     AppComponent
   ],
-  providers: [],
+  providers: [
+    { provide: OAuthStorage, useValue: localStorage }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -7,4 +7,5 @@ export const authCodeFlowConfig: AuthConfig = {
   responseType: 'code',
   scope: 'openid profile email offline_access api',
   showDebugInformation: true,
+  timeoutFactor: 0.01,
 };

projects/quickstart-demo/src/app/auth.config.ts

@@ -14,7 +14,7 @@ import { JwksValidationHandler } from 'angular-oauth2-oidc';
 })
 export class AppComponent {
   constructor(private router: Router, private oauthService: OAuthService) {
-    
+
     // Remember the selected configuration
     if (sessionStorage.getItem('flow') === 'code') {
       this.configureCodeFlow();
@@ -43,15 +43,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();
 
     // Optional
     this.oauthService.setupAutomaticSilentRefresh();
 
+
     // Display all events
     this.oauthService.events.subscribe(e => {
       // tslint:disable-next-line:no-console