Adding smooth autologin

This commit is contained in:
Zoe Roux 2020-03-19 01:34:00 +01:00
parent 81b30950e3
commit 44605c4360
9 changed files with 79 additions and 19 deletions

View File

@ -99,6 +99,10 @@
} }
} }
} }
}}, }
"defaultProject": "kyoo" },
} "defaultProject": "kyoo",
"cli": {
"analytics": false
}
}

View File

@ -15,6 +15,7 @@ import { ShowDetailsComponent } from './show-details/show-details.component';
import {LoginComponent} from "./login/login.component"; import {LoginComponent} from "./login/login.component";
import {UnauthorizedComponent} from "./unauthorized/unauthorized.component"; import {UnauthorizedComponent} from "./unauthorized/unauthorized.component";
import {LogoutComponent} from "./logout/logout.component"; import {LogoutComponent} from "./logout/logout.component";
import {AutologinComponent} from "./autologin/autologin.component";
const routes: Routes = [ const routes: Routes = [
{ path: "browse", component: BrowseComponent, pathMatch: "full", resolve: { shows: LibraryResolverService } }, { 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: "search/:query", component: SearchComponent, resolve: { items: SearchResolverService } },
{ path: "login", component: LoginComponent }, { path: "login", component: LoginComponent },
{ path: "logout", component: LogoutComponent }, { path: "logout", component: LogoutComponent },
{ path: "autologin", component: AutologinComponent },
{ path: "unauthorized", component: UnauthorizedComponent }, { path: "unauthorized", component: UnauthorizedComponent },
{ path: "**", component: NotFoundComponent } { path: "**", component: NotFoundComponent }
]; ];

View File

@ -19,7 +19,7 @@
<input placeholder="Search" id="search" type="search" (input)="onUpdateValue($event)"/> <input placeholder="Search" id="search" type="search" (input)="onUpdateValue($event)"/>
<mat-icon matTooltipPosition="below" matTooltip="Search" (click)="openSearch()">search</mat-icon> <mat-icon matTooltipPosition="below" matTooltip="Search" (click)="openSearch()">search</mat-icon>
</li> </li>
<li class="nav-item" *ngIf="!isLoggedIn(); else accountDrop"> <li class="nav-item" *ngIf="!this.isAuthenticated else accountDrop">
<a class="icon" (click)="this.authManager.login()" matTooltipPosition="below" matTooltip="Login"> <a class="icon" (click)="this.authManager.login()" matTooltipPosition="below" matTooltip="Login">
<mat-icon>account_circle</mat-icon> <mat-icon>account_circle</mat-icon>
</a> </a>

View File

@ -71,11 +71,6 @@ export class AppComponent
} }
} }
isLoggedIn(): boolean
{
return this.authManager.isAuthenticated;
}
openAccountDialog() openAccountDialog()
{ {
const dialog = this.dialog.open(AccountComponent, {width: "500px", data: this.authManager.getAccount()}); const dialog = this.dialog.open(AccountComponent, {width: "500px", data: this.authManager.getAccount()});
@ -84,6 +79,11 @@ export class AppComponent
this.authManager.getUser(); this.authManager.getUser();
}); });
} }
get isAuthenticated(): boolean
{
return this.authManager.isAuthenticated;
}
} }
interface Library interface Library

View File

@ -1,5 +1,5 @@
import { HttpClientModule } from '@angular/common/http'; 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 { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { MatRippleModule } from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
@ -43,6 +43,7 @@ import { LogoutComponent } from './logout/logout.component';
import {MatDialogModule} from '@angular/material/dialog'; import {MatDialogModule} from '@angular/material/dialog';
import {FallbackDirective} from "./misc/fallback.directive"; import {FallbackDirective} from "./misc/fallback.directive";
import {AuthenticatedGuard} from "./misc/guards/authenticated-guard.service"; import {AuthenticatedGuard} from "./misc/guards/authenticated-guard.service";
import { AutologinComponent } from './autologin/autologin.component';
export function loadConfig(oidcConfigService: OidcConfigService) export function loadConfig(oidcConfigService: OidcConfigService)
{ {
@ -66,7 +67,8 @@ export function loadConfig(oidcConfigService: OidcConfigService)
AccountComponent, AccountComponent,
UnauthorizedComponent, UnauthorizedComponent,
LogoutComponent, LogoutComponent,
FallbackDirective FallbackDirective,
AutologinComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

View File

@ -0,0 +1 @@
<p>autologin works!</p>

View File

@ -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();
}
}
}

View File

@ -1,17 +1,18 @@
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import {OidcSecurityService} from "angular-auth-oidc-client"; import {AuthorizationResult, AuthorizationState, OidcSecurityService, ValidationResult} from "angular-auth-oidc-client";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {Account} from "../../models/account"; import {Account} from "../../models/account";
import {Router} from "@angular/router";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class AuthService export class AuthService
{ {
isAuthenticated: boolean; isAuthenticated: boolean = false;
user: any; user: any;
constructor(public oidcSecurityService: OidcSecurityService, private http: HttpClient) constructor(public oidcSecurityService: OidcSecurityService, private http: HttpClient, private router: Router)
{ {
if (this.oidcSecurityService.moduleSetup) if (this.oidcSecurityService.moduleSetup)
this.authorizeCallback(); this.authorizeCallback();
@ -21,12 +22,13 @@ export class AuthService
this.authorizeCallback(); 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() getUser()
@ -34,6 +36,13 @@ export class AuthService
this.oidcSecurityService.getUserData().subscribe(userData => this.oidcSecurityService.getUserData().subscribe(userData =>
{ {
this.user = 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() logout()
{ {
document.cookie = "Authenticated=false; expires=" + new Date(2147483647 * 1000).toUTCString();
this.http.get("api/account/logout").subscribe(() => this.http.get("api/account/logout").subscribe(() =>
{ {
this.oidcSecurityService.logoff(); this.oidcSecurityService.logoff();
@ -52,7 +62,23 @@ export class AuthService
private authorizeCallback() 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 getAccount(): Account