# @azure/msal-react 中文文档

规范地址：https://npmcn.com/package/%40azure/msal-react/

版本：5\.8\.1
npm 元数据更新时间：2026-11-06T23:54:23.920Z
中文译文更新时间：2026-11-07T13:09:12.105Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40azure/msal-react
原文对照：https://npmcn.com/package/%40azure/msal-react/?lang=original
项目主页：https://github.com/AzureAD/microsoft-authentication-library-for-js#readme
源码仓库：https://github.com/AzureAD/microsoft-authentication-library-for-js

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

- 包体积（解压后）：168 kB，80 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- peer 依赖：react ^16\.8\.0 \|\| ^17 \|\| ^18 \|\| ^19\.2\.1，@azure/msal-browser ^5\.29\.0
- 首次发布：2020-11-12T00:05:55.762Z
- 最新版本发布：2026-11-06T23:54:23.756Z
- 近 30 天下载量：6045586（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：148（近 12 个月 44 个）

## 中文简介

微软验证库

## 安装

```sh
npm install @azure/msal-react
```

也可以使用：`pnpm add @azure/msal-react`、`yarn add @azure/msal-react`、`bun add @azure/msal-react`

## README

# 微软回放认证库( msal- react)

[![npm version](https://img.shields.io/npm/v/@azure/msal-react.svg?style=flat)](https://www.npmjs.com/package/@azure/msal-react/) [![npm version](https://img.shields.io/npm/dm/@azure/msal-react.svg)](https://nodei.co/npm/@azure/msal-react/) [![codecov](https://codecov.io/gh/AzureAD/microsoft-authentication-library-for-js/branch/dev/graph/badge.svg?flag=msal-react)](https://codecov.io/gh/AzureAD/microsoft-authentication-library-for-js)

| [开始](https://docs.microsoft.com/azure/active-directory/develop/tutorial-v2-react) | [AAD 文档](https://aka.ms/aaddevv2) | [图书馆参考文献](https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_react.html) | [样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples) |
| --- | --- | --- | --- |

1.  [关于](https://npmcn.com/package/%40azure/msal-react/#readme-about)
2.  [财务问题](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/FAQ.md)
3.  [更改日志](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/CHANGELOG.md)
4.  [先决条件](https://npmcn.com/package/%40azure/msal-react/#readme-prerequisites)
5.  [版本支持](https://npmcn.com/package/%40azure/msal-react/#readme-version-support)
6.  [安装](https://npmcn.com/package/%40azure/msal-react/#readme-installation)
7.  [构建和测试](https://npmcn.com/package/%40azure/msal-react/#readme-build-and-test)
8.  [使用量](https://npmcn.com/package/%40azure/msal-react/#readme-usage)
    -   [开始](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md)
    -   [女士基本知识](https://npmcn.com/package/%40azure/msal-react/#readme-msal-basics)
    -   [高级主题](https://npmcn.com/package/%40azure/msal-react/#readme-advanced-topics)
    -   [MSAL 反应特定概念](https://npmcn.com/package/%40azure/msal-react/#readme-msal-react-specific-concepts)
9.  [样本](https://npmcn.com/package/%40azure/msal-react/#readme-samples)
10.  [安全报告](https://npmcn.com/package/%40azure/msal-react/#readme-security-reporting)
11.  [许可证](https://npmcn.com/package/%40azure/msal-react/#readme-license)
12.  [行为守则](https://npmcn.com/package/%40azure/msal-react/#readme-we-value-and-adhere-to-the-microsoft-open-source-code-of-conduct)

## 关于

JavaScript 的 MSAL 库允许客户端JavaScript 应用程序认证用户使用 [阿苏雷AD](https://docs.microsoft.com/azure/active-directory/develop/v2-overview) 工作账户和学校账户(AAD),微软个人账户(MSA)以及Facebook,Google,LinkedIn,微软账户等社会身份供应商通过 [Azure AD B2C (英语)](https://docs.microsoft.com/azure/active-directory-b2c/active-directory-b2c-overview#identity-providers) 服务。 也能让您的应用程序获得访问的符号 [微软云](https://www.microsoft.com/enterprise) 诸如: [微软图形](https://graph.microsoft.io/)。 。 。 .

这个 `@azure/msal-react` 此文件夹中由代码描述的软件包使用 [`@azure/msal-browser` 软件包](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser) 作为对等依赖,可以在Javascript Single-Page应用程序中进行认证,而无需后端服务器. 这个版本的库使用OAuth 2.0授权代码与PKCE的流程. 欲了解更多关于这个协议,以及隐含流与授权代码流的区别,请参见以下 [@azure/msal-浏览器读取器](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/README.md#implicit-flow-vs-authorization-code-flow-with-pkce)。 。 。 .

## 先决条件

-   `@azure/msal-react` 意在用于 [单页应用程序](https://docs.microsoft.com/azure/active-directory/develop/scenario-spa-overview)。 。 。 .
    
-   使用前 `@azure/msal-react` 您将需要 [在 Azure AD 中注册单个页面应用程序](https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration) 获取有效的 `clientId` 用于配置,并注册您的应用程序将接受重定向流量的路径.
    

## 版本支持

| MSAL 反应版本 | MSAL 支持状态 | 支持的反应版本 |
| --- | --- | --- |
| MSAL 反应 v5 | 积极发展 | 16 (16.8+)、17、18、19 |
| MSAL 反应 v3 | 维修 | 第十六条、第十七条、第十八条、第十九条 |
| MSAL 反应 v1, v2 | 维修 | 第16、17、18条 |

**说明:** MSAL React v2发行版没有功能变化.

## 安装

国家防范机制有MSAL反应包.

```sh
npm install react react-dom
npm install @azure/msal-react @azure/msal-browser
```

## 构建和测试

见 [`contributing.md`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/contributing.md) 文档以获取更多信息.

### 在当地建立软件包

为了建造 `@azure/msal-react` 库中,您可以进行下列工作:

```bash
// Install dev dependencies from root of repo
npm install
// Change to the msal-react package directory
cd lib/msal-react/
// To run build only for react package
npm run build
```

来建造两个 `@azure/msal-react` 图书馆和图书馆 `@azure/msal-browser` 图书馆,您可以进行以下活动:

```bash
// Install dev dependencies from root of repo
npm install
// Change to the msal-react package directory
cd lib/msal-react/
// To run build for react and browser packages
npm run build:all
```

### 运行测试

`@azure/msal-react` 用途 [欢笑](https://jestjs.io/) 进行单位测试和覆盖.

```bash
// To run tests
npm test
// To run tests with code coverage
npm run test:coverage
```

## 使用量

帮助开始 `@azure/msal-react` 请看我们的 [开始中](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md) 医生.

从 [反应- aad- msal](https://www.npmjs.com/package/react-aad-msal)看看我们 [移徙指南](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/migration-guide.md)。 。 。 .

### MSAL 基本知识

自兹 `@azure/msal-react` 是一个包裹周围 `@azure/msal-browser` 许多来自 `msal-browser` 收回也与此有关。 具体概念 `@azure/msal-react` 请看 [下级](https://npmcn.com/package/%40azure/msal-react/#readme-msal-react-specific-concepts)

1.  [初始化](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md)
2.  [获取和使用访问令牌](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md)
3.  [管理象征生命](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/token-lifetimes.md)
4.  [管理账户](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md)
5.  [正在注销](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/logout.md)

### 高级主题

-   [配置选项](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md)
-   [请求和答复详情](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md)
-   [活动](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/events.md)
-   [快取存储](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/caching.md)
-   [绩效提高](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/performance.md)

### MSAL 反应特定概念

1.  [钩子](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md)
2.  [活动](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/events.md)
3.  [类组件](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/class-components.md)
4.  [业绩](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/performance.md)

## 样本

我们 [样本目录](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples) 包含多个示例应用程序, 您可以旋转来查看此库如何在不同的背景中使用 .

-   [创建 App( JS) 样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react-router-sample)
-   [创建反应 App( TS) 样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/typescript-sample)
-   [Next.js 样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/nextjs-sample)
-   [盖茨比样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/gatsby-sample)
-   [B2C 样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/b2c-sample)
-   [反应 16 相容样本( MUI v4)](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react16-sample)
-   [反应 17 相容样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react17-sample)
-   [反应 18 相容样本](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-react-samples/react18-sample)

以教程支持的更高级样本可在 [Azure 样本](https://github.com/Azure-Samples) gitHub 上的空间 :

-   [反应 SPA 呼叫Express.js web API](https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api)
-   [React SPA calling Express.js web API 使用 App Roads 和 RBAC 调用快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取快取](https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/5-AccessControl/1-call-api-roles)
-   [反应 SPA 调用 Microsoft Graph 通过 Express.js 网络 API 使用半流](https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/6-AdvancedScenarios/1-call-api-obo)
-   [Azure Static Web Apps 的部署教程](https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/4-Deployment/2-deploy-static)

## 安全报告

如果你发现我们的图书馆或服务有安全问题,请报告 [安全性@ microsoft.com](mailto:secure@microsoft.com) 尽可能详细。 您的呈文可能有资格通过 [微软慷慨](http://aka.ms/bugbounty) 程序。 请不要将安全问题张贴到 GitHub 问题或任何其他公共网站。 我们收到消息后马上联系你 我们鼓励您通过访问了解安全事件何时发生 [此页面](https://technet.microsoft.com/security/dd252948) 并签署安全咨询警报.

## 许可证

版权 (c) 微软公司。 版权所有。 根据麻省理工学院的许可.

## 我们重视并遵守微软开放源码行为守则

该项目通过了 [Microsoft 开源行为守则](https://opensource.microsoft.com/codeofconduct/)。更多信息见 [《行为守则》](https://opensource.microsoft.com/codeofconduct/faq/) 或联系人 [打开码@ microsoft.com](mailto:opencode@microsoft.com) 并附上任何其他问题或评论.

## 常见问题

### @azure/msal-react 是什么？

微软验证库

### 如何安装 @azure/msal-react？

在项目目录运行 npm install @azure/msal-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0 \|\| ^17 \|\| ^18 \|\| ^19\.2\.1）、@azure/msal-browser（^5\.29\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @azure/msal-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @azure/msal-react 支持 ESM 还是 CommonJS？

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

### @azure/msal-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @azure/msal-react 可以商用吗？

@azure/msal-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @azure/msal-react 的下载量有多少？

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

### @azure/msal-react 还在维护吗？

最新版本 5\.8\.1 发布于 2026/11/07（今天）；至今共发布 148 个版本，其中过去 12 个月发布了 44 个；首次发布于 2020/11/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。