# @api-components/api-authorization 中文文档

规范地址：https://npmcn.com/package/%40api-components/api-authorization/

版本：0\.7\.2
npm 元数据更新时间：2026-04-07T19:29:33.086Z
中文译文更新时间：2026-11-06T13:56:04.944Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40api-components/api-authorization
原文对照：https://npmcn.com/package/%40api-components/api-authorization/?lang=original
项目主页：https://github.com/advanced-rest-client/api-authorization#readme
源码仓库：https://github.com/advanced-rest-client/api-authorization

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：195 kB，27 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：14 个
- peer 依赖：jsrsasign ^10\.1\.4，cryptojslib ^3\.1\.2
- 首次发布：2020-04-23T07:12:37.546Z
- 最新版本发布：2022-10-20T18:12:23.731Z
- 近 30 天下载量：3075（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 0 个）

## 中文简介

在AMF模型支持下提供授权编辑器的自定义元素.

## 安装

```sh
npm install @api-components/api-authorization
```

也可以使用：`pnpm add @api-components/api-authorization`、`yarn add @api-components/api-authorization`、`bun add @api-components/api-authorization`

## README

# 被否决

这一构成部分已贬值。 代码基础已移动到 [api 请求](https://github.com/advanced-rest-client/api-request) 模块.

* * *

AMF 授权应用程序中创建和管理授权状态的自定义元素 .

在应用AMF模式和操作安全计划后,要素决定 何方法渲染, 列出可能的方法, 管理状态 当用户 更改任何值,并为UI提供验证方法.

如果授权方法运行在信头或查询参数上,则此组件 发送相应的更改事件,以便其他组件可以更新 sate.

OAuth 1或OAuth 2等更复杂的授权计划首先需要获得 访问标志。 一旦获得令牌,验证状态将更新并相应 使用交付方法(标题或查询参数).

这一要素支持RAML和美洲组织的安全说明.

-   任务 2
-   带有注释的 OAuth 2 (参见 [RAML 的文件](https://github.com/raml-org/raml-annotations/tree/master/annotations/security-schemes)(中文(简体) )
-   授权 1
-   RAML 自定义方案
-   通过
-   Api 密钥( 美洲组织)
-   比尔(美洲组织)

注:文摘授权方法当时不支持. 如果你对这种方法感兴趣 请告诉我们 这一构成部分充分支持美洲组织的所有安全计划.

## 使用量

该部分延伸 `@advanced-rest-client/authorization` 软件包以添加 API 模型支持。 基本组成部分是基本授权方法. 该元素需要将 AML 的 JSON+LD 模型应用到 `amf` 财产和计划定义 `security` 属性.

### 安装

```bash
npm install --save @api-components/api-authorization
```

### 在 html 文件内

```html
<html>
  <head>
    <script type="module">
      import '@api-components/api-authorization/api-authorization.js';
    </script>
  </head>
  <body>
    <api-authorization-method redirectUri="..."></api-authorization-method>
    <script>
    (async () => {
      const model = await getAmfModel();
      const security = getSecurity(model, '/endpoint', 'get');
      const element = document.querySelector('api-authorization');
      element.amf = model;
      element.security = security;
      element.onchange = (e) => {
        if (e.target.validate()) {
          const authList = e.target.serialize();
          console.log(authList);
        }
      };
    })();
    </script>
  </body>
</html>
```

### 在一个LitElement中

```js
import { LitElement, html } from 'lit-element';
import '@api-components/api-authorization/api-authorization.js';

class SampleElement extends LitElement {
  static get properties() {
    return {
      amfModel: { type: Array },
      endpoint: { type: String },
      method: { type: String },
    };
  }

  get security() {
    const { amfModel, endpoint, method } = this;
    return this.readSecurityFor(amfModel, endpoint, method);
  }

  readSecurityFor(amf, endpoint, method) {
    // implement me
  }

  _authChanged(e) {
    if (e.target.validate()) {
      const authList = e.target.serialize();
      console.log(authList);
    }
  }

  render() {
    const { amfModel, security } = this;
    return html`
    <api-authorization
      .amf="${amfModel}"
      .security="${security}"
      @change={this._authChanged}
    ></api-authorization-method>`;
  }
}
customElements.define('sample-element', SampleElement);
```

### 应用AMF模型

第一步是将生成的AMF模型传递给 `amf` 属性。 需要妥善解决内部模型的依赖性,并在 [JSON+LD 紧凑模型](https://w3c.github.io/json-ld-syntax/#compact-iris)。 。 。 .

第二步是对一项行动提取正确的安全定义. 添加到一个 `http://a.ml/vocabularies/apiContract#supportedOperation` 对象。 它应当是由操作方法所支持的一连串.

应用这些值的示例脚本可以看起来像以下的.

```html
<api-authorization-method type="OAuth 2" id="auth"></api-authorization-method>
<script>
(async () => {
  const model = await getAmfModelSomehow();
  const security = readSecurityFor(model, '/endpoint', 'GET');
  const method = document.getElementById('auth');
  method.amf = model;
  method.security = security;
})();
</script>
```

这个 `getAmfModelSomehow()` 函数可以直接从RAML或OAS规格下载预生成的模型或运行AMF parser. 接下来 `readSecurityFor()` 函数在 `/endpoint` 结束点, 内 `GET` 方法. 准备好后,这些值将应用于元素.

设置顺序 `amf` 财务报告和审定财务报表 `security` 参数并不重要,因为数据处理会同步启动.

关于清除的说明 `settings` 属性。 当 `undefined` 或任何不兼容值设置为 `settings` 属性, 组件不创建和设置 `aria-hidden` 属性.

### 授权设置

API可以定义一种以上适用于请求的授权方法. 这在美洲国家组织定义的API中是可能的,RAML没有这样的概念. 因为.. `settings` 获取器(或 `serialize()` 函数)返回一系列应用的授权设置.

每个对象都有 `type` 财务报告和审定财务报表 `valid` 属性。 这个 `type` 由 `@api-components/api-authorization-method` 数值 `type` 属性。 这个 `valid` 属性是验证为授权方法提供UI的元素的结果. 此外,每个对象包含 `settings` 从 API 读取包含用户输入值和配置的属性。 此对象的属性取决于所选的授权方法, 它是调用的结果 `serialize()` 函数 `api-authorization-method`。 。 。 .

### 应用授权设置

组件不向信头或查询参数传播更改. 应在执行请求之前这样做。 为了那个电话 `createAuthParams()` 生成适用于请求对象的参数列表的方法.

```javascript
sendRequest() {
  const authCmp = this.shadowRoot.querySelector('api-authorization');
  const auth = authCmp.createAuthParams();
  const request = {
    method: 'GET',
    url: 'https://api.domain.com/path?',
    headers: '',
  };
  Object.keys(auth.headers).forEach((header) => request.headers += `${header}: ${auth.headers[header]}\n`);
  Object.keys(auth.params).forEach((param) => request.url += `${param}=${auth.params[param]}&`);
}
```

### 其他步骤

#### 文摘,NTLM

文摘和NTLM授权方法与请求相互作用,使得在初始化连接之前无法对请求应用设置. 它需要在同一连接上管理的一系列请求和答复。 由于这两种方法,组件只产生授权设置。 主机应用程序必须始终检查当前授权设置,如果使用了这两种方法,则在连接时执行授权.

#### 授权 1

OAuth 1的授权基于签署请求数据:HTTP方法和URL. 在授权成立后,这种情况可能会改变. 因此,作为该元素主机的应用程序必须在请求上加注如下: [此文档](https://oauth1.wp-api.org/docs/basics/Signing.html)启用 `settings` 获取当前设置 .

这个 `@advanced-rest-client/authorization` 组件有: `signRequest(request, auth)` 用于签名 OAuth 1 协议请求的方法.

示例

```javascript
const settings = node.serialize();
const oauth1 = settings.find((item) => item.type === 'oauth 1');
if (oauth1 && oauth1.valid) {
  const oauth1auth = document.querySelector('oauth1-authorization');
  oauth1auth.signRequest(request, oauth1.settings);
}
```

## 发展

```sh
git clone https://github.com/advanced-rest-client/api-authorization
cd api-authorization
npm install
```

### 本地运行演示

```sh
npm start
```

### 运行测试

```sh
npm test
```

## 常见问题

### @api-components/api-authorization 是什么？

在AMF模型支持下提供授权编辑器的自定义元素\.

### 如何安装 @api-components/api-authorization？

在项目目录运行 npm install @api-components/api-authorization，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：jsrsasign（^10\.1\.4）、cryptojslib（^3\.1\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @api-components/api-authorization 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/api-components\_\_api-authorization 是否存在。

### @api-components/api-authorization 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @api-components/api-authorization 可以商用吗？

@api-components/api-authorization 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @api-components/api-authorization 的下载量有多少？

根据 npm 官方下载统计，@api-components/api-authorization 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,075 次，日均约 103 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @api-components/api-authorization 还在维护吗？

最新版本 0\.7\.2 发布于 2022/10/21（4 年前）；至今共发布 11 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/04/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。