add new keycloak silent-sso to increase login verification

Author: 4drianMatei

frontend/src/app/app-init.ts

@@ -4,21 +4,25 @@ import { UserInfoStore } from './core/user/user-info.store';
 import { UserDataStore } from './core/user/userdata.store';
 import { SystemService } from './core/cache/system.service';
 
-export function initializer(keycloak: KeycloakService, userInfoStore: UserInfoStore, userDataStore: UserDataStore, _systemService: SystemService): () => Promise<any> {
+export function initializer(keycloak: KeycloakService, userInfoStore: UserInfoStore, userDataStore: UserDataStore,
+                            _systemService: SystemService): () => Promise<any> {
   return (): Promise<any> => {
     return new Promise(async (resolve, reject) => {
       try {
         _systemService.checkVersion();
         keycloak.keycloakEvents$.subscribe(event => {
           if (event.type === KeycloakEventType.OnAuthSuccess) {
-            userInfoStore.getUserInfo$().subscribe( userInfo => {
+            userInfoStore.getUserInfo$().subscribe(userInfo => {
               userDataStore.loadInitialUserData(userInfo.sub, userInfo.given_name, userInfo.email);
               console.log('load initial userInfo');
             });
           }
           if (event.type === KeycloakEventType.OnAuthLogout) {
             this.userDataStore.resetUserDataStore();
           }
+          if (event.type === KeycloakEventType.OnTokenExpired) {
+            keycloak.updateToken(20);
+          }
         });
         await keycloak.init({
           config: {
@@ -28,10 +32,12 @@ export function initializer(keycloak: KeycloakService, userInfoStore: UserInfoSt
           },
           initOptions: {
             onLoad: 'check-sso',
-            checkLoginIframe: false
+            silentCheckSsoRedirectUri:
+              window.location.origin + '/assets/silent-check-sso.html'
           },
           bearerExcludedUrls: [
-            '/api/public'
+            '/api/public',
+            '/assets'
           ]
         });
         resolve('true');

frontend/src/app/app.component.scss

@@ -98,5 +98,5 @@ footer {
 
 .on-top {
   position:relative;
-  z-index: 1000;
+  z-index: 900;
 }

frontend/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { SharedModule } from './shared/shared.module';
 import { CoreModule } from './core/core.module';
 import { PublicResourcesModule } from './public/public.module';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
+import { KeycloakAngularModule, KeycloakEventType, KeycloakService } from 'keycloak-angular';
 import { initializer } from './app-init';
 import { RouterModule } from '@angular/router';
 import { PageNotFoundComponent } from './not-found.component';
@@ -28,6 +28,45 @@ import { SnippetNotFoundComponent } from './not-found/snippet-not-found.componen
 import { SystemService } from './core/cache/system.service';
 import { NewEntryComponent } from './new-entry/new-entry.component';
 
+function initializeKeycloak(keycloak: KeycloakService, userInfoStore: UserInfoStore, userDataStore: UserDataStore,
+                            _systemService: SystemService) {
+  return () => {
+    _systemService.checkVersion();
+    keycloak.keycloakEvents$.subscribe(event => {
+      if (event.type === KeycloakEventType.OnAuthSuccess) {
+        userInfoStore.getUserInfo$().subscribe(userInfo => {
+          userDataStore.loadInitialUserData(userInfo.sub, userInfo.given_name, userInfo.email);
+          console.log('load initial userInfo');
+        });
+      }
+      if (event.type === KeycloakEventType.OnAuthLogout) {
+        this.userDataStore.resetUserDataStore();
+      }
+      if (event.type === KeycloakEventType.OnTokenExpired) {
+        keycloak.updateToken(20);
+      }
+    });
+
+    keycloak.init({
+      config: {
+        url: environment.keycloak.url, // .ie: http://localhost:8080/auth/
+        realm: environment.keycloak.realm, // .ie: master
+        clientId: environment.keycloak.clientId // .ie: account
+      },
+      initOptions: {
+        onLoad: 'check-sso',
+        silentCheckSsoRedirectUri:
+          window.location.origin + '/assets/silent-check-sso.html'
+      },
+      bearerExcludedUrls: [
+        '/api/public',
+        '/assets'
+      ]
+    });
+  }
+
+}
+
 @NgModule({
   exports: [
     MatChipsModule

frontend/src/app/core/auth/auth-guard.service.ts

@@ -1,39 +1,35 @@
-import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';
-import {KeycloakAuthGuard, KeycloakService} from 'keycloak-angular';
-import {environment} from '../../../environments/environment';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
+import { environment } from '../../../environments/environment';
 
 @Injectable()
 export class AuthGuard extends KeycloakAuthGuard {
   constructor(protected router: Router, protected keycloakAngular: KeycloakService) {
     super(router, keycloakAngular);
   }
 
-  isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
-    return new Promise(async (resolve, reject) => {
-      if (!this.authenticated) {
-        const options: Keycloak.KeycloakLoginOptions = {};
-        options.redirectUri = environment.APP_HOME_URL  + state.url;
-        this.keycloakAngular.login(options);
-        return;
-      }
+  public async isAccessAllowed(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ) {
+    // Force the user to log in if currently unauthenticated.
+    if (!this.authenticated) {
+      await this.keycloakAngular.login({
+        redirectUri: window.location.origin + state.url
+      });
+    }
 
-      const requiredRoles = route.data.roles;
-      if (!requiredRoles || requiredRoles.length === 0) {
-        return resolve(true);
-      } else {
-        if (!this.roles || this.roles.length === 0) {
-          resolve(false);
-        }
-        let granted = false;
-        for (const requiredRole of requiredRoles) {
-          if (this.roles.indexOf(requiredRole) > -1) {
-            granted = true;
-            break;
-          }
-        }
-        resolve(granted);
-      }
-    });
+    // Get the roles required from the route.
+    const requiredRoles = route.data.roles;
+
+    // Allow the user to to proceed if no additional roles are required to access the route.
+    if (!(requiredRoles instanceof Array) || requiredRoles.length === 0) {
+      return true;
+    }
+
+    // Allow the user to proceed if all the required roles are present.
+    return requiredRoles.every((role) => this.roles.includes(role));
   }
+
 }

frontend/src/app/core/keycloak-service-wrapper.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { environment } from '../../environments/environment';
 import { Router, RouterStateSnapshot } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
@@ -14,7 +13,7 @@ export class KeycloakServiceWrapper {
   public login() {
     const routerStateSnapshot: RouterStateSnapshot = this.router.routerState.snapshot;
     const options: Keycloak.KeycloakLoginOptions = {};
-    options.redirectUri = environment.APP_HOME_URL  + routerStateSnapshot.url;
+    options.redirectUri = environment.APP_HOME_URL + routerStateSnapshot.url;
     this.keycloakService.login(options);
   }
 

frontend/src/app/public/bookmarks/homepage.component.html

@@ -10,7 +10,7 @@
           <button type="button" class="btn btn-primary btn-sm mr-2" (click)="login('feed')"><i
             class="fas fa-unlock"></i> Login / Register
           </button> to <strong>Codever</strong>
-          to see posts with your favorite topics in your feed
+          to see posts from your favorite topics in your feed
         </div>
       </div>
       <ng-template #showFollowedTags>

frontend/src/assets/silent-check-sso.html

@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <script>
+      parent.postMessage(location.href, location.origin);
+    </script>
+  </body>
+</html>