Umbraco und Bellissima: Prahlerei, Token, Einstiegspunkte

Die folgenden Beispiele wurden in Umbraco 14 und 15 getestet und ich habe sie hauptsächlich hier geschrieben, um schnell nachschlagen zu können, wie man einen TypeScript-Client generiert und den access_token von Umbraco erhält.

Basisauthentifizierung

Im Wesentlichen möchten wir den Authorization-Header in einen fetch()-Aufruf einfügen:

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

Dies kann in Umbraco mithilfe der Kontext-API verpackt werden:

/**
 * 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();
}

Tun Sie das jedoch nicht. Verwenden Sie stattdessen einen TypeScript-Client-Generator:

TypeScript-Client

Ich verwende immer die neueste Version von @hey-api/openapi-ts, um den TypeScript-Client zu generieren. Diese Bibliothek unterstützt mehrere Clients und ich versuche, auf ihr eigenes @hey-api/client-fetch zu aktualisieren, aber sie verfügt auch über einen nativen Fetch. Hier erfahren Sie, wie Sie die Authentifizierung von Umbraco für beide Clients nutzen können.

Installieren Sie zunächst @hey-api/openapi-ts:

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

Dann erstellen Sie ein Skript in 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"
  }
}

Als nächstes erstellen Sie /App_Plugins/MyExtensions/umbraco-package.json und registrieren eine Erweiterung vom Typ 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"
    }
  ]
}

Stellen Sie sicher, dass Sie einen TypeScript-Transpiler (tsc, vite usw.) einrichten und eine Datei „entry-point.ts“ erstellen.

@hey-api/client-fetch

Fügen Sie Folgendes zu „entry-point.ts“ hinzu:

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;
    });
  });
};

Vermächtnis/Abruf

Hinweis: Dieser Client ist veraltet. Um es zu verwenden, ersetzen Sie „@hey-api/client-fetch“ durch „legacy/fetch“ im generate-Skript.

Fügen Sie Folgendes zu „entry-point.ts“ hinzu:

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;
  });
};

Der Einstiegspunkt stellt sicher, dass die Autorisierung eingerichtet wird, bevor Anfragen im Backoffice gestellt werden, und Sie können jetzt das generierte SDK importieren und es von jedem Element aus mit oder ohne die Funktionen tryExecute und tryExecuteAndNotify aufrufen.

Das obige ist der detaillierte Inhalt vonUmbraco und Bellissima: Prahlerei, Token, Einstiegspunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!