From 44605c43606c6aa95836ea6f7f4b7da9ba92b893 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Thu, 19 Mar 2020 01:34:00 +0100 Subject: [PATCH] Adding smooth autologin --- angular.json | 10 ++++-- src/app/app-routing.module.ts | 2 ++ src/app/app.component.html | 2 +- src/app/app.component.ts | 10 +++--- src/app/app.module.ts | 6 ++-- src/app/autologin/autologin.component.html | 1 + src/app/autologin/autologin.component.scss | 0 src/app/autologin/autologin.component.ts | 25 +++++++++++++ src/app/services/auth.service.ts | 42 +++++++++++++++++----- 9 files changed, 79 insertions(+), 19 deletions(-) create mode 100644 src/app/autologin/autologin.component.html create mode 100644 src/app/autologin/autologin.component.scss create mode 100644 src/app/autologin/autologin.component.ts diff --git a/angular.json b/angular.json index a15f0b33..e43e8a41 100644 --- a/angular.json +++ b/angular.json @@ -99,6 +99,10 @@ } } } - }}, - "defaultProject": "kyoo" -} + } + }, + "defaultProject": "kyoo", + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 185c71ab..f1fc0ea5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -15,6 +15,7 @@ import { ShowDetailsComponent } from './show-details/show-details.component'; import {LoginComponent} from "./login/login.component"; import {UnauthorizedComponent} from "./unauthorized/unauthorized.component"; import {LogoutComponent} from "./logout/logout.component"; +import {AutologinComponent} from "./autologin/autologin.component"; const routes: Routes = [ { path: "browse", component: BrowseComponent, pathMatch: "full", resolve: { shows: LibraryResolverService } }, @@ -26,6 +27,7 @@ const routes: Routes = [ { path: "search/:query", component: SearchComponent, resolve: { items: SearchResolverService } }, { path: "login", component: LoginComponent }, { path: "logout", component: LogoutComponent }, + { path: "autologin", component: AutologinComponent }, { path: "unauthorized", component: UnauthorizedComponent }, { path: "**", component: NotFoundComponent } ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index 337d1184..c3ac453a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -19,7 +19,7 @@ search -
  • +
  • account_circle diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4897b44c..27f33a2d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -71,11 +71,6 @@ export class AppComponent } } - isLoggedIn(): boolean - { - return this.authManager.isAuthenticated; - } - openAccountDialog() { const dialog = this.dialog.open(AccountComponent, {width: "500px", data: this.authManager.getAccount()}); @@ -84,6 +79,11 @@ export class AppComponent this.authManager.getUser(); }); } + + get isAuthenticated(): boolean + { + return this.authManager.isAuthenticated; + } } interface Library diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1d839565..5be978ac 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,5 @@ import { HttpClientModule } from '@angular/common/http'; -import {APP_INITIALIZER, NgModule} from '@angular/core'; +import {APP_INITIALIZER, ChangeDetectorRef, NgModule} from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatRippleModule } from '@angular/material/core'; @@ -43,6 +43,7 @@ import { LogoutComponent } from './logout/logout.component'; import {MatDialogModule} from '@angular/material/dialog'; import {FallbackDirective} from "./misc/fallback.directive"; import {AuthenticatedGuard} from "./misc/guards/authenticated-guard.service"; +import { AutologinComponent } from './autologin/autologin.component'; export function loadConfig(oidcConfigService: OidcConfigService) { @@ -66,7 +67,8 @@ export function loadConfig(oidcConfigService: OidcConfigService) AccountComponent, UnauthorizedComponent, LogoutComponent, - FallbackDirective + FallbackDirective, + AutologinComponent ], imports: [ BrowserModule, diff --git a/src/app/autologin/autologin.component.html b/src/app/autologin/autologin.component.html new file mode 100644 index 00000000..849245e8 --- /dev/null +++ b/src/app/autologin/autologin.component.html @@ -0,0 +1 @@ +

    autologin works!

    diff --git a/src/app/autologin/autologin.component.scss b/src/app/autologin/autologin.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/autologin/autologin.component.ts b/src/app/autologin/autologin.component.ts new file mode 100644 index 00000000..952b7242 --- /dev/null +++ b/src/app/autologin/autologin.component.ts @@ -0,0 +1,25 @@ +import {Component, OnInit} from '@angular/core'; +import {AuthService} from "../services/auth.service"; + +@Component({ + selector: 'app-autologin', + templateUrl: './autologin.component.html', + styleUrls: ['./autologin.component.scss'] +}) +export class AutologinComponent implements OnInit +{ + constructor(private authManager: AuthService) + { + this.authManager.oidcSecurityService.onModuleSetup.subscribe(() => + { + this.authManager.login(); + }) + } + + ngOnInit(): void + { + if (this.authManager.oidcSecurityService.moduleSetup) { + this.authManager.login(); + } + } +} diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index ba130cc0..3a03552b 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -1,17 +1,18 @@ -import { Injectable } from '@angular/core'; -import {OidcSecurityService} from "angular-auth-oidc-client"; +import {Injectable} from '@angular/core'; +import {AuthorizationResult, AuthorizationState, OidcSecurityService, ValidationResult} from "angular-auth-oidc-client"; import {HttpClient} from "@angular/common/http"; import {Account} from "../../models/account"; +import {Router} from "@angular/router"; @Injectable({ providedIn: 'root' }) export class AuthService { - isAuthenticated: boolean; + isAuthenticated: boolean = false; user: any; - constructor(public oidcSecurityService: OidcSecurityService, private http: HttpClient) + constructor(public oidcSecurityService: OidcSecurityService, private http: HttpClient, private router: Router) { if (this.oidcSecurityService.moduleSetup) this.authorizeCallback(); @@ -21,12 +22,13 @@ export class AuthService this.authorizeCallback(); }); - this.oidcSecurityService.getIsAuthorized().subscribe(auth => + this.oidcSecurityService.onAuthorizationResult.subscribe((authorizationResult: AuthorizationResult) => { - this.isAuthenticated = auth; + this.getUser(); + this.isAuthenticated = authorizationResult.authorizationState == AuthorizationState.authorized; + this.router.navigate(["/"]); }); - this.getUser(); } getUser() @@ -34,6 +36,13 @@ export class AuthService this.oidcSecurityService.getUserData().subscribe(userData => { this.user = userData; + console.log("Got user data"); + console.log(this.user); + // this.zone.run(() => + // { + // this.user = userData; + // this.isAuthenticated = userData !== undefined; + // }); }); } @@ -44,6 +53,7 @@ export class AuthService logout() { + document.cookie = "Authenticated=false; expires=" + new Date(2147483647 * 1000).toUTCString(); this.http.get("api/account/logout").subscribe(() => { this.oidcSecurityService.logoff(); @@ -52,7 +62,23 @@ export class AuthService private authorizeCallback() { - this.oidcSecurityService.authorizedCallbackWithCode(window.location.toString()); + if (window.location.href.indexOf("?code=") != -1) + this.oidcSecurityService.authorizedCallbackWithCode(window.location.toString()); + else if (window.location.href.indexOf("/login") == -1) + { + this.oidcSecurityService.getIsAuthorized().subscribe((authorized: boolean) => + { + console.log("Is authorized: " + authorized); + this.isAuthenticated = authorized; + if (!authorized) + { + if (document.cookie.indexOf("Authenticated=true") != -1) + this.router.navigate(['/autologin']); + } + else + document.cookie = "Authenticated=true; expires=" + new Date(2147483647 * 1000).toUTCString(); + }); + } } getAccount(): Account