以下示例在 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 等）并创建入口点.ts 文件。
将以下内容添加到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中文网其他相关文章！
