0

0

Redoc standalone文档生成:解决认证API的Schema加载问题

霞舞

霞舞

发布时间:2025-11-17 15:25:02

|

945人浏览过

|

来源于php中文网

原创

Redoc standalone文档生成:解决认证API的Schema加载问题

本文旨在解决redoc standalone在加载需要认证的api schema时遇到的挑战。当api服务器要求`authorization`头才能访问`schema.yaml`时,redoc默认不包含此头,导致加载失败。教程将详细介绍如何通过使用redocly cli进行离线文档构建,预先获取并处理schema文件,从而生成完整的html文档,避免客户端直接请求认证api。

问题背景:Redoc standalone与认证API Schema

在使用Redoc standalone展示API文档时,一个常见场景是API的OpenAPI/Swagger Schema文件(通常是schema.yaml或schema.json)托管在需要认证的API服务器上。默认情况下,当您在HTML中通过标签指定远程URL时,Redoc会尝试直接从该URL获取Schema文件。然而,Redoc的客户端JS在发起这个请求时,并不会自动附带任何认证信息(如Authorization头)。这导致服务器因缺少认证而拒绝请求,最终Redoc无法加载并渲染API文档。

例如,以下HTML代码会尝试从远程URL加载Schema:


   
      Example API
      
      
      
      
   
   
      
      
   

当https://api.example.com/schema.yaml需要认证时,上述设置将无法正常工作。

解决方案:利用Redocly CLI进行离线文档构建

解决此问题的最有效且推荐的方法是,不依赖Redoc在客户端运行时动态获取Schema,而是通过Redocly CLI工具在构建时预先处理Schema文件,并生成静态HTML文档。这种方法允许您在一个可以访问认证Schema的环境中(例如CI/CD管道、开发机器)完成Schema的获取和文档的生成,然后将最终的静态HTML文件发布。

核心思想

  1. 预先获取Schema: 在一个拥有认证凭据的环境中,通过命令行工具(如curl)或脚本,从认证API服务器下载schema.yaml到本地。
  2. 本地构建文档: 使用Redocly CLI的build-docs命令,以本地下载的Schema文件为输入,生成完整的HTML文档。
  3. 发布静态文档: 将生成的HTML文件部署到任何静态文件服务器上。

实施步骤

1. 安装Redocly CLI

首先,您需要安装Redocly CLI工具。如果您已经安装了Node.js和npm,可以通过以下命令安装:

npm install -g @redocly/cli

2. 获取认证Schema文件

在您的构建环境(或本地开发环境)中,使用适当的工具和认证凭据来下载schema.yaml。例如,如果您的API需要一个Bearer Token:

# 替换 YOUR_AUTH_TOKEN 和 https://api.example.com/schema.yaml
curl -H "Authorization: Bearer YOUR_AUTH_TOKEN" -o schema.yaml https://api.example.com/schema.yaml

确保schema.yaml文件已成功下载到您希望构建文档的目录中。

3. 使用Redocly CLI构建文档

薏米AI
薏米AI

YMI.AI-快捷、高效的人工智能创作平台

下载

一旦Schema文件在本地可用,您就可以使用redocly build-docs命令来生成HTML文档。

# 假设您的schema文件名为 schema.yaml,并且在当前目录下
redocly build-docs schema.yaml --output index.html
  • schema.yaml:这是您刚刚下载到本地的Schema文件。
  • --output index.html:指定生成的HTML文档的文件名。您可以根据需要更改。

执行此命令后,redocly会读取本地的schema.yaml文件,并将其编译成一个包含Redoc运行时和所有API文档内容的独立HTML文件(index.html)。这个生成的HTML文件是完全独立的,不再需要从远程URL获取Schema。

4. 发布生成的HTML文档

现在,您可以将生成的index.html文件(以及Redocly可能生成的其他静态资源,如CSS/JS文件,如果它们是外部引用的话,但build-docs通常会打包成一个文件)部署到任何静态文件服务器上。用户访问这个HTML文件时,将直接看到完整的API文档,而无需进行任何客户端认证请求。

示例工作流

一个完整的自动化脚本可能看起来像这样:

#!/bin/bash

# 1. 设置认证Token和Schema URL
AUTH_TOKEN="your_secure_authorization_token" # 在实际应用中,这应该从环境变量或安全配置中获取
SCHEMA_URL="https://api.example.com/schema.yaml"
OUTPUT_FILE="api-docs.html"
LOCAL_SCHEMA_FILE="local-schema.yaml"

echo "Downloading schema from ${SCHEMA_URL}..."

# 2. 下载Schema文件,附带Authorization头
curl -s -H "Authorization: Bearer ${AUTH_TOKEN}" -o "${LOCAL_SCHEMA_FILE}" "${SCHEMA_URL}"

# 检查下载是否成功
if [ $? -ne 0 ]; then
    echo "Error: Failed to download schema file."
    exit 1
fi

if [ ! -f "${LOCAL_SCHEMA_FILE}" ]; then
    echo "Error: Schema file not found after download."
    exit 1
fi

echo "Schema downloaded to ${LOCAL_SCHEMA_FILE}"

# 3. 使用Redocly CLI构建文档
echo "Building documentation with Redocly CLI..."
redocly build-docs "${LOCAL_SCHEMA_FILE}" --output "${OUTPUT_FILE}"

# 检查构建是否成功
if [ $? -ne 0 ]; then
    echo "Error: Failed to build documentation."
    exit 1
fi

echo "Documentation built successfully to ${OUTPUT_FILE}"

# 4. 清理本地Schema文件 (可选)
rm "${LOCAL_SCHEMA_FILE}"
echo "Cleaned up local schema file."

echo "Deployment ready: ${OUTPUT_FILE}"

优势与注意事项

优势:

  • 安全性提升: 避免在客户端浏览器中暴露认证Token,因为Schema的获取是在服务器端或构建环境中完成的。
  • 性能优化: 生成的文档是静态HTML,加载速度快,无需额外的网络请求来获取Schema。
  • 部署简便: 最终产物是静态文件,可以部署到任何静态文件托管服务,如GitHub Pages, Netlify, CDN等。
  • 构建自动化: 易于集成到CI/CD流程中,实现API更新后自动生成和部署文档。

注意事项:

  • Schema更新: 如果API Schema频繁变动,您需要确保构建流程能够及时触发,以反映最新的Schema。
  • 构建环境: 确保构建环境拥有足够的权限和网络访问能力来获取认证Schema。
  • Token管理: 在自动化脚本中,认证Token应妥善管理,避免硬编码,最好通过环境变量或密钥管理服务提供。

总结

当Redoc standalone需要加载受认证保护的API Schema时,直接通过spec-url属性引用远程URL是不可行的。最佳实践是利用Redocly CLI的build-docs命令,在构建时预先获取Schema文件并生成静态HTML文档。这种离线构建的方法不仅解决了认证问题,还带来了安全性、性能和部署便利性等多重优势,是发布专业API文档的推荐途径。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

412

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

533

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

524

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

263

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

754

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

539

2023.08.01

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

43

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 19.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号