Yanaël GRETTE
4 years ago
commit
44072ac899
@ -0,0 +1,23 @@ |
|||||||
|
import { AuthConfig } from 'angular-oauth2-oidc'; |
||||||
|
import { environment } from '@env'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Configuration du serveur Keycloak. |
||||||
|
*/ |
||||||
|
export const authConfig: AuthConfig = { |
||||||
|
issuer: environment.keycloakConfig.issuer, |
||||||
|
clientId: environment.keycloakConfig.clientId,
|
||||||
|
dummyClientSecret: environment.keycloakConfig.dummyClientSecret, |
||||||
|
responseType: environment.keycloakConfig.responseType, |
||||||
|
redirectUri: environment.keycloakConfig.redirectUri, |
||||||
|
silentRefreshRedirectUri: environment.keycloakConfig.silentRefreshRedirectUri, |
||||||
|
scope: environment.keycloakConfig.scope,
|
||||||
|
useSilentRefresh: environment.keycloakConfig.useSilentRefresh,
|
||||||
|
silentRefreshTimeout: environment.keycloakConfig.silentRefreshTimeout, |
||||||
|
timeoutFactor: environment.keycloakConfig.timeoutFactor, |
||||||
|
sessionChecksEnabled: environment.keycloakConfig.sessionChecksEnabled, |
||||||
|
showDebugInformation: environment.keycloakConfig.showDebugInformation, |
||||||
|
clearHashAfterLogin: environment.keycloakConfig.clearHashAfterLogin,
|
||||||
|
nonceStateSeparator : environment.keycloakConfig.nonceStateSeparator
|
||||||
|
}; |
||||||
|
|
||||||
@ -0,0 +1,12 @@ |
|||||||
|
import { OAuthModuleConfig } from 'angular-oauth2-oidc'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Liste des urls pour lesquelles les appels doivent être interceptés. |
||||||
|
* Si la propriété sendAccessToken est défini sur true, l'access_token est envoyé dans le header. |
||||||
|
*/ |
||||||
|
export const authModuleConfig: OAuthModuleConfig = { |
||||||
|
resourceServer: { |
||||||
|
allowedUrls: ['https://localhost:44393/api'], |
||||||
|
sendAccessToken: true, |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router'; |
||||||
|
import { Observable } from 'rxjs'; |
||||||
|
import { tap } from 'rxjs/operators'; |
||||||
|
|
||||||
|
import { AuthService } from './auth.service'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Guard permettant de gérer les autorisations au niveau des routes. |
||||||
|
*/ |
||||||
|
@Injectable() |
||||||
|
export class AuthGuard implements CanActivate { |
||||||
|
constructor(private authService: AuthService) { } |
||||||
|
|
||||||
|
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { |
||||||
|
return this.authService.canActivateProtectedRoutes$.pipe(tap(isLoggin => this.login(isLoggin))); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Affiche la page de connexion si l'utilisateur n'est pas connecté. |
||||||
|
* @param isLoggin Booléen permettant de savoir si l'utilisateur est connecté ou non |
||||||
|
*/ |
||||||
|
private login(isLoggin: boolean) { |
||||||
|
if (!isLoggin) { |
||||||
|
this.authService.login(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import { HttpClientModule } from '@angular/common/http'; |
||||||
|
import { ModuleWithProviders, NgModule, Optional, SkipSelf, APP_INITIALIZER } from '@angular/core'; |
||||||
|
import { AuthConfig, OAuthModule, OAuthModuleConfig, OAuthStorage } from 'angular-oauth2-oidc'; |
||||||
|
import { authConfig } from './auth-config'; |
||||||
|
import { AuthGuard } from './auth.guard'; |
||||||
|
import { authModuleConfig } from './auth-module-config'; |
||||||
|
import { AuthService } from './auth.service'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Nous avons besoin d'une usine de stockage car le localStorage
|
||||||
|
* n'est pas disponible au moment de la compilation de l'AOT. (Ahead-of-time) |
||||||
|
*/ |
||||||
|
export function storageFactory(): OAuthStorage { |
||||||
|
return localStorage; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Exécute la méthode qui permet d'afficher la page de connexion. |
||||||
|
* @param authService Service d'authentification |
||||||
|
*/ |
||||||
|
export function init_app(authService: AuthService) { |
||||||
|
return () => authService.runInitialLoginSequence(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Module d'authentification. |
||||||
|
*/ |
||||||
|
@NgModule({ |
||||||
|
imports: [ |
||||||
|
HttpClientModule, |
||||||
|
OAuthModule.forRoot(), |
||||||
|
], |
||||||
|
providers: [ |
||||||
|
AuthService, |
||||||
|
AuthGuard, |
||||||
|
], |
||||||
|
}) |
||||||
|
export class AuthModule { |
||||||
|
static forRoot(): ModuleWithProviders<AuthModule> { |
||||||
|
return { |
||||||
|
ngModule: AuthModule, |
||||||
|
providers: [ |
||||||
|
{ provide: AuthConfig, useValue: authConfig }, |
||||||
|
{ provide: OAuthModuleConfig, useValue: authModuleConfig }, |
||||||
|
{ provide: OAuthStorage, useFactory: storageFactory }, |
||||||
|
{ |
||||||
|
provide: APP_INITIALIZER, |
||||||
|
useFactory: init_app, // Affiche la page de connexion au démarrage de l'application
|
||||||
|
deps: [ AuthService ], |
||||||
|
multi: true |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
constructor (@Optional() @SkipSelf() parentModule: AuthModule) { |
||||||
|
if (parentModule) { |
||||||
|
throw new Error("AuthModule est déjà chargé. Importez-le dans uniquement l'AppModule."); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
|
||||||
|
describe('AuthService', () => { |
||||||
|
it('should pass', () => { |
||||||
|
expect(true).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,263 @@ |
|||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import { Router } from '@angular/router'; |
||||||
|
import { OAuthErrorEvent, OAuthService } from 'angular-oauth2-oidc'; |
||||||
|
import { BehaviorSubject, combineLatest, Observable, ReplaySubject } from 'rxjs'; |
||||||
|
import { filter, map } from 'rxjs/operators'; |
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' }) |
||||||
|
export class AuthService { |
||||||
|
|
||||||
|
private isAuthenticatedSubject$ = new BehaviorSubject<boolean>(false); |
||||||
|
private isDoneLoadingSubject$ = new ReplaySubject<boolean>(); |
||||||
|
|
||||||
|
/** |
||||||
|
* Observable permettant de savoir si l'utilisateur est authentifié. |
||||||
|
*/ |
||||||
|
public isAuthenticated$ = this.isAuthenticatedSubject$.asObservable(); |
||||||
|
|
||||||
|
/** |
||||||
|
* Observable permettant de savoir si le chargement de la connexion initiale est terminé. |
||||||
|
*/ |
||||||
|
public isDoneLoading$ = this.isDoneLoadingSubject$.asObservable(); |
||||||
|
|
||||||
|
/** |
||||||
|
* Retourne "true" si et seulement si tous les appels asynchrones de la connexion initiale
|
||||||
|
* sont terminés (ou comportent une erreur), et si l'utilisateur |
||||||
|
* a fini par être authentifié. |
||||||
|
* |
||||||
|
* En résumé, il combine: |
||||||
|
* |
||||||
|
* - Le dernier état connu indiquant si l'utilisateur est autorisé |
||||||
|
* - Si les appels ajax pour la connexion initiale ont tous été effectués |
||||||
|
*/ |
||||||
|
public canActivateProtectedRoutes$: Observable<boolean> = combineLatest([ |
||||||
|
this.isAuthenticated$, this.isDoneLoading$ ]).pipe(map(values => values.every(b => b))); |
||||||
|
|
||||||
|
/** |
||||||
|
* Navigue vers la page de connexion. |
||||||
|
*/ |
||||||
|
private navigateToLoginPage() { |
||||||
|
// Pour naviguer vers un composant
|
||||||
|
//this.router.navigateByUrl('/should-login');
|
||||||
|
|
||||||
|
// Pour naviguer vers la page de connexion du server Keycloak
|
||||||
|
this.login(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Constructeur du service d'authentification. |
||||||
|
* @param oauthService Service d'authentification de la librairie angular-oauth2-oidc |
||||||
|
* @param router Service permettant de naviguer et de manipuler les urls |
||||||
|
*/ |
||||||
|
constructor(private oauthService: OAuthService, private router: Router) { |
||||||
|
|
||||||
|
/* |
||||||
|
// Utile pour le débogage:
|
||||||
|
this.oauthService.events.subscribe(event => { |
||||||
|
if (event instanceof OAuthErrorEvent) { |
||||||
|
console.error('OAuthErrorEvent Object:', event); |
||||||
|
} else { |
||||||
|
console.warn('OAuthEvent Object:', event); |
||||||
|
} |
||||||
|
}); |
||||||
|
*/ |
||||||
|
|
||||||
|
// Ajout un évènement afin de gérer l'acces_token dans le cas où l'application est ouverte dans deux onglets différents.
|
||||||
|
// TODO: Pour améliorer cette configuration. Voir: https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/issues/2
|
||||||
|
window.addEventListener('storage', (event) => { |
||||||
|
// La propriété "key" à la valeur "null" si l'événement a été causé par la méthode ".clear()".
|
||||||
|
if (event.key !== 'access_token' && event.key !== null) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
console.warn("Changements remarqués dans l'access_token (très probablement depuis un autre onglet). Mise à jour de l'observable isAuthenticated.") ; |
||||||
|
this.isAuthenticatedSubject$.next(this.oauthService.hasValidAccessToken()); |
||||||
|
|
||||||
|
// Si l'acces_token n'est pas valide, on redirige l'utilisateur vers la page de connexion
|
||||||
|
if (!this.oauthService.hasValidAccessToken()) { |
||||||
|
this.navigateToLoginPage(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Met à jour l'observable lorsque l'access_token est valide
|
||||||
|
this.oauthService.events |
||||||
|
.subscribe(_ => { |
||||||
|
this.isAuthenticatedSubject$.next(this.oauthService.hasValidAccessToken()); |
||||||
|
}); |
||||||
|
|
||||||
|
// Charge le profil de l'utilisateur lorsque le token est reçu
|
||||||
|
this.oauthService.events |
||||||
|
.pipe(filter(e => ['token_received'].includes(e.type))) |
||||||
|
.subscribe(e => this.oauthService.loadUserProfile()); |
||||||
|
|
||||||
|
// Redirige l'utilisateur vers la page de connexion lorsque la session est terminée ou lorsque qu'il y a une erreur
|
||||||
|
this.oauthService.events |
||||||
|
.pipe(filter(e => ['session_terminated', 'session_error'].includes(e.type))) |
||||||
|
.subscribe(e => this.navigateToLoginPage()); |
||||||
|
|
||||||
|
// Mise en place d'un rafraîchissement silencieux lorsque le jeton est sur le point d'expirer
|
||||||
|
this.oauthService.setupAutomaticSilentRefresh(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Lance la séquence de connexion initiale. |
||||||
|
*/ |
||||||
|
public runInitialLoginSequence(): Promise<void> { |
||||||
|
if (location.hash) { |
||||||
|
console.log("Fragment de hachage rencontré, tracé sous forme de tableau...") ; |
||||||
|
console.table(location.hash.substr(1).split('&').map(kvp => kvp.split('='))); |
||||||
|
} |
||||||
|
|
||||||
|
// 0. CONFIGURATION DU CHARGEMENT:
|
||||||
|
// Il faut d'abord vérifier comment le serveur Keycloak est actuellement configuré:
|
||||||
|
return this.oauthService.loadDiscoveryDocument() |
||||||
|
|
||||||
|
// 1. HASH LOGIN:
|
||||||
|
// Essaye de se connecter via le fragment de hachage
|
||||||
|
// après avoir été redirigé depuis le serveur Keycloak depuis initImplicitFlow :
|
||||||
|
.then(() => this.oauthService.tryLogin()) |
||||||
|
|
||||||
|
.then(() => { |
||||||
|
if (this.oauthService.hasValidAccessToken()) { |
||||||
|
return Promise.resolve(); |
||||||
|
} |
||||||
|
|
||||||
|
// 2. SILENT LOGIN:
|
||||||
|
// Effectue un rafraîchissement silencieux pour le flux implicite.
|
||||||
|
// Utilise cette méthode pour obtenir des nouveaux tokens quand/avant que les tokens existants expirent.
|
||||||
|
return this.oauthService.silentRefresh() |
||||||
|
.then(() => Promise.resolve()) |
||||||
|
.catch(result => { |
||||||
|
// Sous-ensemble de situations de https://openid.net/specs/openid-connect-core-1_0.html#AuthError
|
||||||
|
// Seulement celles où il est raisonnablement certain que l'envoi de l'utilisateur au serveur Keycloak est utile.
|
||||||
|
const errorResponsesRequiringUserInteraction = [ |
||||||
|
'interaction_required', |
||||||
|
'login_required', |
||||||
|
'account_selection_required', |
||||||
|
'consent_required', |
||||||
|
]; |
||||||
|
|
||||||
|
if (result |
||||||
|
&& result.reason |
||||||
|
&& errorResponsesRequiringUserInteraction.indexOf(result.reason.error) >= 0) { |
||||||
|
|
||||||
|
// 3. DEMANDE DE CONNEXION:
|
||||||
|
// A ce stade, nous savons avec certitude que nous devons demander à
|
||||||
|
// l'utilisateur de se connecter, nous le redirigeons donc vers la page de connexion.
|
||||||
|
|
||||||
|
// Activez cette option pour TOUJOURS forcer un utilisateur à se connecter.
|
||||||
|
this.login(); |
||||||
|
|
||||||
|
// Afficher un mesage d'avertissement:
|
||||||
|
//console.warn("Une interaction de l'utilisateur est nécessaire pour se connecter, nous allons attendre que l'utilisateur se connecte manuellement.");
|
||||||
|
|
||||||
|
return Promise.resolve(); |
||||||
|
} |
||||||
|
|
||||||
|
return Promise.reject(result); |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
.then(() => { |
||||||
|
// Met à jour l'observable isDoneLoadingSubject
|
||||||
|
this.isDoneLoadingSubject$.next(true); |
||||||
|
|
||||||
|
// Vérifie les valeurs "undefined" et "null" pour être sûr.
|
||||||
|
// Notre login actuel ne devrait jamais avoir cela, mais au cas
|
||||||
|
// où quelqu'un appellerait la méthode initImplicitFlow(undefined|null), cela pourrait arriver.
|
||||||
|
if (this.oauthService.state && this.oauthService.state !== 'undefined' && this.oauthService.state !== 'null') { |
||||||
|
let stateUrl = this.oauthService.state; |
||||||
|
if (stateUrl.startsWith('/') === false) { |
||||||
|
stateUrl = decodeURIComponent(stateUrl); |
||||||
|
} |
||||||
|
console.log(`Il y a eu l'état de ${this.oauthService.state}, donc nous vous envoyons à ${stateUrl}`) ; |
||||||
|
this.router.navigateByUrl(stateUrl); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(() => this.isDoneLoadingSubject$.next(true)); // Met à jour l'observable isDoneLoadingSubject
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Affiche la page de connexion. |
||||||
|
* @param targetUrl Url de destination |
||||||
|
*/ |
||||||
|
public login(targetUrl?: string) { |
||||||
|
// Note : avant la version 9.1.0 de la librairie, il fallait
|
||||||
|
// passer le composant encodageURIC dans les arguments de la méthode.
|
||||||
|
this.oauthService.initLoginFlow(targetUrl || this.router.url); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Supprime tous les tokens et déconnecte l'utilisateur. |
||||||
|
*/ |
||||||
|
public logout() { this.oauthService.logOut(); } |
||||||
|
|
||||||
|
/** |
||||||
|
* Permet d'obtenir des nouveaux tokens quand/avant que les tokens existants expirent. |
||||||
|
*/ |
||||||
|
public refresh() { this.oauthService.silentRefresh(); } |
||||||
|
|
||||||
|
/** |
||||||
|
* Vérifie si l'access_token est valide. |
||||||
|
*/ |
||||||
|
public hasValidToken() { return this.oauthService.hasValidAccessToken(); } |
||||||
|
|
||||||
|
/** |
||||||
|
* Premier rôle dans la liste des rôles de l'utilisateur. |
||||||
|
*/ |
||||||
|
public get firstRole() { |
||||||
|
if(this.identityClaims != null) |
||||||
|
return this.oauthService.getIdentityClaims()['roles'][0];
|
||||||
|
else |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Liste des rôles de l'utilisateur. |
||||||
|
*/ |
||||||
|
public get roles() {
|
||||||
|
if(this.identityClaims != null) |
||||||
|
return this.oauthService.getIdentityClaims()['roles'];
|
||||||
|
else |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Nom et prénom de l'utilisateur. |
||||||
|
*/ |
||||||
|
public get userInfo() {
|
||||||
|
if(this.identityClaims != null) |
||||||
|
return this.oauthService.getIdentityClaims()['name'];
|
||||||
|
else |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Normalement, un service comme celui-ci ne les expose pas,
|
||||||
|
// mais pour le débogage, c'est logique.
|
||||||
|
|
||||||
|
/** |
||||||
|
* Access_token actuel. |
||||||
|
*/ |
||||||
|
public get accessToken() { return this.oauthService.getAccessToken(); } |
||||||
|
|
||||||
|
/** |
||||||
|
* Refresh_Token actuel. |
||||||
|
*/ |
||||||
|
public get refreshToken() { return this.oauthService.getRefreshToken(); } |
||||||
|
|
||||||
|
/** |
||||||
|
* Claims concernant l'utilisateur. |
||||||
|
*/ |
||||||
|
public get identityClaims() { return this.oauthService.getIdentityClaims(); } |
||||||
|
|
||||||
|
/** |
||||||
|
* Id_token actuel. |
||||||
|
*/ |
||||||
|
public get idToken() { return this.oauthService.getIdToken(); } |
||||||
|
|
||||||
|
/** |
||||||
|
* Url de déconnexion. |
||||||
|
*/ |
||||||
|
public get logoutUrl() { return this.oauthService.logoutUrl; } |
||||||
|
} |
||||||
@ -1,40 +0,0 @@ |
|||||||
import { Injectable } from '@angular/core'; |
|
||||||
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; |
|
||||||
import { KeycloakService, KeycloakAuthGuard } from 'keycloak-angular'; |
|
||||||
|
|
||||||
|
|
||||||
/** |
|
||||||
* KeycloakGuard est la classe qui va gérer l'authentification et les droits d'accès en fonction des rôles Keycloak. |
|
||||||
*/ |
|
||||||
@Injectable() |
|
||||||
export class KeycloakGuard 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) { |
|
||||||
this.keycloakAngular.login(); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
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: boolean = false; |
|
||||||
for (const requiredRole of requiredRoles) { |
|
||||||
if (this.roles.indexOf(requiredRole) > -1) { |
|
||||||
granted = true; |
|
||||||
break; |
|
||||||
} |
|
||||||
} |
|
||||||
resolve(granted); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<html> |
||||||
|
|
||||||
|
<body> |
||||||
|
<script> |
||||||
|
// Based on: https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/silent-refresh.html |
||||||
|
|
||||||
|
const checks = [/[\?|&|#]code=/, /[\?|&|#]error=/, /[\?|&|#]token=/, /[\?|&|#]id_token=/]; |
||||||
|
|
||||||
|
function isResponse(str) { |
||||||
|
let count = 0; |
||||||
|
|
||||||
|
if (!str) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
for (let i = 0; i < checks.length; i++) { |
||||||
|
if (str.match(checks[i])) return true; |
||||||
|
} |
||||||
|
|
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
let message = isResponse(location.hash) ? location.hash : '#' + location.search; |
||||||
|
|
||||||
|
console.log("Rafraîchissement silencieux de l'iframe affichée dans l'application parente, message: ", message); |
||||||
|
|
||||||
|
(window.opener || window.parent).postMessage(message, location.origin); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
Loading…
Reference in new issue