Merge pull request #286 from netgrif/NAE-2118

machacjozef · web-flow · commit 8c56e794bb45 · 2025-08-04T22:24:54.000+02:00
[NAE-2118] Implement OpenID Connector Auth for Admin node
diff --git a/nae.json b/nae.json
@@ -4,7 +4,7 @@
     "providers": {
         "auth": {
             "address": "http://localhost:8080/api/",
-            "authentication": "Basic",
+            "authentication": "BasicWithRealm",
             "endpoints": {
                 "login": "auth/login",
                 "logout": "auth/logout",
@@ -14,12 +14,19 @@
                 "verify": "auth/token/verify",
                 "invite": "auth/invite",
                 "reset": "auth/reset",
-                "recover": "/auth/recover"
+                "recover": "auth/recover"
             },
             "sessionBearer": "X-Auth-Token",
             "sessionTimeoutEnabled": false,
             "sessionTimeout": 900,
-            "jwtBearer": "X-Jwt-Token"
+            "jwtBearer": "X-Jwt-Token",
+            "sso": {
+                "enable": false,
+                "clientId": "dev-cluster-worker",
+                "redirectUrl": "http://localhost:8081/realms/netgrif-cloud-testing/protocol/openid-connect/auth",
+                "refreshUrl": "http://localhost:8800/api/auth/login",
+                "scopes": ["openid","email","profile","roles"]
+            }
         },
         "resources": [
             {
diff --git a/projects/netgrif-components-core/src/assets/i18n/de.json b/projects/netgrif-components-core/src/assets/i18n/de.json
@@ -313,6 +313,7 @@
             "login": "Benutzername",
             "wrongCredentials": "Falsche Anmeldeinformationen!",
             "loginButton": "Anmelden",
+            "ssoButton": "SSO-Anmeldung",
             "reset": "Kennwort wiederherstellen",
             "sign": "Registrieren",
             "enterPass": "Ihre Kennwort eingeben"
diff --git a/projects/netgrif-components-core/src/assets/i18n/en.json b/projects/netgrif-components-core/src/assets/i18n/en.json
@@ -313,6 +313,7 @@
             "login": "Username",
             "wrongCredentials": "Wrong credentials!",
             "loginButton": "Log in",
+            "ssoButton": "Log with SSO",
             "reset": "Reset password",
             "sign": "Sign Up",
             "enterPass": "Enter your password"
diff --git a/projects/netgrif-components-core/src/assets/i18n/sk.json b/projects/netgrif-components-core/src/assets/i18n/sk.json
@@ -313,6 +313,7 @@
             "login": "Prihlasovacie meno",
             "wrongCredentials": "Nesprávne prihlasovacie údaje!",
             "loginButton": "Prihlásiť",
+            "ssoButton": "Prihlásiť sa pomocou SSO",
             "reset": "Obnova hesla",
             "sign": "Registrovať",
             "enterPass": "Zadajte svoje heslo"
diff --git a/projects/netgrif-components-core/src/commons/schema.ts b/projects/netgrif-components-core/src/commons/schema.ts
@@ -46,10 +46,19 @@ export interface Auth {
     authentication: string;
     sessionBearer?: string;
     endpoints?: string | { [k: string]: string };
+    sso?: Sso;
 
     [k: string]: any;
 }
 
+export interface Sso {
+    enable: boolean;
+    redirectUrl: string;
+    refreshUrl: string;
+    clientId: string;
+    scopes: Array<string>;
+}
+
 export interface Resource {
     name: string;
     address: string;
diff --git a/projects/netgrif-components-core/src/lib/forms/login/abstract-login-form.component.spec.ts b/projects/netgrif-components-core/src/lib/forms/login/abstract-login-form.component.spec.ts
@@ -70,7 +70,7 @@ describe('AbstractLoginFormComponent', () => {
     template: ''
 })
 class TestLoginFormComponent extends AbstractLoginFormComponent {
-    constructor(formBuilder: FormBuilder, protected _userService: UserService) {
-        super(formBuilder, _userService);
+    constructor(formBuilder: FormBuilder, protected _userService: UserService, protected _configService: ConfigurationService) {
+        super(formBuilder, _userService, _configService);
     }
 }
diff --git a/projects/netgrif-components-core/src/lib/forms/login/abstract-login-form.component.ts b/projects/netgrif-components-core/src/lib/forms/login/abstract-login-form.component.ts
@@ -5,6 +5,8 @@ import {UserService} from '../../user/services/user.service';
 import {User} from '../../user/models/user';
 import {LoadingEmitter} from '../../utility/loading-emitter';
 import {take} from 'rxjs/operators';
+import {ConfigurationService} from "../../configuration/configuration.service";
+import {Sso} from "../../../commons/schema";
 
 @Component({
     selector: 'ncc-abstract-login-field',
@@ -15,6 +17,7 @@ export abstract class AbstractLoginFormComponent implements HasForm, OnDestroy {
     public rootFormGroup: FormGroup;
     public hidePassword = true;
     public loading: LoadingEmitter;
+    protected showSsoButton: boolean;
 
     @Input() public showSignUpButton: boolean;
     @Input() public showForgottenPasswordButton: boolean;
@@ -23,7 +26,7 @@ export abstract class AbstractLoginFormComponent implements HasForm, OnDestroy {
     @Output() public signUp: EventEmitter<void>;
     @Output() public formSubmit: EventEmitter<FormSubmitEvent>;
 
-    protected constructor(formBuilder: FormBuilder, protected _userService: UserService) {
+    protected constructor(formBuilder: FormBuilder, protected _userService: UserService, protected _config: ConfigurationService) {
         this.rootFormGroup = formBuilder.group({
             login: [''],
             password: ['']
@@ -33,6 +36,8 @@ export abstract class AbstractLoginFormComponent implements HasForm, OnDestroy {
         this.signUp = new EventEmitter<void>();
         this.formSubmit = new EventEmitter<FormSubmitEvent>();
         this.loading = new LoadingEmitter();
+        let ssoConfig: Sso = this._config.getConfigurationSubtree(['providers', 'auth', 'sso'])
+        this.showSsoButton = ssoConfig?.enable
     }
 
     ngOnDestroy(): void {
diff --git a/projects/netgrif-components-core/src/lib/forms/login/login-sso/abstract-login-sso.component.spec.ts b/projects/netgrif-components-core/src/lib/forms/login/login-sso/abstract-login-sso.component.spec.ts
@@ -0,0 +1 @@
+// todo 2118
diff --git a/projects/netgrif-components-core/src/lib/forms/login/login-sso/abstract-login-sso.component.ts b/projects/netgrif-components-core/src/lib/forms/login/login-sso/abstract-login-sso.component.ts
@@ -0,0 +1,108 @@
+import {Component, OnDestroy} from "@angular/core";
+import {ActivatedRoute, Params, Router} from "@angular/router";
+import {Observable, throwError} from "rxjs";
+import {catchError} from "rxjs/operators";
+import {HttpClient} from "@angular/common/http";
+import {ConfigurationService} from "../../../configuration/configuration.service";
+import {LoggerService} from '../../../logger/services/logger.service';
+import {LoadingEmitter} from '../../../utility/loading-emitter';
+import {SnackBarService} from "../../../snack-bar/services/snack-bar.service";
+import {Sso} from "../../../../commons/schema";
+import {TranslateService} from "@ngx-translate/core";
+
+
+@Component({
+    selector: 'ncc-abstract-login-field',
+    template: ''
+})
+export abstract class AbstractLoginSsoComponent implements OnDestroy {
+
+    protected _ssoConfig: Sso;
+    protected loading: LoadingEmitter;
+
+    protected constructor(
+        protected _config: ConfigurationService,
+        protected _http: HttpClient,
+        protected _snackbar: SnackBarService,
+        protected _log: LoggerService,
+        protected _router: Router,
+        protected _activeRouter: ActivatedRoute,
+        protected _translate: TranslateService
+    ) {
+        this._ssoConfig = this._config.getConfigurationSubtree(['providers', 'auth', 'sso']);
+        this.loading = new LoadingEmitter();
+        this._activeRouter.queryParams.subscribe((params) => {
+            if (!!params.code) {
+                this.loginFromCode(params);
+            }
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.loading.complete();
+    }
+
+    public redirectToSso(): void {
+        let redirectUrl: string = this.getRedirectUrl();
+        this._log.info("Redirecting to " + redirectUrl)
+        window.location.href = redirectUrl;
+    }
+
+    public loginFromCode(params: Params) {
+        if (!params.code) {
+            return;
+        }
+
+        this.loading.on();
+        this._log.debug('Handling access token: ' + params.code)
+        const token$ = this.getToken({
+            grantType: 'authorization_code',
+            code: params.code,
+            realmId: '', // todo send realm id
+            redirectUri: location.origin + '/' + this._config.getConfigurationSubtree(['services', 'auth', 'toLoginRedirect']),
+        });
+        token$.subscribe(
+            token => {
+                this.loading.off();
+                if (!!token) {
+                    this.redirectToHome();
+                }
+            },
+        );
+    }
+
+    protected getRedirectUrl(): string {
+        const myQuery = this._ssoConfig.redirectUrl + '?';
+        const options: { [index: string]: string } = {
+            client_id: this._ssoConfig.clientId,
+            redirect_uri: location.origin + '/' + this._config.getConfigurationSubtree(['services', 'auth', 'toLoginRedirect']),
+            response_type: 'code',
+            scope: this._ssoConfig.scopes.join(' '),
+        };
+        return myQuery + Object.keys(options).map(
+            key => {
+                return encodeURIComponent(key) + '=' + encodeURIComponent(options[key]);
+            },
+        ).join('&');
+    }
+
+    protected getToken(body: any): Observable<any> {
+        const url = this._ssoConfig.refreshUrl;
+        if (!url) {
+            return throwError(() => new Error('Refresh URL is not defined in the config [nae.providers.auth.sso.refreshUrl]'));
+        }
+        return this._http.post(url, body,
+            {headers: {'Content-Type': 'application/json'}}).pipe(
+            catchError(error => {
+                this.loading.off();
+                this._snackbar.openErrorSnackBar(this._translate.instant('forms.login.wrongCredentials'));
+                return throwError(() => error);
+            }),
+        );
+    }
+
+    protected redirectToHome() {
+        this._router.navigate(['/' + this._config.getConfigurationSubtree(['services', 'auth', 'onLoginRedirect'])])
+            .then((value) => { this._log.debug('Routed to ' + value); });
+    }
+}
diff --git a/projects/netgrif-components-core/src/lib/forms/public-api.ts b/projects/netgrif-components-core/src/lib/forms/public-api.ts
@@ -1,5 +1,6 @@
 export * from './email-submission/abstract-email-submission-form.component';
 export * from './login/abstract-login-form.component';
+export * from './login/login-sso/abstract-login-sso.component';
 export * from './registration/abstract-registration-form.component';
 export * from './forgotten-password/abstract-forgotten-password.component';
 export * from './models/abstract-registration.component';
diff --git a/projects/netgrif-components/src/lib/forms/login/login-form.component.html b/projects/netgrif-components/src/lib/forms/login/login-form.component.html
@@ -42,6 +42,10 @@
         </div>
     </form>
 
+    <div fxLayout="row" [fxLayoutAlign]="getButtonsFxLayoutAlign()" fxLayoutAlign.xs="center" class="margin-top-4">
+        <nc-login-sso *ngIf="showSsoButton"></nc-login-sso>
+    </div>
+
     <div *ngIf="showSignUpButton && showForgottenPasswordButton" fxLayout="row" class="width-100" fxLayoutAlign="end">
         <button mat-button *ngIf="showForgottenPasswordButton" (click)="resetEmit()" color="primary">{{ 'forms.login.reset' | translate}}</button>
     </div>
diff --git a/projects/netgrif-components/src/lib/forms/login/login-form.component.ts b/projects/netgrif-components/src/lib/forms/login/login-form.component.ts
@@ -1,14 +1,14 @@
 import {Component} from '@angular/core';
 import {FormBuilder} from '@angular/forms';
-import {AbstractLoginFormComponent, UserService} from '@netgrif/components-core';
+import {AbstractLoginFormComponent, ConfigurationService, UserService} from '@netgrif/components-core';
 
 @Component({
     selector: 'nc-login-form',
     templateUrl: './login-form.component.html',
     styleUrls: ['./login-form.component.scss']
 })
 export class LoginFormComponent extends AbstractLoginFormComponent {
-    constructor(formBuilder: FormBuilder, protected _userService: UserService) {
-        super(formBuilder, _userService);
+    constructor(formBuilder: FormBuilder, protected _userService: UserService, protected _config: ConfigurationService) {
+        super(formBuilder, _userService, _config);
     }
 }
diff --git a/projects/netgrif-components/src/lib/forms/login/login-form.module.ts b/projects/netgrif-components/src/lib/forms/login/login-form.module.ts
@@ -4,11 +4,12 @@ import {FlexLayoutModule} from '@ngbracket/ngx-layout';
 import {ReactiveFormsModule} from '@angular/forms';
 import {LoginFormComponent} from './login-form.component';
 import {MaterialModule, TranslateLibModule} from '@netgrif/components-core';
+import {LoginSsoComponent} from "./login-sso/login-sso.component";
 
 
 @NgModule({
-    declarations: [LoginFormComponent],
-    exports: [LoginFormComponent],
+    declarations: [LoginFormComponent, LoginSsoComponent],
+    exports: [LoginFormComponent, LoginSsoComponent],
     imports: [
         CommonModule,
         MaterialModule,
diff --git a/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.html b/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.html
@@ -0,0 +1,9 @@
+<button color="primary" (click)="redirectToSso()" [disabled]="(loading | async)" mat-raised-button fxLayout="row"
+        fxLayoutAlign="center center">
+    <mat-spinner *ngIf="loading | async"
+                 mode="indeterminate"
+                 diameter="36"
+                 color="accent"
+                 fxFlex></mat-spinner>
+    <span *ngIf="(loading | async) === false" fxFlex>{{ 'forms.login.ssoButton' | translate }}</span>
+</button>
diff --git a/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.scss b/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.scss
diff --git a/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.spec.ts b/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.spec.ts
@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginSsoComponent } from './login-sso.component';
+
+// todo 2118
+
+xdescribe('LoginSsoComponent', () => {
+  let component: LoginSsoComponent;
+  let fixture: ComponentFixture<LoginSsoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginSsoComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginSsoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.ts b/projects/netgrif-components/src/lib/forms/login/login-sso/login-sso.component.ts
@@ -0,0 +1,24 @@
+import {HttpClient} from '@angular/common/http';
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {AbstractLoginSsoComponent, ConfigurationService, LoggerService, SnackBarService} from '@netgrif/components-core';
+import {TranslateService} from "@ngx-translate/core";
+
+@Component({
+    selector: 'nc-login-sso',
+    templateUrl: './login-sso.component.html',
+    styleUrls: ['./login-sso.component.scss'],
+})
+export class LoginSsoComponent extends AbstractLoginSsoComponent {
+    constructor(
+        protected _config: ConfigurationService,
+        protected _http: HttpClient,
+        protected _snackbar: SnackBarService,
+        protected _log: LoggerService,
+        protected _router: Router,
+        protected _activeRouter: ActivatedRoute,
+        protected _translate: TranslateService
+    ) {
+        super(_config, _http, _snackbar, _log, _router, _activeRouter, _translate);
+    }
+}
diff --git a/projects/netgrif-components/src/lib/forms/public-api.ts b/projects/netgrif-components/src/lib/forms/public-api.ts
@@ -1,6 +1,7 @@
 /* COMPONENTS */
 export * from './email-submission/email-submission-form.component';
 export * from './login/login-form.component';
+export * from './login/login-sso/login-sso.component';
 export * from './registration/registration-form.component';
 export * from './forgotten-password/forgotten-password-form.component';
 export * from './change-password/change-password-form.component';

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ describe('AbstractLoginFormComponent', () => {`
`70`	`70`	`template: ''`
`71`	`71`	`})`
`72`	`72`	`class TestLoginFormComponent extends AbstractLoginFormComponent {`
`73`		`- constructor(formBuilder: FormBuilder, protected _userService: UserService) {`
`74`		`- super(formBuilder, _userService);`
	`73`	`+ constructor(formBuilder: FormBuilder, protected _userService: UserService, protected _configService: ConfigurationService) {`
	`74`	`+ super(formBuilder, _userService, _configService);`
`75`	`75`	`}`
`76`	`76`	`}`