DEV Community
·
Umbraco与Bellissima：Swagger、令牌与入口点
内容提要
本文介绍了如何在Umbraco 14和15中生成TypeScript客户端并获取access_token。通过fetch()调用添加Authorization头，使用Context API进行授权请求。建议使用@hey-api/openapi-ts生成TypeScript客户端，并配置相关脚本和入口点，以确保在Backoffice中正确设置授权。
关键要点
-
本文介绍了在Umbraco 14和15中生成TypeScript客户端和获取access_token的方法。
-
使用fetch()调用时，需要在请求中添加Authorization头。
-
可以使用Context API来封装授权请求。
-
建议使用@hey-api/openapi-ts库生成TypeScript客户端，并配置相关脚本和入口点。
-
安装@hey-api/openapi-ts和@hey-api/client-fetch库以生成TypeScript客户端。
-
在package.json中创建生成脚本以生成API客户端。
-
创建umbraco-package.json文件以注册Backoffice扩展。
-
确保设置TypeScript转译器并创建entry-point.ts文件。
-
在entry-point.ts中配置API客户端并设置请求拦截器以添加授权信息。
-
legacy/fetch客户端已被弃用，建议使用@hey-api/client-fetch替代。
延伸解读
TypeScript客户端生成的重要性
在Umbraco中生成TypeScript客户端可以显著提高开发效率。使用@hey-api/openapi-ts库，开发者能够快速生成与API交互的代码，减少手动编写的错误和时间成本。确保使用最新版本的库，以获得最佳的功能和支持。
授权请求的最佳实践
在进行API请求时，正确设置Authorization头是确保安全访问的关键。使用Context API封装授权请求，可以简化代码并提高可维护性。开发者应注意Token的有效性，确保在请求前获取最新的Token，以避免授权失败。
注意弃用的客户端
legacy/fetch客户端已被弃用，建议开发者尽快迁移到@hey-api/client-fetch。这不仅能确保使用最新的功能，还能提高代码的稳定性和安全性。关注库的更新和文档，以便及时调整代码。
延伸问答
如何在Umbraco中生成TypeScript客户端？
可以使用@hey-api/openapi-ts库生成TypeScript客户端，首先安装该库，然后在package.json中创建生成脚本。
如何获取Umbraco的access_token？
可以通过Context API封装授权请求，使用fetch()调用时在请求头中添加Authorization头，包含Bearer令牌。
在Umbraco中如何配置请求拦截器？
在entry-point.ts文件中，可以使用client.interceptors.request.use方法来设置请求拦截器，以添加授权信息。
为什么建议使用@hey-api/client-fetch而不是legacy/fetch？
legacy/fetch客户端已被弃用，建议使用@hey-api/client-fetch来替代，以获得更好的支持和功能。
如何在Umbraco中注册Backoffice扩展？
需要创建一个umbraco-package.json文件，并在其中注册扩展类型为backofficeEntryPoint，指定相关的JavaScript文件。
在Umbraco中如何设置TypeScript转译器？
需要确保安装并设置TypeScript转译器，如tsc或vite，并创建entry-point.ts文件以进行配置。
