Merge branch 'openidtest_martin' into backendvalidation_manuel

# Conflicts:
#	frontend/src/app/component/login/login.component.ts

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)],

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 {HttpClientModule} from '@angular/common/http';
-import {InterceptorService} from './services/interceptor.service';
 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]

frontend/src/app/component/home/home.component.html

@@ -0,0 +1,11 @@
+<p>home works!</p>
+<a href="http://localhost:4200/"><button (click)="logout()" >Logout</button></a>
+<a href="http://localhost:4200/">bye</a>
+<br>
+<button (click)="paramsFromUrl()">Get Params from URL</button>
+<br>
+<button (click)="gotoBackend()">Call Backend</button>
+<br>
+Token: <input type="text" [(ngModel)]="id_token">
+<br>
+State: <input type="text" [(ngModel)]="state">

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);
+    }
+  }
+
+}

frontend/src/app/component/landing/landing.component.html

@@ -1,3 +1,2 @@
 <h1>Bsp 1 Gruppe 4</h1>
-<br>
 <app-login></app-login>

frontend/src/app/component/login/login.component.html

@@ -1,13 +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>
+<button (click)="logout()">Logout</button>
 <br>
 <button (click)="gotoBackend()">Call Backend</button>
 <br>
-Token: <input type="text" [(ngModel)]="id_token">
+<p *ngIf="errorMessage">Error on login: {{errorMessage}}</p>
-<br>
+<div *ngIf="parsedToken">
-State: <input type="text" [(ngModel)]="state">
+  {{parsedToken.given_name}} {{parsedToken.family_name}}
-<br>
+  <img alt="Profile picture" [src]="parsedToken.picture" style="height:100px;">
-<div *ngIf="loginHTML" [innerHTML]="loginHTML" title="OpenId"></div>
+</div>

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;
+  errorMessage;
-  id_token = 'x';
-  state = 'y';
 
-  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 = {
+    const url = this.openid_endpoint + '/auth?' +
-      'Accept': '*/*',
+      'client_id=waecm' +
-      'Access-Control-Allow-Origin': '*'
+      '&response_type=id_token' +
-    };
+      '&prompt=consent' +
-    this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/auth?client_id=waecm' +
+      '&redirect_uri=http://localhost:4200' +
-      '&response_type=id_token&prompt=consent&redirect_uri=http%3A%2F%2Flocalhost%3A4200&scope=openid%20profile&nonce=abcdef',
+      '&scope=openid%20profile' +
-      {
+      '&nonce=abcdef';
-        headers: new HttpHeaders(headerDict),
+    window.location.replace(url);
-        responseType: 'text'
-      })
-      .subscribe(data => this.loginHTML = this._sanitizer.bypassSecurityTrustHtml(data));
   }
 
   logout() {
-      const headerDict = {
+    const url = this.openid_endpoint + '/logout' +
-        'Accept': '*/*',
+      '?id_token_hint=' + this.id_token + '&' +
-        'Access-Control-Allow-Origin': '*'
+      'post_logout_redirect_uri=http://localhost:4200';
-      };
+    window.location.replace(url);
-     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));
   }
 
   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];
-  }
 }