Okupa_Mi_Coche/Okupa_mi_coche_-_Angular
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Trabajo integrando angular-oauth2-oidc

Browse Source
This commit is contained in:
Eneko Nieto
2021-03-16 18:04:46 +01:00
parent fb4ebbb1f8
commit 7355f1ae7b
4 changed files with 80 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/app.component.ts
View File

@@ -1,7 +1,6 @@
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({
selector: 'app-root',
@@ -13,22 +12,20 @@ export class AppComponent implements OnInit, OnDestroy {
constructor(
private route: ActivatedRoute,
private oidcSecurityService: OidcSecurityService,
// private authService: AuthService,
private authService: AuthService,
private router: Router
) { }
async ngOnInit(): Promise<void> {
console.log('AppComponent.ngInit()');
this.oidcSecurityService.checkAuth().subscribe((auth) => console.log('is authenticated', auth));
// const chatLoginToken = await this.waitChatToken();
// const authState = await this.authService.configureAndTryLogin(chatLoginToken);
const authState = await this.authService.configureAndTryLogin(null);
// if (authState !== AuthState.ChatLoggingInProcess) {
if (authState !== AuthState.ChatLoggingInProcess) {
this.showOverlay = false;
// }
}
}
ngOnDestroy(): void {

32
src/app/auth/auth-config.module.ts
View File

@@ -1,19 +1,22 @@
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
import { AuthInterceptor, AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
import { TRAVEL_API_URL, USER_API_URL } from '../app.config';
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,
});
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,
secureRoutes: [TRAVEL_API_URL, USER_API_URL],
});
}
@NgModule({
@@ -27,6 +30,11 @@ export function configureAuth(oidcConfigService: OidcConfigService): () => Promi
deps: [OidcConfigService],
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
},
],
})
export class AuthConfigModule {}
export class AuthConfigModule { }

80
src/app/services/auth.service.ts
View File

@@ -1,6 +1,7 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { BehaviorSubject, Observable } from 'rxjs';
import { User } from '../entities/user';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { ChatService } from './chat.service';
export enum AuthState {
@@ -13,60 +14,79 @@ export enum AuthState {
providedIn: 'root'
})
export class AuthService {
private checkAuth: Observable<any>;
private loggedSubject = new BehaviorSubject<boolean>(false);
public logged$ = this.loggedSubject.asObservable();
private userSubject = new BehaviorSubject<User>(null);
public user$ = this.userSubject.asObservable();
constructor(
private oidcSecurityService: OidcSecurityService,
private chatService: ChatService
) { }
login(): void {
this.oidcSecurityService.authorize();
}
logout(): void {
this.oidcSecurityService.logoff();
}
currentUser(): User {
// const claims = this.oauthService.getIdentityClaims();
const claims = null;
return User.fromClaims(claims);
return this.userSubject.getValue();
}
async configureAndTryLogin(chatLoginToken: string): Promise<AuthState> {
this.configureOauth();
this.checkAuth = this.oidcSecurityService.checkAuth();
const logged = await this.tryOauthLogin();
if (logged) {
if (sessionStorage.getItem('chatLoginInProcess') === 'true') {
sessionStorage.removeItem('chatLoginInProcess');
this.checkAuth.subscribe((auth) => {
console.log('is authenticated', auth);
this.loggedSubject.next(auth);
});
this.oidcSecurityService.userData$.subscribe((claims) => {
console.log(claims);
console.log('name=' + User.fromClaims(claims)?.name);
this.userSubject.next(User.fromClaims(claims));
});
if (chatLoginToken) {
console.log('chatLoginToken=' + chatLoginToken);
this.chatService.login(chatLoginToken);
}
else {
console.error('CHAT LOGIN TOKEN NOT RECEIVED');
}
return this.checkAuth.toPromise().then((auth) => {
console.log('is authenticated2', auth);
if (auth) {
this.loggedSubject.next(true);
return AuthState.Logged;
}
else {
console.log('GO TO SSO LOGIN');
sessionStorage.setItem('chatLoginInProcess', 'true');
this.chatService.goToSsoLogin();
return AuthState.ChatLoggingInProcess;
}
}
return AuthState.NotLogged;
}
return AuthState.NotLogged;
});
private configureOauth(): void {
}
// const logged = await this.tryOauthLogin();
// if (logged) {
// if (sessionStorage.getItem('chatLoginInProcess') === 'true') {
// sessionStorage.removeItem('chatLoginInProcess');
private async tryOauthLogin(): Promise<boolean> {
return false;
// if (chatLoginToken) {
// console.log('chatLoginToken=' + chatLoginToken);
// this.chatService.login(chatLoginToken);
// }
// else {
// console.error('CHAT LOGIN TOKEN NOT RECEIVED');
// }
// this.loggedSubject.next(true);
// return AuthState.Logged;
// }
// else {
// console.log('GO TO SSO LOGIN');
// sessionStorage.setItem('chatLoginInProcess', 'true');
// this.chatService.goToSsoLogin();
// return AuthState.ChatLoggingInProcess;
// }
// }
// return AuthState.NotLogged;
}
}

11
src/app/views/header/header.component.ts
View File

@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AuthService } from 'src/app/services/auth.service';
@Component({
@@ -8,9 +9,13 @@ import { AuthService } from 'src/app/services/auth.service';
styleUrls: ['./header.component.css'],
})
export class HeaderComponent {
public name: string;
constructor(
private authService: AuthService
) { }
) {
this.authService.user$.subscribe(user => this.name = user?.name);
}
async login(): Promise<void> {
this.authService.login();
@@ -23,8 +28,4 @@ export class HeaderComponent {
get isLogged(): Observable<boolean> {
return this.authService.logged$;
}
get name(): string {
return this.authService.currentUser()?.name;
}
}