Remodelled login with redirect to avoid CORS

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';
@@ -38,9 +37,9 @@ import { HomeComponent } from './component/home/home.component';
   // enables injecting
   providers: [
     RestService,
-    {
+    /*{
       provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
-    },
+    },*/
 
   ],
   bootstrap: [LandingComponent]

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

@@ -1,5 +1,6 @@
 <p>home works!</p>
-<button (click)="logout()">Logout</button>
+<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>

frontend/src/app/component/home/home.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -11,10 +11,14 @@ export class HomeComponent implements OnInit {
 
   id_token = 'x';
   state = 'y';
+  parsedToken;
 
-  constructor(private http: HttpClient, private router: Router) { }
+  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() {
@@ -48,6 +52,11 @@ export class HomeComponent implements OnInit {
     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,4 +1,2 @@
 <h1>Bsp 1 Gruppe 4</h1>
-<br>
+<app-login></app-login>
-<router-outlet></router-outlet>
-

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

@@ -1,4 +1,11 @@
-<p>login works!</p>
 <button (click)="login()">Login</button>
 <br>
-<div *ngIf="loginHTML" [innerHTML]="loginHTML" title="OpenId"></div>
+<button (click)="logout()">Logout</button>
+<br>
+<button (click)="gotoBackend()">Call Backend</button>
+<br>
+<p *ngIf="errorMessage">Error on login: {{errorMessage}}</p>
+<div *ngIf="parsedToken">
+  {{parsedToken.given_name}} {{parsedToken.family_name}}
+  <img alt="Profile picture" [src]="parsedToken.picture" style="height:100px;">
+</div>

frontend/src/app/component/login/login.component.ts

@@ -1,6 +1,6 @@
-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({
   selector: 'app-login',
@@ -8,25 +8,64 @@ import {DomSanitizer} from '@angular/platform-browser';
   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;
 
-  constructor(private http: HttpClient, private _sanitizer: DomSanitizer) { }
+  constructor(private http: HttpClient,
+              private activatedRoute: ActivatedRoute) { }
 
   ngOnInit(): void {
+    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 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 url = this.openid_endpoint + '/logout' +
+      '?id_token_hint=' + this.id_token + '&' +
+      'post_logout_redirect_uri=http://localhost:4200';
+    window.location.replace(url);
+  }
+
+  gotoBackend() {
     const headerDict = {
-      'Accept': '*/*',
+      'Authorization': 'Bearer ' + this.id_token
-      'Access-Control-Allow-Origin': '*'
     };
-    this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/auth?client_id=waecm' +
+    this.http.get('http://localhost:8000/api/login',
-      '&response_type=id_token&prompt=consent&redirect_uri=http://localhost:4200/home&scope=openid%20profile&nonce=abcdef',
       {
-        headers: new HttpHeaders(headerDict),
+        headers: new HttpHeaders(headerDict)
-        responseType: 'text'
       })
-      .subscribe(data => this.loginHTML = this._sanitizer.bypassSecurityTrustHtml(data));
+      .subscribe(data => console.log(data));
   }
 }