Question

我在应用程序中使用swagger-ui-react。但是我不知道如何配置以将授权添加到api请求中。

我在here的swagger ui中找到了答案：

window.swaggerUi = new SwaggerUi({...})
...
swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "Basic dXNlcm5hbWU6cGFzc3dvcmQ=", "header"));

但是我不知道如何在swagger-ui-react中使用。这是我的代码：

import styles from './index.less';

import React from 'react';
// tslint:disable
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';
// tslint:able

const SwaggerComp = params => {
    const auth = params.authorization;
    return (
        <div className={styles.wrapper}>
         <SwaggerUI
           url="/v2/swagger-file-url"
           withCredentials
         />
       </div>
    )
};

export default SwaggerComp;

Answer 1

要在“尝试”请求中发送Authorization标头，您的API定义文件（/v2/swagger-file-url）必须为操作定义适当的安全性。用户需要先单击“授权”按钮以输入身份验证信息（例如，基本身份验证的用户名和密码）。

OpenAPI 3.0示例：

openapi: 3.0.2

components:
  securitySchemes:
    basicAuth:
      type: http
      scheme: basic

security:
  - basicAuth: []

OpenAPI 2.0示例：

swagger: '2.0'

securityDefinitions:
  basicAuth:
    type: basic

security:
  - basicAuth: []

有关更多信息，请参见：

Authentication OpenAPI 3.0指南
Authentication OpenAPI 2.0指南

Answer 2

在react-swagger-ui中，它们具有一个名为 requestInterceptor 的网络属性，在这里您可以在将请求json传递给api调用之前对其进行修改，因此您可以添加授权标头位于其中，并记得在requestInterceptor中返回修改后的json。

要在json中设置身份验证标头，有几种方法，我使用sigv4作为授权标头，然后使用Amplify Signer生成所有必需的标头（Authorization，X-Amz-Date。。）对于我来说，在api调用之前，这是链接 here 。

如何在swagger-ui-react中发送带有请求的授权标头？

2 个答案: