Umbraco 및 Bellissima: Swagger, 토큰, 진입점

다음 예제는 Umbraco 14 및 15에서 테스트되었으며 대부분 TypeScript 클라이언트를 생성하고 Umbraco에서 access_token을 가져오는 방법을 빠르게 검색할 수 있도록 여기에 작성했습니다.

기본인증

본질적으로 Authorization 헤더를 fetch() 호출에 넣으려고 합니다.

fetch('/myapi/controller/endpoint', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer 123' // <-- Token goes here
  }
});

Context API를 사용하여 Umbraco로 래핑할 수 있습니다.

/**
 * Make an authorized request to any Backoffice API.
 * @param host A reference to the host element that can request a context.
 * @param url The URL to request.
 * @param method The HTTP method to use.
 * @param body The body to send with the request (if any).
 * @returns The response from the request as JSON.
 */
async function makeRequest(host: UmbClassInterface, url: string, method = 'GET', body?: any) {
  const authContext = await host.getContext(UMB_AUTH_CONTEXT);
  const token = await authContext.getLatestToken();
  const response = await fetch(url, {
    method,
    body: body ? JSON.stringify(body) : undefined,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
  });
  return response.json();
}

그래도 이러지 마세요. 대신 TypeScript 클라이언트 생성기를 사용하세요.

타입스크립트 클라이언트

저는 항상 최신 버전의 @hey-api/openapi-ts를 사용하여 TypeScript 클라이언트를 생성합니다. 이 라이브러리는 여러 클라이언트를 지원하며 자체 @hey-api/client-fetch로 업그레이드하려고 하는데 기본 가져오기도 있습니다. 두 클라이언트에 대해 Umbraco의 인증을 연결하는 방법은 다음과 같습니다.

먼저 @hey-api/openapi-ts를 설치하세요.

npm i --save @hey-api/openapi-ts @hey-api/client-fetch

그런 다음 package.json에 스크립트를 만듭니다.

{
  "scripts": {
    "generate": "openapi-ts -i http://localhost:7029/umbraco/swagger/bellissima-v1/swagger.json?urls.primaryName=Bellissima%20Management%20Api -o src/api -c @hey-api/client-fetch"
  }
}

다음으로 /App_Plugins/MyExtensions/umbraco-package.json을 생성하고 backofficeEntryPoint 유형의 확장을 등록합니다.

{
  "name": "My Extensions",
  "alias": "My.Extensions",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "backofficeEntryPoint",
      "alias": "My.Entrypoint",
      "name": "My Entrypoint",
      "js": "/App_Plugins/MyExtensions/entry-point.js"
    }
  ]
}

TypeScript 변환기(tsc, vite 등)를 설정하고 Entry-point.ts 파일을 생성하세요.

@hey-api/client-fetch

entry-point.ts에 다음을 추가하세요.

import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
import { client } from './api/index.js';

export const onInit: UmbEntryPointOnInit = (host) => {
  host.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {

    // Get API config
    const config = authContext.getOpenApiConfiguration();

    // Set base config
    client.setConfig({
      baseUrl: config.base,
      credentials: config.credentials
    });

    // Set interceptor to add authorization
    client.interceptors.request.use(async (req) => {
      const token = await config.token();
      if (token) {
        req.headers.set('Authorization', `Bearer ${token}`);
      }
      return req;
    });
  });
};

레거시/가져오기

참고: 이 클라이언트는 더 이상 사용되지 않습니다. 이를 사용하려면 generate 스크립트

에서 @hey-api/client-fetch를 Legacy/fetch로 바꾸세요.

entry-point.ts에 다음을 추가하세요.

import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
import { OpenAPI } from './api/index.js';

export const onInit: UmbEntryPointOnInit = (host) => {
  host.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {

    // Get API config
    const config = authContext.getOpenApiConfiguration();

    // Set base config
    OpenAPI.BASE = config.base;
    OpenAPI.TOKEN = config.token;
    OpenAPI.CREDENTIALS = config.credentials;
    OpenAPI.WITH_CREDENTIALS = config.withCredentials;
    OpenAPI.ENCODE_PATH = config.encodePath;
  });
};

진입점은 백오피스에서 요청이 이루어지기 전에 승인이 설정되도록 보장하며, 이제 생성된 SDK를 가져와서 tryExecute 및 tryExecuteAndNotify 함수가 있거나 없는 모든 요소에서 호출할 수 있습니다.

위 내용은 Umbraco 및 Bellissima: Swagger, 토큰, 진입점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!