Working login logout draft
This commit is contained in:
Martin
parent
0e25f32608
commit
80e6de5219
@ -16,10 +16,11 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
|
||||
import {MatSliderModule} from "@angular/material/slider";
|
||||
import {MatSliderModule} from '@angular/material/slider';
|
||||
import { LoginComponent } from './component/login/login.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [LandingComponent, TestSubCompComponent],
|
||||
declarations: [LandingComponent, TestSubCompComponent, LoginComponent],
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
BrowserModule,
|
||||
|
||||
@ -1,33 +1,3 @@
|
||||
<h1>Bsp 1 Gruppe 4</h1>
|
||||
|
||||
<mat-slider min="1" max="5" step="0.5" [value]="myValue"></mat-slider>
|
||||
|
||||
|
||||
<h2>Two way data binding, passing data, triggering child event...</h2>
|
||||
<mat-form-field *ngIf="true">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Placeholder"
|
||||
matInput
|
||||
[(ngModel)]="exampleInputText"
|
||||
>
|
||||
</mat-form-field>
|
||||
|
||||
<app-test-sub-comp [message]="exampleInputText" (buttonClickedEvent)="alert()"
|
||||
[anotherInput]=""
|
||||
></app-test-sub-comp>
|
||||
|
||||
|
||||
|
||||
<h2>Hide display with *ngIf</h2>
|
||||
<mat-slide-toggle [(ngModel)]="showPar">Show paragraph</mat-slide-toggle>
|
||||
<p *ngIf="showPar">Toggle me</p>
|
||||
<app-test-sub-comp *ngIf="showPar"
|
||||
[message]="exampleInputText" (buttonClickedEvent)="alert()"
|
||||
[anotherInput]=""
|
||||
></app-test-sub-comp>
|
||||
|
||||
|
||||
|
||||
<h2>Display a test list with *ngFor</h2>
|
||||
<span *ngFor="let dict of testList">{{dict.value}}; </span>
|
||||
<br>
|
||||
<app-login></app-login>
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {RestService} from '../../services/rest.service';
|
||||
import {WebsocketService} from '../../services/websocket.service';
|
||||
import {NGXLogger} from 'ngx-logger';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
@ -11,78 +7,10 @@ import {Subscription} from 'rxjs';
|
||||
})
|
||||
export class LandingComponent implements OnInit {
|
||||
|
||||
private wsSubscription: Subscription;
|
||||
private wsMessageCounter: number;
|
||||
exampleInputText: string;
|
||||
showPar = false;
|
||||
testList = [{'value': 1}, {'value': 2}, {'value': 3}];
|
||||
myValue: any = 15;
|
||||
|
||||
constructor(
|
||||
private logger: NGXLogger,
|
||||
private restService: RestService,
|
||||
private wsService: WebsocketService
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// perform test rest call as observable
|
||||
this.observableCall();
|
||||
|
||||
// perform test rest call as promise (shorter - will only be executed exactly once)
|
||||
this.promiseCall();
|
||||
|
||||
// perform test ws send / receive
|
||||
setTimeout(() => {
|
||||
this.wsCall();
|
||||
},
|
||||
1000);
|
||||
}
|
||||
|
||||
private observableCall(): void {
|
||||
|
||||
const subscription = this.restService.testCall(1).subscribe(
|
||||
// subscribe with lambda function
|
||||
response => {
|
||||
this.logger.debug('Execute obs test call', response);
|
||||
subscription.unsubscribe();
|
||||
},
|
||||
error => {
|
||||
this.logger.error('Error while executing obs test call', error);
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private promiseCall(): void {
|
||||
this.restService.testCall(2).toPromise()
|
||||
// lambda for success
|
||||
.then(response => {
|
||||
this.logger.debug('Execute obs test call', response);
|
||||
})
|
||||
// lambda for fail
|
||||
.catch(error => {
|
||||
this.logger.error('Error while executing obs test call', error);
|
||||
});
|
||||
}
|
||||
|
||||
private wsCall(): void {
|
||||
this.wsMessageCounter = 0;
|
||||
this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
|
||||
result => {
|
||||
this.logger.debug('ws call result', result);
|
||||
if (this.wsMessageCounter >= 2) {
|
||||
this.wsSubscription.unsubscribe();
|
||||
}
|
||||
},
|
||||
error => {
|
||||
this.logger.error('ws call error', error);
|
||||
this.wsSubscription.unsubscribe();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
alert() {
|
||||
alert(this.exampleInputText);
|
||||
}
|
||||
}
|
||||
|
||||
11
frontend/src/app/component/login/login.component.html
Normal file
11
frontend/src/app/component/login/login.component.html
Normal file
@ -0,0 +1,11 @@
|
||||
<p>login works!</p>
|
||||
<button (click)="login()">Login</button>
|
||||
<button (click)="logout()">Logout</button>
|
||||
<br>
|
||||
<button (click)="paramsFromUrl()">Get Params from URL</button>
|
||||
<br>
|
||||
Token: <input type="text" [(ngModel)]="id_token">
|
||||
<br>
|
||||
State: <input type="text" [(ngModel)]="state">
|
||||
<br>
|
||||
<div *ngIf="loginHTML" [innerHTML]="loginHTML" title="OpenId"></div>
|
||||
60
frontend/src/app/component/login/login.component.ts
Normal file
60
frontend/src/app/component/login/login.component.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {HttpClient, HttpHeaders} from '@angular/common/http';
|
||||
import {DomSanitizer} from '@angular/platform-browser';
|
||||
import {ActivatedRoute} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.css']
|
||||
})
|
||||
export class LoginComponent implements OnInit {
|
||||
|
||||
loginHTML;
|
||||
id_token = 'x';
|
||||
state = 'y';
|
||||
|
||||
constructor(private http: HttpClient, private _sanitizer: DomSanitizer,
|
||||
private activatedRoute: ActivatedRoute) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.activatedRoute.queryParams.subscribe(params => console.log(params));
|
||||
}
|
||||
|
||||
login() {
|
||||
const headerDict = {
|
||||
'Accept': '*/*',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
};
|
||||
this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/auth?client_id=waecm' +
|
||||
'&response_type=id_token&prompt=consent&redirect_uri=http%3A%2F%2Flocalhost%3A4200&scope=openid%20profile&nonce=abcdef',
|
||||
{
|
||||
headers: new HttpHeaders(headerDict),
|
||||
responseType: 'text'
|
||||
})
|
||||
.subscribe(data => this.loginHTML = this._sanitizer.bypassSecurityTrustHtml(data));
|
||||
}
|
||||
|
||||
logout() {
|
||||
const headerDict = {
|
||||
'Accept': '*/*',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
};
|
||||
this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/logout' +
|
||||
'?id_token_hint=' + this.id_token + '&\n' +
|
||||
'post_logout_redirect_uri=https://localhost:4200/&\n' +
|
||||
'state=' + this.state,
|
||||
{
|
||||
headers: new HttpHeaders(headerDict),
|
||||
responseType: 'text'
|
||||
})
|
||||
.subscribe(data => this.loginHTML = this._sanitizer.bypassSecurityTrustHtml(data));
|
||||
}
|
||||
|
||||
paramsFromUrl() {
|
||||
const url = window.location.href;
|
||||
const params: string = url.split('#')[1];
|
||||
this.state = params.split('&')[0].split('session_state=')[1];
|
||||
this.id_token = params.split('&')[1].split('id_token=')[1];
|
||||
}
|
||||
}
|
||||
@ -9,7 +9,7 @@
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"target": "es5",
|
||||
"target": "es2015",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user