From d217047cd48e9e02cf416ff5f445d01de47ae184 Mon Sep 17 00:00:00 2001
From: Daniel Gerhardt <code@dgerhardt.net>
Date: Fri, 27 Sep 2019 16:14:38 +0200
Subject: [PATCH 1/2] Add support for SSO to auth service

This implementation opens the SSO login page in a popup and retrieves
authentication details from the API once the popup is closed. Components
have not yet been adjusted to support SSO.
---
 .../services/http/authentication.service.ts   | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/app/services/http/authentication.service.ts b/src/app/services/http/authentication.service.ts
index 2af8374f..74bea520 100644
--- a/src/app/services/http/authentication.service.ts
+++ b/src/app/services/http/authentication.service.ts
@@ -1,7 +1,7 @@
-import { catchError, map } from 'rxjs/operators';
+import { catchError, map, concatMap, filter, take } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { User } from '../../models/user';
-import { Observable ,  of ,  BehaviorSubject } from 'rxjs';
+import { Observable, of, BehaviorSubject, timer } from 'rxjs';
 import { UserRole } from '../../models/user-roles.enum';
 import { DataStoreService } from '../util/data-store.service';
 import { EventService } from '../util/event.service';
@@ -22,7 +22,8 @@ export class AuthenticationService {
     register: '/register',
     registered: '/registered',
     resetPassword: '/resetpassword',
-    guest: '/guest'
+    guest: '/guest',
+    sso: '/sso'
   };
   private httpOptions = {
     headers: new HttpHeaders({})
@@ -89,6 +90,30 @@ export class AuthenticationService {
     return this.checkLogin(this.http.post<ClientAuthentication>(connectionUrl, null, this.httpOptions), userRole, true);
   }
 
+  /**
+   * Open the SSO login page in a popup and check the result.
+   *
+   * @param providerId ID of the SSO provider
+   * @param userRole User role for the UI
+   */
+  loginViaSso(providerId: string, userRole: UserRole): Observable<string> {
+    const ssoUrl = this.apiUrl.base + this.apiUrl.auth + this.apiUrl.sso + '/' + providerId;
+    const loginUrl = this.apiUrl.base + this.apiUrl.auth + this.apiUrl.login + '?refresh=true';
+    const popupW = 500;
+    const popupH = 500;
+    const popupX = window.top.screenX + window.top.outerWidth / 2 - popupW / 2;
+    const popupY = window.top.screenY + window.top.outerHeight / 2 - popupH / 2;
+    const popup = window.open(ssoUrl, 'auth_popup',
+        `left=${popupX},top=${popupY},width=${popupW},height=${popupH},resizable`);
+    const auth = timer(0, 500).pipe(
+        map(() => popup.closed),
+        filter((closed) => closed),
+        concatMap(() => this.http.post<ClientAuthentication>(loginUrl, null, { withCredentials: true })),
+        take(1));
+
+    return this.checkLogin(auth, userRole, false);
+  }
+
   register(email: string, password: string): Observable<boolean> {
     const connectionUrl: string = this.apiUrl.base + this.apiUrl.user + this.apiUrl.register;
 
-- 
GitLab


From b8b903716645731d328e350fcd737096109a36f9 Mon Sep 17 00:00:00 2001
From: Daniel Gerhardt <code@dgerhardt.net>
Date: Fri, 27 Sep 2019 17:53:27 +0200
Subject: [PATCH 2/2] Add SSO buttons to login dialog

SSO login buttons are dynamically added based on the authentication
provider config received from backend API.
---
 .../components/shared/login/login.component.html |  3 +++
 .../components/shared/login/login.component.ts   | 16 ++++++++++++++++
 src/assets/i18n/home/de.json                     |  1 +
 src/assets/i18n/home/en.json                     |  1 +
 4 files changed, 21 insertions(+)

diff --git a/src/app/components/shared/login/login.component.html b/src/app/components/shared/login/login.component.html
index c5ba17d4..a1dc6b35 100644
--- a/src/app/components/shared/login/login.component.html
+++ b/src/app/components/shared/login/login.component.html
@@ -25,6 +25,9 @@
   <button id="focus_button_user" class="login" mat-flat-button type="submit" aria-labelledby="login-description">
     {{ 'login.login' | translate }}
   </button>
+  <button *ngFor="let provider of ssoProviders" (click)="loginViaSso(provider.id)" class="sso" mat-flat-button type="button">
+    {{ 'login.login-with' | translate }} {{ provider.title }}
+  </button>
   <button id="focus_button_guest" (click)="guestLogin()" class="guest" mat-flat-button type="button" aria-labelledby="guest-login-description"
           matTooltip="{{'login.guest-login-tooltip' | translate}}">
     {{ 'login.guest-login' | translate }}
diff --git a/src/app/components/shared/login/login.component.ts b/src/app/components/shared/login/login.component.ts
index 9135b153..bf059072 100644
--- a/src/app/components/shared/login/login.component.ts
+++ b/src/app/components/shared/login/login.component.ts
@@ -10,6 +10,7 @@ import { UserActivationComponent } from '../../home/_dialogs/user-activation/use
 import { PasswordResetComponent } from '../../home/_dialogs/password-reset/password-reset.component';
 import { RegisterComponent } from '../../home/_dialogs/register/register.component';
 import { EventService } from '../../../services/util/event.service';
+import { AuthenticationProviderType } from '../../../models/api-config';
 
 export class LoginErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -42,6 +43,7 @@ export class LoginComponent implements OnInit, OnChanges {
               public notificationService: NotificationService,
               public dialog: MatDialog,
               public eventService: EventService,
+              private apiConfigService: ApiConfigService,
               @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
@@ -64,6 +66,16 @@ export class LoginComponent implements OnInit, OnChanges {
     }
   }
 
+  get ssoProviders() {
+    return this.providers(AuthenticationProviderType.SSO);
+  }
+
+  providers(type?: AuthenticationProviderType) {
+    return (type != null)
+        ? this.apiConfigService.getAuthProviders().filter((p) => p.type === type)
+        : this.apiConfigService.getAuthProviders();
+  }
+
   activateUser(): void {
     this.dialog.open(UserActivationComponent, {
       width: '350px',
@@ -97,6 +109,10 @@ export class LoginComponent implements OnInit, OnChanges {
     this.authenticationService.guestLogin(this.role).subscribe(loginSuccessful => this.checkLogin(loginSuccessful));
   }
 
+  loginViaSso(providerId: string): void {
+    this.authenticationService.loginViaSso(providerId, this.role).subscribe(loginSuccessful => this.checkLogin(loginSuccessful));
+  }
+
   private checkLogin(loginSuccessful: string) {
     if (loginSuccessful === 'true') {
       this.translationService.get('login.login-successful').subscribe(message => {
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index a96d1667..0fc34124 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -109,6 +109,7 @@
     "header": "Anmelden",
     "input-incorrect": "Bitte prüfe deine Eingaben.",
     "login": "Anmelden mit Konto",
+    "login-with": "Anmelden mit",
     "login-data-incorrect": "Benutzername oder Passwort falsch",
     "login-description": "Mit den eingegebenen Kontodaten anmelden",
     "login-successful": "Anmeldung erfolgreich",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 12f840bd..912b85ba 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -111,6 +111,7 @@
     "header": "Log in",
     "input-incorrect": "Please check your data.",
     "login": "Log in with account",
+    "login-with": "Log in with",
     "login-data-incorrect": "Username or password incorrect",
     "login-description": "Log in with the entered account data",
     "login-successful": "Login successful",
-- 
GitLab