Umbraco et Bellissima : Swagger, jetons, points d'entrée

Les exemples suivants sont testés dans Umbraco 14 et 15 et je les ai écrits ici principalement pour pouvoir rechercher rapidement comment générer un client TypeScript et obtenir le access_token d'Umbraco.

Authentification de base

En substance, nous voulons mettre l’en-tête Authorization dans un appel fetch() :

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

Cela peut être enveloppé dans Umbraco à l'aide de l'API Context :

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

Ne fais pas ça, cependant. Utilisez plutôt un générateur de client TypeScript :

Client dactylographié

J'utilise toujours la dernière version de @hey-api/openapi-ts pour générer le client TypeScript. Cette bibliothèque prend en charge plusieurs clients et j'essaie de passer à leur propre @hey-api/client-fetch, mais elle dispose également d'une récupération native. Voici comment accéder à l'authentification d'Umbraco pour les deux clients.

Tout d'abord, installez @hey-api/openapi-ts :

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

Créez ensuite un script dans 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"
  }
}

Ensuite, créez /App_Plugins/MyExtensions/umbraco-package.json et enregistrez une extension du type 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"
    }
  ]
}

Assurez-vous de configurer un transpileur TypeScript (tsc, vite, etc.) et de créer un fichier Entry-point.ts.

@hey-api/client-fetch

Ajoutez ce qui suit à 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;
    });
  });
};

héritage/récupération

Remarque : Ce client est obsolète. Pour l'utiliser, remplacez @hey-api/client-fetch par Legacy/fetch dans le script generate.

Ajoutez ce qui suit à 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;
  });
};

Le point d'entrée garantit que l'autorisation est configurée avant toute demande dans le Backoffice, et vous pouvez désormais importer le SDK généré et l'appeler depuis n'importe quel élément avec ou sans les fonctions tryExecute et tryExecuteAndNotify.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!