Incluido angular-oauth2-oidc en app-component

package-lock.json

@@ -3798,6 +3798,23 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "angular-auth-oidc-client": {
+      "version": "11.6.4",
+      "resolved": "https://registry.npmjs.org/angular-auth-oidc-client/-/angular-auth-oidc-client-11.6.4.tgz",
+      "integrity": "sha512-5nLKNuqXe9oplmk7IYW8g7WFJ7FOseDA9m+retOaXxrjSFtWL7o0UdnskrYOqoEsWBeeqhCLRNPDBP1d8D7tRw==",
+      "requires": {
+        "common-tags": "^1.8.0",
+        "jsrsasign-reduced": "^8.0.15",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -5010,6 +5027,11 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
+    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -8581,6 +8603,11 @@
         "verror": "1.10.0"
       }
     },
+    "jsrsasign-reduced": {
+      "version": "8.0.15",
+      "resolved": "https://registry.npmjs.org/jsrsasign-reduced/-/jsrsasign-reduced-8.0.15.tgz",
+      "integrity": "sha512-Ig4W69nXCIUedzOSk3nqJWUr2DmSDENYfsmCqVK33GPETtPcjwREGQc92hV5jcJ6zavMvGD4tjhZ+T7JIiaSLA=="
+    },
     "jszip": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.5.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "~11.1.1",
     "@angular/platform-browser-dynamic": "~11.1.1",
     "@angular/router": "~11.1.1",
+    "angular-auth-oidc-client": "11.6.4",
     "moment": "^2.29.1",
     "rxjs": "~6.6.0",
     "tslib": "^1.14.1",

src/app/app.component.ts

@@ -1,37 +1,40 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { AuthService, AuthState } from './services/auth.service';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
-  // tslint:disable-next-line:component-selector
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit, OnDestroy {
   showOverlay = true;
 
   constructor(
     private route: ActivatedRoute,
-    private authService: AuthService,
+    private oidcSecurityService: OidcSecurityService,
+    // private authService: AuthService,
     private router: Router
   ) { }
 
   async ngOnInit(): Promise<void> {
     console.log('AppComponent.ngInit()');
 
-    const chatLoginToken = await this.waitChatToken();
-    const authState = await this.authService.configureAndTryLogin(chatLoginToken);
+    this.oidcSecurityService.checkAuth().subscribe((auth) => console.log('is authenticated', auth));
 
-    if (authState !== AuthState.ChatLoggingInProcess) {
+    // const chatLoginToken = await this.waitChatToken();
+    // const authState = await this.authService.configureAndTryLogin(chatLoginToken);
+
+    // if (authState !== AuthState.ChatLoggingInProcess) {
       this.showOverlay = false;
-    }
+    // }
   }
 
   ngOnDestroy(): void {
     // TODO no se ejecuta
     console.log('AppComponent.ngDestroy()');
-    this.authService.stopAutomaticRefresh();
+    // this.authService.stopAutomaticRefresh();
   }
 
   private async waitChatToken(): Promise<string> {

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
 import { AppRouterModule } from './router.module';
 import { AvailablePlacesPipe } from './pipes/available-places.pipe';
+import { AuthConfigModule } from './auth/auth-config.module';
 
 @NgModule({
   imports: [
@@ -32,7 +33,8 @@ import { AvailablePlacesPipe } from './pipes/available-places.pipe';
     MaterialModule,
     MatDatepickerModule,
     NgxMatDatetimePickerModule,
-    NgxMatMomentModule
+    NgxMatMomentModule,
+    AuthConfigModule
   ],
   declarations: [
     AppComponent,

src/app/auth.config.ts

@@ -1,49 +0,0 @@
-import { AuthConfig } from 'angular-oauth2-oidc';
-import { useSilentRefreshForCodeFlow } from '../flags';
-
-export const authConfig: AuthConfig = {
-  // issuer: 'http://localhost:8081/auth/realms/fosil',
-  issuer: 'https://auth.fosil.eu/auth/realms/test',
-
-  // URL of the SPA to redirect the user to after login
-  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',
-  clientId: 'okupamicoche-frontend-angular',
-
-  responseType: 'code',
-
-  // set the scope for the permissions the client should request
-  // 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: useSilentRefreshForCodeFlow
-    ? 'openid profile email'
-    : 'openid profile email offline_access',
-
-  // ^^ Please note that offline_access is not needed for silent refresh
-  // At least when using idsvr, this even prevents silent refresh
-  // as idsvr ALWAYS prompts the user for consent when this scope is
-  // requested
-
-  // This is needed for silent refresh (refreshing tokens w/o a refresh_token)
-  // **AND** for logging in with a popup
-  silentRefreshRedirectUri: `${window.location.origin}/silent-refresh.html`,
-
-  useSilentRefresh: useSilentRefreshForCodeFlow,
-
-  showDebugInformation: false,
-
-  sessionChecksEnabled: true,
-  sessionCheckIntervall: 10000,
-
-  timeoutFactor: 0.75,
-  // disablePKCI: true,
-
-  clearHashAfterLogin: false
-};

src/app/auth/auth-config.module.ts

@@ -0,0 +1,32 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
+
+export function configureAuth(oidcConfigService: OidcConfigService): () => Promise<any> {
+    return () =>
+        oidcConfigService.withConfig({
+              stsServer: 'https://auth.fosil.eu/auth/realms/test',
+              redirectUrl: window.location.origin,
+              postLogoutRedirectUri: window.location.origin,
+              clientId: 'okupamicoche-frontend-angular',
+              scope: 'openid profile offline_access',
+              responseType: 'code',
+              silentRenew: true,
+              useRefreshToken: true,
+              renewTimeBeforeTokenExpiresInSeconds: 30,
+          });
+}
+
+@NgModule({
+    imports: [AuthModule.forRoot()],
+    exports: [AuthModule],
+    providers: [
+        OidcConfigService,
+        {
+            provide: APP_INITIALIZER,
+            useFactory: configureAuth,
+            deps: [OidcConfigService],
+            multi: true,
+        },
+    ],
+})
+export class AuthConfigModule {}

src/app/services/auth.service.ts

@@ -32,10 +32,6 @@ export class AuthService {
     return User.fromClaims(claims);
   }
 
-  stopAutomaticRefresh(): void {
-    // this.oauthService.stopAutomaticRefresh();
-  }
-
   async configureAndTryLogin(chatLoginToken: string): Promise<AuthState> {
     this.configureOauth();
 

src/silent-refresh.html

@@ -1,27 +0,0 @@
-<html>
-  <body>
-    <script>
-      var checks = [
-        /[\?|&|#]code=/,
-        /[\?|&|#]error=/,
-        /[\?|&|#]token=/,
-        /[\?|&|#]id_token=/
-      ];
-
-      function isResponse(str) {
-        var count = 0;
-        if (!str) return false;
-        for (var i = 0; i < checks.length; i++) {
-          if (str.match(checks[i])) return true;
-        }
-        return false;
-      }
-
-      var message = isResponse(location.hash)
-        ? location.hash
-        : '#' + location.search;
-
-      (window.opener || window.parent).postMessage(message, location.origin);
-    </script>
-  </body>
-</html>