LoopBack 4 - 在 API 资源管理器中添加 'Authorize' 按钮

Question

我是 LoopBack v4 的新手，我正在尝试为每个请求发送授权密钥。我以前用过Swagger，我以前是在点击右边的"Authorize"按钮后，加上api键。为了避免由于我缺乏经验而导致的错误，我从 "Todo List" 示例的一个新应用开始。我尝试（但没有成功）遵循这个 post 的建议：

我所做的是使用以下代码修改文件 src/index.ts：

export async function main(options: ApplicationConfig = {}) {
  const spec: OpenApiSpec = {
    openapi: '3.0.0',
    info: {
      title: 'LoopBack Application v2',
      version: '1.0.2',
    },
    paths: {
    },
    securityDefinitions: [
      {
        api_key: [
          {
            type: 'apiKey',
            name: 'api_key',
            in: 'header'
          }
        ]
      },
    ],
  };

  const app = new TodoListApplication(options);
  app.api(spec);

  await app.boot();
  await app.start();

  const url = app.restServer.url;
  console.log(`Server is running at ${url}`);
  return app;
}

基本上，我添加了这一行：app.api(spec); 和配置 securityDefinitions。 spec 常量改变了 title 和 version，但我仍然看不到 "Authorize" 按钮。当然，我遗漏了什么或做错了什么。

感谢任何帮助！谢谢！

Answer 1

最后，我添加了 "Authorize" 按钮并在 header 中发送了 api_key，配置如下：

  const spec: OpenApiSpec = {
    openapi: '3.0.0',
    info: {
      title: 'LoopBack Application v2',
      version: '1.0.2',
    },
    paths: {},
    security: [
      {
        api_key: ['api_key'],
      },
    ],
    components: {
        securitySchemes: {
          api_key: {
            type: 'apiKey',
            name: 'api_key',
            in: 'header'
          }
        }
    },
  };

Answer 2

在您的文件系统中创建一个安全规范文件，如下所示

import {ReferenceObject, SecuritySchemeObject} from '@loopback/openapi-v3';

export const SECURITY_SPEC = [{bearerAuth: []}];
export type SecuritySchemeObjects = {
  [securityScheme: string]: SecuritySchemeObject | ReferenceObject;
};
export const SECURITY_SCHEME_SPEC: SecuritySchemeObjects = {
  bearerAuth: {
    type: 'http',
    scheme: 'bearer',
    bearerFormat: 'JWT',
  },
};

在超级（选项）下方的 XXXX 应用程序 class 的 application.ts 文件中添加以下代码，并从安全规范文件导入 SECURITY_SCHEME_SPEC、SECURITY_SPEC。

 this.api({
      openapi: '3.0.0',
      info: {title: "package or prject name", version: '1.0'},
      paths: {},
      components: {securitySchemes: SECURITY_SCHEME_SPEC},
      servers: [{url: '/'}],
      security: SECURITY_SPEC
    });

Referance loopback link

LoopBack 4 - 在 API 资源管理器中添加 'Authorize' 按钮

LoopBack 4 - Add 'Authorize' button in API explorer

node.js

swagger

swagger-ui

loopbackjs

v4l2loopback