# @advanced-rest-client/authorization 中文文档

规范地址：https://npmcn.com/package/%40advanced-rest-client/authorization/

版本：0\.1\.13
npm 元数据更新时间：2026-04-07T19:30:27.470Z
中文译文更新时间：2026-11-06T12:11:55.333Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：363 kB，66 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：21 个
- peer 依赖：jsrsasign ^10\.0\.5，cryptojslib ^3\.1\.2
- 首次发布：2021-06-04T17:29:13.808Z
- 最新版本发布：2024-05-31T15:26:55.376Z
- 近 30 天下载量：3255（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 0 个）

## 中文简介

与HTTP授权相关的UI和逻辑.

## 安装

```sh
npm install @advanced-rest-client/authorization
```

也可以使用：`pnpm add @advanced-rest-client/authorization`、`yarn add @advanced-rest-client/authorization`、`bun add @advanced-rest-client/authorization`

## README

# 授权

[![Published on NPM](https://img.shields.io/npm/v/@advanced-rest-client/authorization.svg)](https://www.npmjs.com/package/@advanced-rest-client/authorization)

[![tests](https://github.com/advanced-rest-client/authorization/actions/workflows/deployment.yml/badge.svg)](https://github.com/advanced-rest-client/authorization/actions/workflows/deployment.yml)

与HTTP授权相关的UI和逻辑.

## 使用量

### 安装

```sh
npm install --save @advanced-rest-client/authorization
```

### 构成部分

#### 授权选择器

使用 `authorization-method` 制作一个选取式的授权方法箱.

```html
<authorization-selector
  horizontal
  multi
>
  <!-- None option -->
  <div type="none" aria-describedby="noneDesc">Authorization configuration is disabled</div>
  <p id="noneDesc" slot="aria">Select authorization method required by the API.</p>

  <!-- HTTP basic authorization -->
  <authorization-method type="basic" aria-describedby="basicDesc"></authorization-method>
  <p id="basicDesc" slot="aria">
    Basic authorization allows to send a username and a password in a request header.
  </p>

  <!-- Bearer token authorization -->
  <authorization-method type="bearer" aria-describedby="tokenDesc"></authorization-method>
  <p id="tokenDesc" slot="aria">
    Bearer authorization allows to send an authentication token in the authorization header using the "bearer" method.
  </p>

  <!-- ... -->
</authorization-selector>
```

#### 授权方法

这个 `authorization-method` 元素生成一个表格,其中包含与该清单界定的核准计划有关的投入 `type` 属性.

```html
<authorization-method
  type="oauth 2"
  redirectUri="https://..."
  authorizationUri="https://..."
  accessTokenUri="https://..."
  clientId="test-client-id"
  grantType="authorization_code"
  pkce
></authorization-method>
```

#### 双镜选择器

一个专门选择 OAuth 2 范围的输入 .

```html
 <oauth2-scope-selector
  required
  autoValidate
  allowedScopes='["user", "user:email", "user:follow", "..."]'
></oauth2-scope-selector>
```

### OAuth 授权

```javascript
import { OAuth2Authorization } from '@advanced-rest-client/oauth-authorization';

const settings = {
  grantType: 'implicit',
  clientId: 'CLIENT ID',
  redirectUri: 'https://example.com/auth-popup.html',
  authorizationUri: 'https://auth.example.com/token',
  scopes: ['email'],
  state: 'Optional string',
};

const factory = new OAuth2Authorization(settings);
const tokenInfo = await factory.authorize(settings)
```

#### 在授权流中弹出

此软件包包含 `oauth-popup.html` ,用于与主机页面交换令牌/代码数据。 其他页面也可以使用. 弹出页面必须使用 `window.postMessage()` 向库报告授权服务器返回的参数。 它期望返回包含授权结果的URL部分. 例如,对于有这样的值的弹出url: `https://redirect.domain.com/popup.html#code=1234&state=5678` 弹出窗口应该以 `code=1234&state=5678`。 。 。 .

#### 状态参数和安全

此元素被打算用于已密闭已失密的调试应用程序,因为用户可能被要求提供客户端秘密参数(取决于流量). **不应用于客户端应用程序** 这不服务调试目的。 客户端不应使用客户端的秘密.

为了至少得到最低限度的保护(在已经受到损害的环境中),这个库将产生一个 `state` 参数作为一系列的字母数字字符并将其附加到请求中. 它预计将在响应中返回相同的字符串(如rfc6749所定义). 虽然这个参数是可选的,但如果 `state` 参数与请求前生成的参数不同.

如果设置中不提供状态参数,则由元素自动生成。 使用此属性来检查事件响应( 无论是信使还是错误) 是否来自您对信使的请求, 是一个好主意 。 应用程序可以 支持不同的 OAuth 客户端, 这样您可以在稍后使用符号响应来检查是否是同一客户端的响应 .

#### 非交互式授权

对于 `implicit` 财务报告和审定财务报表 `authorization_code` 您可以设置符号请求 `interactive` 配置属性为 `false` 在背景中请求符号,而不向用户提供与授权相关的任何UI. 它可用于在用户授权应用程序后请求访问令牌. 服务器应返回将返回应用程序的符号 .

#### 预先定义的客户证书

为了在测试环境中方便用户(类似测试或文档工具),我们可以定义一个在OAuth 2编辑器中以下放选择器提供的客户资格(客户身份和客户秘密)列表. 这样用户可以选择使用其中一种证书,而手动提供.

```javascript
const credentialsSource = [{
  grantType: 'client_credentials', 
  credentials: [
    {
      name: 'My social Network', 
      clientId: '123', 
      clientSecret: 'xyz'
    }, {
      name: 'My social Network 2', 
      clientId: '9876', 
      clientSecret: 'abc'
    }
  ]
}];
const editor = document.querySelector('authorization-method[oauth 2]');
editor.credentialsSource = credentialsSource;
```

## 发展

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

### 本地运行演示

```sh
npm start
```

### 运行测试

```sh
npm test
```

## 鸣谢

-   此元素使用 [标记](https://github.com/kjur/jsrsasign) 根据麻省理工学院许可证分发的图书馆.
-   此元素使用 [密码](https://code.google.com/archive/p/crypto-js/) 根据 BSD 许可证分发的库.

## 所需依赖关系

这个 `CryptoJS` 财务报告和审定财务报表 `RSAKey` 库不包含在元素源中. 如果您的工程没有使用此库, 已经将它包含在您的工程中 .

```sh
npm i cryptojslib jsrsasign
```

```html
<script src="../../../cryptojslib/components/core.js"></script>
<script src="../../../cryptojslib/rollups/sha1.js"></script>
<script src="../../../cryptojslib/components/enc-base64-min.js"></script>
<script src="../../../cryptojslib/rollups/md5.js"></script>
<script src="../../../cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../../jsrsasign/lib/jsrsasign-rsa-min.js"></script>
```

还有OAuth1元素用途 `URL` 分类 `searchParams` 属性。 如果瞄准的旧浏览器中也包含此的多填充 .

## 常见问题

### @advanced-rest-client/authorization 是什么？

与HTTP授权相关的UI和逻辑\.

### 如何安装 @advanced-rest-client/authorization？

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

### @advanced-rest-client/authorization 支持 TypeScript 吗？

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

### @advanced-rest-client/authorization 支持 ESM 还是 CommonJS？

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

### @advanced-rest-client/authorization 可以商用吗？

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

### @advanced-rest-client/authorization 的下载量有多少？

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

### @advanced-rest-client/authorization 还在维护吗？

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