Add api service to make a backend call

README.md

@@ -10,7 +10,11 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ### Apache
 
-Same as DLCM-Frontend in Php to mock Shibboleth
+Same as DLCM-Frontend Php app that use apache to mock Shibboleth, refer to the Apache part of the `README.md` of DLCM-Frontend app.
+
+## Setting
+
+Update proxy.conf.json to set the corresponding backend api.
 
 ## Install
 

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

proxy.conf.json

+{
+  "/admin": {
+    "target": "http://localhost:16115/dlcm",
+    "secure": false,
+    "logLevel": "info",
+    "pathRewrite": {
+    },
+    "changeOrigin": false
+  },
+  "/ingest": {
+    "target": "http://localhost:16116/dlcm",
+    "secure": false,
+    "logLevel": "info",
+    "pathRewrite": {
+    },
+    "changeOrigin": false
+  },
+  "/preingest": {
+    "target": "http://localhost:16116/dlcm",
+    "secure": false,
+    "logLevel": "info",
+    "pathRewrite": {
+    },
+    "changeOrigin": false
+  },
+  "/access": {
+    "target": "http://localhost:16118/dlcm",
+    "secure": false,
+    "logLevel": "info",
+    "pathRewrite": {
+    },
+    "changeOrigin": false
+  }
+}

src/app/app.component.html

@@ -2,6 +2,8 @@
   Welcome to {{ title }}!
 </h1>
 
+<button (click)="test()">Get Organizations Units</button>
+
 <dlcm-home></dlcm-home>
 
 <router-outlet></router-outlet>

src/app/app.component.ts

 import {Component} from '@angular/core';
 
 import {OAuthService} from 'angular-oauth2-oidc';
+import {AppService} from './app.service';
 
 @Component({
   selector: 'dlcm-root',
@@ -10,7 +11,7 @@ import {OAuthService} from 'angular-oauth2-oidc';
 export class AppComponent {
   title = 'DLCM-Frontend';
 
-  constructor(private oauthService: OAuthService) {
+  constructor(private oauthService: OAuthService, private appService: AppService) {
     this.checkTokenInUrl();
   }
 
@@ -24,5 +25,10 @@ export class AppComponent {
       disableOAuth2StateCheck: true,
     };
     this.oauthService.tryLogin(option);
+
+  }
+
+  test() {
+    this.appService.getOrganizationUnits();
   }
 }

src/app/app.module.ts

@@ -10,6 +10,7 @@ import {AppComponent} from './app.component';
 import {HomeComponent} from './home/home.component';
 import {DlcmInterceptor} from './dlcm.interceptor';
 import {authConfig, authModuleConfig} from './auth.config';
+import {AppService} from './app.service';
 
 @NgModule({
   declarations: [
@@ -26,6 +27,7 @@ import {authConfig, authModuleConfig} from './auth.config';
     OAuthModule.forRoot(authModuleConfig),
   ],
   providers: [
+    AppService,
     {provide: OAuthModuleConfig, useValue: authModuleConfig},
     {provide: ValidationHandler, useClass: JwksValidationHandler},
     // {provide: OAuthStorage, useClass: DlcmStorage},

src/app/app.service.ts

@@ -10,7 +10,7 @@ export class AppService {
   }
 
   getOrganizationUnits() {
-    this.http.get('http://localhost:16118/dlcm/access/oai-sets/organizational-units')
+    this.http.post('/access/oai-sets/organizational-units', ['707c7bc3-bfa1-4846-a62f-5ce95ecf1444'])
       .subscribe((data) => {
         console.log('test : ', data);
       });

src/app/auth.config.ts

@@ -19,7 +19,7 @@ export const authConfig: AuthConfig = {
 export const authModuleConfig: OAuthModuleConfig = {
   // Inject "Authorization: Bearer ..." header for these APIs:
   resourceServer: {
-    allowedUrls: ['http://localhost'],
+    allowedUrls: ['/'],
     sendAccessToken: true,
   },
 };

src/app/dlcm.interceptor.ts

 import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
+import {OAuthService} from 'angular-oauth2-oidc';
 
 @Injectable()
 export class DlcmInterceptor implements HttpInterceptor {
-  constructor() {
+  constructor(private oauthService: OAuthService) {
   }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    request = request.clone();
+
+    request = request.clone({});
+
     return next.handle(request);
   }
 }

src/environments/environment.ts

@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };
 
 /*