Umbraco と Bellissima: Swagger、トークン、エントリー ポイント

次の例は Umbraco 14 と 15 でテストされており、主に TypeScript クライアントの生成方法と Umbraco から access_token を取得する方法をすぐに調べられるようにするためにここに記述しました。

基本認証

本質的には、fetch() 呼び出しに Authorization ヘッダーを置きたいのです。

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 クライアント ジェネレーターを使用してください:

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/クライアントフェッチ

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 関数の有無にかかわらず、任意の要素から SDK を呼び出すことができます。

以上がUmbraco と Bellissima: Swagger、トークン、エントリー ポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。