REFACTOR: moved obp client to backend

.eslintrc.cjs

@@ -13,7 +13,7 @@ module.exports = {
     '@vue/eslint-config-prettier/skip-formatting'
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: 'latest',
   },
   rules: { 'vue/multi-word-component-names': 0 }
 }

README.md

@@ -7,7 +7,7 @@ This application is used to explore OBP APIs and interact with the data and serv
 
 
 
-## Project Setup
+## Development Project Setup
 
   * Setup your .env (see .env.example)
   * Symlink OBP-TypeScript (see https://github.com/OpenBankProject/OBP-TypeScript)

package.json

@@ -23,7 +23,7 @@
     "express-session": "^1.17.3",
     "highlight.js": "^11.7.0",
     "oauth": "^0.10.0",
-    "obp-typescript": "^1.0.1",
+    "obp-typescript": "^1.0.31",
     "pinia": "^2.0.32",
     "reflect-metadata": "^0.1.13",
     "routing-controllers": "^0.10.3",
@@ -42,7 +42,7 @@
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.3.0",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.34.0",
+    "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",

server/controllers/RequestController.ts

@@ -0,0 +1,35 @@
+import { Controller, Req, Res, Get, Delete, Post, Put } from 'routing-controllers'
+import { Request, Response } from 'express'
+import OBPClientService from '../services/OBPClientService'
+import { Service } from 'typedi'
+
+@Service()
+@Controller()
+export class OBPController {
+  constructor(private obpClientService: OBPClientService) {}
+  @Get('/get')
+  async get(@Req() request: Request, @Res() response: Response): Response {
+    const path = request.query.path
+    return response.json(await this.obpClientService.get(path))
+  }
+
+  @Post('/create')
+  async create(@Req() request: Request, @Res() response: Response): Response {
+    const path = request.query.path
+    const data = request.body
+    return response.json(await this.obpClientService.create(path, data))
+  }
+
+  @Put('/update')
+  async update(@Req() request: Request, @Res() response: Response): Response {
+    const path = request.query.path
+    const data = request.body
+    return response.json(await this.obpClientService.update(path, data))
+  }
+
+  @Delete('/delete')
+  async delete(@Req() request: Request, @Res() response: Response): Response {
+    const path = request.query.path
+    return response.json(await this.obpClientService.discard(path))
+  }
+}

server/middlewares/OauthAccessTokenMiddleware.ts

@@ -2,10 +2,14 @@ import { ExpressMiddlewareInterface } from 'routing-controllers'
 import { Response, Request } from 'express'
 import { Service } from 'typedi'
 import OauthInjectedService from '../services/OauthInjectedService'
+import OBPClientService from '../services/OBPClientService'
 
 @Service()
 export default class OauthAccessTokenMiddleware implements ExpressMiddlewareInterface {
-  constructor(private oauthInjectedService: OauthInjectedService) {}
+  constructor(
+    private obpClientService: OBPClientService,
+    private oauthInjectedService: OauthInjectedService
+  ) {}
 
   use(request: Request, response: Response): any {
     const oauthService = this.oauthInjectedService
@@ -20,8 +24,10 @@ export default class OauthAccessTokenMiddleware implements ExpressMiddlewareInte
           console.log(error)
           response.status(500).send('Error getting OAuth access token: ' + error)
         } else {
+          this.obpClientService.setAccessToken(oauthTokenKey, oauthTokenSecret)
           response.redirect(
-            `${process.env.VITE_OBP_HOST}?key=${oauthTokenKey}&secret=${oauthTokenSecret}`
+            //`${process.env.VITE_OBP_HOST}?key=${oauthTokenKey}&secret=${oauthTokenSecret}`
+            `${process.env.VITE_OBP_HOST}`
           )
         }
       }

server/services/OBPClientService.ts

@@ -0,0 +1,48 @@
+import { Service } from 'typedi'
+import {
+  Version,
+  API,
+  get,
+  create,
+  update,
+  discard,
+  GetAny,
+  CreateAny,
+  UpdateAny,
+  DiscardAny,
+  Any
+} from 'obp-typescript'
+import type { APIClientConfig, OAuthConfig } from 'obp-typescript'
+
+@Service()
+export default class OBPClientService {
+  private oauthConfig: OAuthConfig
+  private clientConfig: APIClientConfig
+  constructor() {
+    this.oauthConfig = {
+      consumerKey: process.env.VITE_OBP_CONSUMER_KEY,
+      consumerSecret: process.env.VITE_OBP_CONSUMER_SECRET,
+      redirectUrl: process.env.VITE_OBP_REDIRECT_URL
+    }
+    this.clientConfig = {
+      baseUri: process.env.VITE_OBP_API_HOST,
+      version: Version.v510,
+      oauthConfig: this.oauthConfig
+    }
+  }
+  setAccessToken(key: string, secret: string): void {
+    if (!this.oauthConfig.accessToken) this.oauthConfig['accessToken'] = { key, secret }
+  }
+  async get(path: string): Promise<any> {
+    return await get<API.Any>(this.clientConfig, Any)(GetAny)(path)
+  }
+  async create(path: string, body: any): Promise<any> {
+    return await create<API.Any>(this.clientConfig, Any)(CreateAny)(path)(body)
+  }
+  async update(path: string, body: any): Promise<any> {
+    return await update<API.Any>(this.clientConfig, Any)(UpdateAny)(path)(body)
+  }
+  async discard(path: string): Promise<any> {
+    return await discard<API.Any>(this.clientConfig, Any)(DiscardAny)(path)
+  }
+}

src/components/Content.vue

@@ -30,6 +30,10 @@ onBeforeRouteUpdate((to) => {
 </template>
 
 <style scoped>
+template {
+  overflow: auto;
+  max-height: 900px;
+}
 main {
   margin: 25px;
   color: #39455f;

src/components/Preview.vue

@@ -2,7 +2,7 @@
 import { ref, inject, onBeforeMount } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 import { getOperationDetails } from '../obp/resource-docs'
-import { get } from '../obp'
+import { get, create, update, discard } from '../obp'
 
 const url = ref('')
 const method = ref('')
@@ -29,6 +29,10 @@ const setType = (method) => {
       type.value = 'success'
       break
     }
+    case 'PUT': {
+      type.value = 'warning'
+      break
+    }
     case 'DELETE': {
       type.value = 'danger'
       break
@@ -40,7 +44,24 @@ const setType = (method) => {
   }
 }
 const submit = async () => {
-  highlightCode(await get(url.value))
+  switch (method.value) {
+    case 'POST': {
+      highlightCode(await create(url.value, exampleRequestBody.value))
+      break
+    }
+    case 'PUT': {
+      highlightCode(await update(url.value, exampleRequestBody.value))
+      break
+    }
+    case 'DELETE': {
+      highlightCode(await discard(url.value))
+      break
+    }
+    default: {
+      highlightCode(await get(url.value))
+      break
+    }
+  }
 }
 const highlightCode = (json) => {
   if (json) {
@@ -106,6 +127,10 @@ onBeforeRouteUpdate((to) => {
 </template>
 
 <style scoped>
+template {
+  overflow: auto;
+  max-height: 900px;
+}
 main {
   margin: 25px;
   color: #fffff;
@@ -142,7 +167,7 @@ input[type='text'] {
 input[type='text']:focus {
   outline: none;
 }
-.content deep(p a::after) {
+.content p a::after {
   content: '';
   position: absolute;
   left: 0;

src/obp/index.ts

@@ -1,27 +1,35 @@
-import { Version, API, get as getOBP } from 'obp-typescript/src/api/client'
-import type { APIClientConfig } from 'obp-typescript/src/api/client'
-import type { OAuthConfig } from 'obp-typescript/src/auth'
-import { GetAny, Any } from 'obp-typescript/src/api/any'
-
-const oauthConfig: OAuthConfig = {
-  consumerKey: import.meta.env.VITE_OBP_CONSUMER_KEY,
-  consumerSecret: import.meta.env.VITE_OBP_CONSUMER_SECRET,
-  redirectUrl: import.meta.env.VITE_OBP_REDIRECT_URL
-}
-
-const clientConfig: APIClientConfig = {
-  baseUri: import.meta.env.VITE_OBP_API_HOST,
-  version: Version.v510,
-  oauthConfig: oauthConfig
-}
-
-export function setAccessToken(key: string, secret: string): void {
-  if (!oauthConfig.accessToken) oauthConfig['accessToken'] = { key, secret }
-}
+import superagent from 'superagent'
 
 export async function get(path: string): Promise<any> {
   try {
-    return await getOBP<API.Any>(clientConfig, Any)(GetAny)(path)
+    return (await superagent.get(`/api/get?path=${path}`)).body
+  } catch (error) {
+    console.log(error)
+    return error
+  }
+}
+
+export async function create(path: string, body: any): Promise<any> {
+  try {
+    return (await superagent.post(`/api/create?path=${path}`).send(JSON.parse(body))).body
+  } catch (error) {
+    console.log(error)
+    return error
+  }
+}
+
+export async function update(path: string, body: any): Promise<any> {
+  try {
+    return (await superagent.put(`/api/update?path=${path}`).send(JSON.parse(body))).body
+  } catch (error) {
+    console.log(error)
+    return error
+  }
+}
+
+export async function discard(path: string): Promise<any> {
+  try {
+    return (await superagent.delete(`/api/delete?path=${path}`)).body
   } catch (error) {
     console.log(error)
     return error

src/obp/resource-docs.ts

@@ -1,6 +1,5 @@
-import { Any, GetAny } from 'obp-typescript/src/api/any'
-import { Version, API, get } from 'obp-typescript/src/api/client'
-import type { APIClientConfig } from 'obp-typescript/src/api/client'
+import { Any, GetAny, Version, API, get } from 'obp-typescript'
+import type { APIClientConfig } from 'obp-typescript'
 
 const clientConfig: APIClientConfig = {
   baseUri: import.meta.env.VITE_OBP_API_HOST,

vite.config.ts

@@ -31,7 +31,6 @@ export default defineConfig({
     }
   },
   define: {
-    'process.env': process.env,
     __VUE_I18N_FULL_INSTALL__: true,
     __VUE_I18N_LEGACY_API__: false,
     __INTLIFY_PROD_DEVTOOLS__: false,