如何在React Swagger UI中预填充Client ID与Authorization字段？

我之前在项目里也碰到过一模一样的需求——不想让用户手动从别处复制粘贴凭证到这两个字段，下面是两种亲测好用的实现方式：

方法一：用initOAuth配置自动填充Client ID #

如果你的接口用的是OAuth2认证，swagger-ui-react自带的initOAuth属性就能直接设置默认的Client ID：

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

function MySwaggerComponent() {
  // 配置OAuth默认参数
  const oauthSettings = {
    clientId: '你的默认Client ID',
    // 下面这些是可选配置，根据你的认证需求添加
    appName: '你的应用名称',
    scopes: ['read:data', 'write:data']
  };

  return (
    <SwaggerUI
      url="/your-openapi-spec.json" // 替换成你的OpenAPI规范地址
      initOAuth={oauthSettings}
    />
  );
}

这样用户打开OAuth授权弹窗时，Client ID已经自动填好了，不用手动输入。

方法二：通过onComplete回调预填充Authorization字段（API Key类型） #

如果是API Key形式的Authorization，我们可以在Swagger UI加载完成后，用它的内部API来设置默认Token：

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

function MySwaggerComponent() {
  const handleSwaggerLoaded = (swaggerUiInstance) => {
    // 预填充Authorization的API Key，第一个参数要和你OpenAPI规范里的安全方案名一致
    swaggerUiInstance.preauthorizeApiKey('Authorization', '你的默认Token值');
    
    // 如果Client ID也是单独的API Key字段，用同样方式设置
    swaggerUiInstance.preauthorizeApiKey('ClientId', '你的默认Client ID');
  };

  return (
    <SwaggerUI
      url="/your-openapi-spec.json"
      onComplete={handleSwaggerLoaded}
    />
  );
}

这里要注意：preauthorizeApiKey的第一个参数，必须和你OpenAPI规范里securitySchemes定义的key完全匹配，不然会找不到对应的字段哦。

混合场景的处理 #

如果你的项目同时需要OAuth2的Client ID和API Key的Authorization，把两种方法结合起来就行：

<SwaggerUI
  url="/your-openapi-spec.json"
  initOAuth={{ clientId: '默认Client ID' }}
  onComplete={(ui) => ui.preauthorizeApiKey('Authorization', '默认Token')}
/>

这样用户打开Swagger页面时，这两个字段就自动填好了，完全省去复制粘贴的步骤~

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