如何在 swagger-ui-react 中通过请求发送授权标头? [英] How to send Authorization header with a request in swagger-ui-react?

问题描述

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

我在 此处 中找到了使用 swagger ui 的答案:

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

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

从'./index.less'导入样式；从反应"导入反应；//tslint: 禁用从'swagger-ui-react'导入SwaggerUI；导入 'swagger-ui-react/swagger-ui.css';//tslint: 可const SwaggerComp = 参数 =>{const auth = params.authorization;返回 (<div className={styles.wrapper}><SwaggerUIurl="/v2/swagger-file-url"有凭证/>

)};导出默认 SwaggerComp；

解决方案

要在试用"请求中发送 Authorization 标头，您的 API 定义文件 (/v2/swagger-file-url) 必须为操作定义适当的安全性.用户需要先点击授权"按钮，输入认证信息(如Basic auth的用户名和密码)，然后再进行试用".

OpenAPI 3.0 示例:

openapi: 3.0.2成分:安全方案:基本身份验证:类型:http方案:基本安全:- 基本身份验证:[]

OpenAPI 2.0 示例:

swagger: '2.0'安全定义:基本身份验证:类型:基本款安全:- 基本身份验证:[]

有关更多信息，请参阅:

• 身份验证 OpenAPI 3.0 指南
• 身份验证 OpenAPI 2.0 指南

I use swagger-ui-react in my application. But I don't know how to config to add the authorization into api requests.

I had found an answer use in swagger ui from here:

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

But I don't know how to use in swagger-ui-react. Here is my code:

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;

解决方案

To send the Authorization header in "try it out" requests, your API definition file (/v2/swagger-file-url) must define the appropriate security for operations. Users will need to click the "Authorize" button to enter the authentication information (such as the username and password for Basic auth) before doing "try it out".

OpenAPI 3.0 example:

openapi: 3.0.2

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

security:
  - basicAuth: []

OpenAPI 2.0 example:

swagger: '2.0'

securityDefinitions:
  basicAuth:
    type: basic

security:
  - basicAuth: []

For more information, see:

• Authentication guide for OpenAPI 3.0
• Authentication guide for OpenAPI 2.0

这篇关于如何在 swagger-ui-react 中通过请求发送授权标头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！