diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index d425c6f..9342e77 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -1,7 +1,22 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import {LoginComponent} from './component/login/login.component'; +import {HomeComponent} from './component/home/home.component'; -const routes: Routes = []; +const routes: Routes = [ + { + path: '', + component: LoginComponent, + }, + { + path: 'login', + component: LoginComponent, + }, + { + path: 'home', + component: HomeComponent, + }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index e22a7c3..a181e3d 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -4,8 +4,7 @@ import {NgModule} from '@angular/core'; import {AppRoutingModule} from './app-routing.module'; import {LandingComponent} from './component/landing/landing.component'; import {RestService} from './services/rest.service'; -import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; -import {InterceptorService} from './services/interceptor.service'; +import {HttpClientModule} from '@angular/common/http'; import {LoggerModule, NgxLoggerLevel} from 'ngx-logger'; import {environment} from '../environments/environment'; import {TestSubCompComponent} from './component/testsubcomp/test-sub-comp.component'; @@ -17,9 +16,10 @@ import {MatInputModule} from '@angular/material/input'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSliderModule} from '@angular/material/slider'; import { LoginComponent } from './component/login/login.component'; +import { HomeComponent } from './component/home/home.component'; @NgModule({ - declarations: [LandingComponent, TestSubCompComponent, LoginComponent], + declarations: [LandingComponent, TestSubCompComponent, LoginComponent, HomeComponent], imports: [ ReactiveFormsModule, BrowserModule, @@ -37,9 +37,9 @@ import { LoginComponent } from './component/login/login.component'; // enables injecting providers: [ RestService, - { + /*{ provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true - }, + },*/ ], bootstrap: [LandingComponent] diff --git a/frontend/src/app/component/home/home.component.css b/frontend/src/app/component/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/component/home/home.component.html b/frontend/src/app/component/home/home.component.html new file mode 100644 index 0000000..51c3e55 --- /dev/null +++ b/frontend/src/app/component/home/home.component.html @@ -0,0 +1,11 @@ +

home works!

+ +bye +
+ +
+ +
+Token: +
+State: diff --git a/frontend/src/app/component/home/home.component.ts b/frontend/src/app/component/home/home.component.ts new file mode 100644 index 0000000..69ae760 --- /dev/null +++ b/frontend/src/app/component/home/home.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit } from '@angular/core'; +import {HttpClient, HttpHeaders} from '@angular/common/http'; +import {ActivatedRoute, Router} from '@angular/router'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + id_token = 'x'; + state = 'y'; + parsedToken; + + constructor(private http: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) { } + + ngOnInit(): void { + this.paramsFromUrl(); + console.log(this.parsedToken); + this.activatedRoute.fragment.subscribe(data => console.log(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=http://localhost:4200&\n' + + 'state=' + this.state, + { + headers: new HttpHeaders(headerDict), + responseType: 'text' + }).subscribe(() => this.router.navigate(['login'])); + } + + gotoBackend() { + const headerDict = { + 'Authorization': 'Bearer ' + this.id_token + }; + this.http.get('http://localhost:8000/api/login', + { + headers: new HttpHeaders(headerDict) + }) + .subscribe(data => console.log(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]; + try { + this.parsedToken = JSON.parse(atob(this.id_token.split('.')[1])); + } catch (e) { + console.log(e); + } + } + +} diff --git a/frontend/src/app/component/landing/landing.component.html b/frontend/src/app/component/landing/landing.component.html index 204eb96..7b2456e 100644 --- a/frontend/src/app/component/landing/landing.component.html +++ b/frontend/src/app/component/landing/landing.component.html @@ -1,3 +1,2 @@

Bsp 1 Gruppe 4

-
diff --git a/frontend/src/app/component/login/login.component.html b/frontend/src/app/component/login/login.component.html index a6afd38..87e6948 100644 --- a/frontend/src/app/component/login/login.component.html +++ b/frontend/src/app/component/login/login.component.html @@ -1,13 +1,11 @@ -

login works!

-
- +

-Token: -
-State: -
-
+

Error on login: {{errorMessage}}

+
+ {{parsedToken.given_name}} {{parsedToken.family_name}} + Profile picture +
diff --git a/frontend/src/app/component/login/login.component.ts b/frontend/src/app/component/login/login.component.ts index 81473dd..fad8316 100644 --- a/frontend/src/app/component/login/login.component.ts +++ b/frontend/src/app/component/login/login.component.ts @@ -1,6 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +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({ @@ -9,46 +8,54 @@ import {ActivatedRoute} from '@angular/router'; styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { + openid_endpoint = 'https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect'; + id_token; + state; + parsedToken; - loginHTML; - id_token = 'x'; - state = 'y'; + errorMessage; - constructor(private http: HttpClient, private _sanitizer: DomSanitizer, + constructor(private http: HttpClient, private activatedRoute: ActivatedRoute) { } ngOnInit(): void { - this.activatedRoute.queryParams.subscribe(params => console.log(params)); + this.activatedRoute.fragment.subscribe(data => { + if (data) { + data.split('&').forEach( + element => { + const split = element.split('='); + if (split[0] === 'error') { + this.errorMessage = split[1]; + return; + } + if (split[0] === 'id_token') { + this.id_token = split[1]; + this.parsedToken = JSON.parse(atob(this.id_token.split('.')[1])); + } else if (split[0] === 'state') { + this.state = split[1]; + } + } + ); + } + }); } 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)); + const url = this.openid_endpoint + '/auth?' + + 'client_id=waecm' + + '&response_type=id_token' + + '&prompt=consent' + + '&redirect_uri=http://localhost:4200' + + '&scope=openid%20profile' + + '&nonce=abcdef'; + window.location.replace(url); } logout() { - const headerDict = { - 'Accept': '*/*', - 'Access-Control-Allow-Origin': '*' - }; - return 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)); + const url = this.openid_endpoint + '/logout' + + '?id_token_hint=' + this.id_token + '&' + + 'post_logout_redirect_uri=http://localhost:4200'; + window.location.replace(url); } gotoBackend() { @@ -61,11 +68,4 @@ export class LoginComponent implements OnInit { }) .subscribe(data => console.log(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]; - } }