Use actual demo API

Author: jeroenheijmans

src/app/core/auth-module-config.ts

@@ -2,7 +2,7 @@ import { OAuthModuleConfig } from 'angular-oauth2-oidc';
 
 export const authModuleConfig: OAuthModuleConfig = {
   resourceServer: {
-    allowedUrls: ['http://localhost:8080'],
+    allowedUrls: ['https://demo.identityserver.io/api'],
     sendAccessToken: true,
   }
 };

src/app/feature-basics/admin1.component.ts

@@ -8,15 +8,15 @@ import { ApiService } from '../shared/api.service';
   template: `<p class="alert alert-danger">
     This is the <strong>⚙ ADMIN</strong> component.
     It will not redirect you to the login server.
-    (API Result: '{{item | async}}')
+    - {{ apiResponse | async }}
   </p>`,
 })
 export class Admin1Component implements OnInit {
-  item: Observable<string>;
+  apiResponse: Observable<string>;
 
   constructor(private apiService: ApiService) { }
 
   ngOnInit() {
-    this.item = this.apiService.getRandomItem();
+    this.apiResponse = this.apiService.getProtectedApiResponse();
   }
 }

src/app/feature-basics/home.component.ts

@@ -1,8 +1,20 @@
 import { Component } from '@angular/core';
+import { ApiService } from '../shared/api.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-home',
-  template: `<p class="alert alert-primary">This is the <strong>🏠 HOME</strong> component.</p>`,
+  template: `<p class="alert alert-primary">
+    This is the <strong>🏠 HOME</strong> component.
+    - {{ apiResponse | async }}
+  </p>`,
 })
 export class HomeComponent {
+  apiResponse: Observable<string>;
+
+  constructor(private apiService: ApiService) { }
+
+  ngOnInit() {
+    this.apiResponse = this.apiService.getProtectedApiResponse();
+  }
 }

src/app/feature-extras/admin2.component.ts

@@ -7,15 +7,15 @@ import { ApiService } from '../shared/api.service';
   template: `<p class="alert alert-danger">
     This is the <strong>🔧 ADMIN 2</strong> component.
     It will redirect you to login if needed.
-    (API Result: '{{item | async}}')
+    - {{ apiResponse | async }}
   </p>`,
 })
 export class Admin2Component implements OnInit {
-  item: Observable<string>;
+  apiResponse: Observable<string>;
 
   constructor(private apiService: ApiService) { }
 
   ngOnInit() {
-    this.item = this.apiService.getRandomItem();
+    this.apiResponse = this.apiService.getProtectedApiResponse();
   }
 }

src/app/shared/api.service.ts

@@ -1,18 +1,18 @@
 import { Injectable } from '@angular/core';
-import { OAuthService } from 'angular-oauth2-oidc';
 import { Observable, of } from 'rxjs';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
 
 @Injectable()
 export class ApiService {
-  constructor(private authService: OAuthService) { }
+  constructor(private http: HttpClient) { }
 
-  getRandomItem(): Observable<string> {
-    if (this.authService.hasValidAccessToken()) {
-      console.log('OK! We have a valid access token.');
-    } else {
-      console.error('ERROR! No valid access token for calling the API.');
-    }
-
-    return of<string>('Fake API result');
+  getProtectedApiResponse(): Observable<string> {
+    return this.http.get<any>('https://demo.identityserver.io/api/test')
+      .pipe(
+        map(response => response.find(i => i.type === 'iss').value),
+        map(iss => '☁ API Success from ' + iss),
+        catchError((e: HttpErrorResponse) => of(`🌩 API Error: ${e.status} ${e.statusText}`)),
+      );
   }
 }