Je eigen API aanroepen vanuit een custom Umbraco-backoffice-section

Je bouwt een custom backoffice-section met je eigen API-controller. Elke keer dat de section laadt, stuurt Umbraco je terug naar het loginscherm met "Your session has timed out". Je logt opnieuw in, krijgt een seconde rust, en het gebeurt weer.

Dit is een bekende valkuil voor auteurs van extensions. Dit is waarom het gebeurt, en de oplossing.

Wat er aan de hand was

De controller was in orde. Hij verscheen in Swagger, dus de serverkant werkte. Het probleem zat bij de client:

• Aanroepen met umbHttpClient vanuit firstUpdated() stuurde de gebruiker in een lus naar de inlogpagina.
• Aanroepen met gewone fetch gaf een 401 Unauthorized.
• [AllowAnonymous] op de controller liet het werken. Dat laat duidelijk zien dat het om authenticatie ging, niet om routing. Het is ook geen oplossing die je moet publiceren, want dan kan iedereen het endpoint aanroepen.

Het request verliet de browser dus zonder het access token van de backoffice-gebruiker, en de server behandelde het als anoniem.

De oplossing: een entry point die de client instelt

Geef je package een backoffice entry point. Daarin haal je de authentication context op, lees je de OpenAPI-configuratie die Umbraco al heeft voor de ingelogde gebruiker, en geef je je API-client wat hij nodig heeft.

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

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

    const config = authContext.getOpenApiConfiguration();
    client.setConfig({ baseUrl: config.base, credentials: config.credentials });

    client.interceptors.request.use(async (request) => {
      const token = await config.token();
      request.headers.set('Authorization', `Bearer ${token}`);
      return request;
    });
  });
};

Het belangrijke detail is de interceptor. Die vraagt bij elk request een vers token, zodat je calls blijven werken nadat de backoffice de sessie ververst.

Waar je op moet letten

1. Begin bij het extension-template. Het umbraco-extension .NET-template zet een entry point en een voorbeeld-API-controller voor je klaar.
2. Gebruik manifestbestanden. Zet de section, section view en entry point in echte manifest.ts-bestanden, bundel ze, en verwijs in het packagebestand alleen naar die bundle.
3. Meng geen twee clients. Kies een gegenereerde API-client of umbHttpClient, configureer die ene in de entry point, en gebruik die overal.
4. Laat [AllowAnonymous] niet staan. Het is prima als korte test, daarna haal je het weg.