How the DataParser work

DataParser เข้ามาช่วยทำให้การเรียก Rest API จากแอพฯ Client ไปยังเว็บเซอร์วิสได้ เมื่อติดข้อจำกัดบางอย่างที่ทำให้ Client ไม่สามารถเรียกไปยังเว็บเซอร์วิสโดยตรง เช่น Firewall จำกัดการเข้าถึงของเว็บเซิร์ฟเวอร์ด้วย IP Address, เว็บบราวเซอร์บล็อกการ Request ข้ามโปรโตคอล http ไปยัง https ทำให้เกิดการ Cross-Origin Resource Sharing (CORS) เป็นต้น

Note

กำหนดให้ Url ของแต่ละ Tier เป็นดังนี้

Frontend: http://localhost:4200

Backend: https://localhost:5003

Web service: https://localhost:5001

หากต้องการคอนฟิกโปรเจคบนเครื่องตัวเองเพื่อทดสอบการทำงาน สามารถดำเนินการตามขั้นตอนได้ดังต่อไปนี้

สร้างโปรเจคเว็บเซอร์วิส
สร้างโปรเจคเว็บแอพพลิเคชั่น
ที่โปรเจคเว็บเซอร์วิส แก้ไขคอนฟิก Issuer ในไฟล์ appsettings.Development.json เป็นค่า https://localhost:5003

{
  ...,
  "WebServiceSettings": {
    ...,
    "OAuth": {
      "AccessTokenExpires": 300,
      "RefreshTokenExpires": 604800,
      "AuthorizationCodeExpires": 300,
      "Issuer": "https://localhost:5003", // <<< Edit value
      "SecretKey": "kaq5ehRJFtPZrUBOhpif4U6+cuqpAkLCAds8K52FkuXyIcgBCkeBRBchU+b/I5xz",
      "MultiRefreshToken": true
    },
    ...
  },
  "telerikReporting": {
    ...
  }
}

{
  ...,
  "WebServiceSettings": {
    ...,
    "OAuth": {
      "AccessTokenExpires": 300,
      "RefreshTokenExpires": 604800,
      "AuthorizationCodeExpires": 300,
      "Issuer": "https://localhost:5003", // <<< Edit value
      "SecretKey": "kaq5ehRJFtPZrUBOhpif4U6+cuqpAkLCAds8K52FkuXyIcgBCkeBRBchU+b/I5xz",
      "MultiRefreshToken": true
    },
    ...
  },
  "telerikReporting": {
    ...
  }
}

ที่โปรเจคเว็บแอพฯ ในโฟล์เดอร์ ClientApp แก้ไขคอนฟิก webServiceUrl และ callbackUri ในไฟล์ environments\environment.ts ตามตัวอย่างดังนี้

import { AxAuthenticationConfig } from '@atlasx/core/authentication'
import { ApplicationConfig } from '../app/core/config/application.config'

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment: ApplicationConfig & AxAuthenticationConfig = {
  production: false,
  webServiceUrl: 'https://localhost:5003', // <<< Edit value

  // OAuth client information.
  clientId: 'atlasx-web-application',
  clientSecret: '02FZf68/Xff0hrSQgc7Je5CNgdjaSgltNU4gb3AbJ9A=',

  // When use full secure authentication, application are required
  // the callbackUri property.
  fullSecureAuthentication: true,
  callbackUri: 'https://localhost:5003/callback', // <<< Edit value

  // Other configuration below here
  // ...
}

import { AxAuthenticationConfig } from '@atlasx/core/authentication'
import { ApplicationConfig } from '../app/core/config/application.config'

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment: ApplicationConfig & AxAuthenticationConfig = {
  production: false,
  webServiceUrl: 'https://localhost:5003', // <<< Edit value

  // OAuth client information.
  clientId: 'atlasx-web-application',
  clientSecret: '02FZf68/Xff0hrSQgc7Je5CNgdjaSgltNU4gb3AbJ9A=',

  // When use full secure authentication, application are required
  // the callbackUri property.
  fullSecureAuthentication: true,
  callbackUri: 'https://localhost:5003/callback', // <<< Edit value

  // Other configuration below here
  // ...
}

เปิด Terminal ขึ้นมา 3 ตัว
Terminal ตัวแรก ทำหน้าที่เซิร์ฟเว็บเซอร์วิส โดยย้ายโฟล์เดอร์ไปยังโปรเจคเว็บเซอร์วิส จากนั้นรันคำสั่ง

$ dotnet run

$ dotnet run

Terminal ตัวที่สอง ทำหน้าที่เซิร์ฟเว็บแอพฯ ฝั่ง Back-end โดยย้ายโฟล์เดอร์ไปยังโปรเจคเว็บแอพฯ จากนั้นรันคำสั่ง

$ cd ./ServerApp
$ dotnet run

$ cd ./ServerApp
$ dotnet run

Terminal ตัวที่สาม ทำหน้าที่เซิร์ฟเว็บแอพฯ ฝั่ง Front-end โดยย้ายโฟล์เดอร์ไปยังโปรเจคเว็บแอพฯ จากนั้นรันคำสั่ง

$ cd ./ClientApp
$ dotnet run

$ cd ./ClientApp
$ dotnet run

เปิดเว็บบราวเซอร์แล้วเข้าไปที่ https://localhost:5003 จากนั้นลองทดสอบเล่นเว็บแอพฯ
เปิด Dev Tools ของเว็บบราวเซอร์แล้วลองตรวจสอบแท็บ Network การเรียก Rest API ไปยังเว็บเซอร์วิสจะถูกเรียกผ่าน Url ของ Back-end ทั้งหมด