如何在Swagger OAuth2.0配置中预设Client ID与Redirect URI？

核心配置方案 #

要实现预设client_id、隐藏client_secret并配置固定Redirect URI，需结合OpenAPI规范调整与Swagger UI初始化配置完成：

1. OpenAPI规范基础调整 #

原安全方案保持授权流程端点与作用域定义不变，确保流程合法性：

components:
  securitySchemes:
    oauth2_auth_code:
      type: oauth2
      description: 通过OAuth2授权
      flows:
        authorizationCode:
          authorizationUrl: https://login.microsoftonline.com/1d063515-6cad-4195-9486-ea65df456faa/oauth2/v2.0/authorize
          tokenUrl: https://login.microsoftonline.com/1d063515-6cad-4195-9486-ea65df456faa/oauth2/v2.0/token
          refreshUrl: https://login.microsoftonline.com/1d063515-6cad-4195-9486-ea65df456faa/oauth2/v2.0/token
          scopes:
            api://779d25c3-6c74-4875-b5ae-ef9b5a04b1e8/user_impersonation: 访问应用

2. Swagger UI初始化配置 #

在加载Swagger UI的JS代码中添加以下参数，实现预设与隐藏效果：

const ui = SwaggerUIBundle({
  url: "/your-openapi-spec.yaml",
  dom_id: '#swagger-ui',
  // 直接预设client_id，用户无需手动输入
  clientId: "你的固定客户端ID",
  // 配置与Azure AD注册一致的重定向URI
  oauth2RedirectUrl: "https://你的域名/swagger/oauth2-redirect.html",
  onComplete: function() {
    // 隐藏client_secret输入框（授权码流前端场景无需该参数）
    const secretField = document.querySelector('input[name="client_secret"]');
    if (secretField) {
      secretField.parentElement.style.display = 'none';
    }
  },
  // 其他Swagger UI配置项...
});

关键说明 #

• client_id预设：通过Swagger UI的clientId配置项直接注入，彻底避免用户输入环节。
• client_secret隐藏：授权码流的前端应用/单页应用场景本就不需要client_secret，通过DOM操作隐藏对应输入框即可。
• Redirect URI一致性：配置的重定向URI必须与Azure AD应用注册中填写的地址完全匹配，否则授权流程会报错。

参考内容（翻译自Swagger官方文档） #

OAuth2授权码流适用于能安全存储密钥的服务器端应用，流程分为两步：先获取授权码，再用授权码交换访问令牌。在OpenAPI规范中需定义授权端点、令牌端点及支持的作用域；对于前端应用或需固定参数的场景，可通过Swagger UI的配置项简化操作，避免重复输入固定参数。

内容的提问来源于stack exchange，提问作者Shuzheng