# @auth0/auth0-spa-js 中文文档
规范地址：https://npmcn.com/package/%40auth0/auth0-spa-js/
版本：2\.30\.0
npm 元数据更新时间：2026-10-29T12:37:58.200Z
中文译文更新时间：2026-11-07T05:48:15.669Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40auth0/auth0-spa-js
原文对照：https://npmcn.com/package/%40auth0/auth0-spa-js/?lang=original
项目主页：https://github.com/auth0/auth0-spa-js#readme
源码仓库：https://github.com/auth0/auth0-spa-js
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：5.6 MB，112 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- 首次发布：2019-03-25T18:55:27.600Z
- 最新版本发布：2026-10-29T12:37:57.289Z
- 近 30 天下载量：11775270（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：138（近 12 个月 41 个）
## 中文简介
Auth0 SDK 单页应用程序,使用授权代码 Grant Flow with PKCE
## 安装
```sh
npm install @auth0/auth0-spa-js
```
也可以使用：`pnpm add @auth0/auth0-spa-js`、`yarn add @auth0/auth0-spa-js`、`bun add @auth0/auth0-spa-js`
## README
[](https://www.npmjs.com/package/@auth0/auth0-spa-js) [](https://codecov.io/gh/auth0/auth0-spa-js) [](https://deepwiki.com/auth0/auth0-spa-js)  [](https://opensource.org/licenses/MIT) 
📚 [文档](https://npmcn.com/package/%40auth0/auth0-spa-js/#readme-documentation) - 🚀 [开始](https://npmcn.com/package/%40auth0/auth0-spa-js/#readme-getting-started) - 💻 [API 参考](https://npmcn.com/package/%40auth0/auth0-spa-js/#readme-api-reference) - 💬 [反馈](https://npmcn.com/package/%40auth0/auth0-spa-js/#readme-feedback)
## 文档
- [快速启动](https://auth0.com/docs/quickstart/spa/vanillajs/interactive) - 使用 Auth0 快速向您的应用程序添加登录、登录和用户信息的交互式指南.
- [软件样本](https://github.com/auth0-samples/auth0-javascript-samples/tree/master/01-Login) - 与Auth0合并的完整样本应用程序.
- [问题](https://github.com/auth0/auth0-spa-js/blob/main/FAQ.md) - 经常问关于Auth0 -spa -js SDK的问题.
- [实例](https://github.com/auth0/auth0-spa-js/blob/main/EXAMPLES.md) - 常见情况代码样本.
- [Docs 站点](https://auth0.com/docs) - 探索我们的Docs网站, 了解更多关于Auth0.
## 开始
### 安装
使用 [无](https://npmjs.org/) 在工程目录中运行以下命令:
```sh
npm install @auth0/auth0-spa-js
```
来自CDN:
```html
```
### 配置 Auth0
创建一个 **单页应用程序** 输入 [Auth0 剪贴板](https://manage.auth0.com/#/applications)。 。 。 .
> **如果你在使用现有的应用程序**,验证您在您的单页应用程序中配置了以下设置:
>
> - 点击应用程序页面的“ 设置” 标签 .
> - 向下滚动并点击"显示高级设置"链接.
> - 在"高级设置"下,点击"OAuth"分页.
> - 确保“JsonWebToken 签名算法”设定为 `RS256` 而"OIDC Conformant"是启用的.
其次,在“设置”页面的“应用程序 URIs”栏下为您的应用程序配置以下URL:
- **允许召回 URL**数字 : `http://localhost:3000`
- **允许登录 URL**数字 : `http://localhost:3000`
- **允许的 Web 来源**数字 : `http://localhost:3000`
> 这些 URL 应当反映您应用程序运行的源代码 . **允许召回 URL** 也可能包括一个路径,取决于你处理回调的地方(见下文).
注意到 **客户身份** 财务报告和审定财务报表 **域名** “基本信息”栏下的数值。 下一步你需要这些价值.
### 配置 SDK
创建一个 `Auth0Client` 在提交或初始化您的申请之前。 你只应该有一个客户的例子.
```js
import { createAuth0Client } from '@auth0/auth0-spa-js';
//with async/await
const auth0 = await createAuth0Client({
domain: '',
clientId: '',
authorizationParams: {
redirect_uri: ''
}
});
//or, you can just instantiate the client on its own
import { Auth0Client } from '@auth0/auth0-spa-js';
const auth0 = new Auth0Client({
domain: '',
clientId: '',
authorizationParams: {
redirect_uri: ''
}
});
//if you do this, you'll need to check the session yourself
try {
await auth0.getTokenSilently();
} catch (error) {
if (error.error !== 'login_required') {
throw error;
}
}
```
### 登录
然后可以使用登录 `Auth0Client` 您创建的示例 :
```html
```
```js
//redirect to the Universal Login Page
document.getElementById('login').addEventListener('click', async () => {
await auth0.loginWithRedirect();
});
//in your callback route ()
window.addEventListener('load', async () => {
const redirectResult = await auth0.handleRedirectCallback();
//logged in. you can get the user profile like this:
const user = await auth0.getUser();
console.log(user);
});
```
### 在线访问
> \[注\] 通过SDKs提供的在线访问(在线刷新托肯斯)支持目前正在早期访问中. 要请求访问此功能, 请联系您的 Auth0 代表 .
> \[尖叫声\] 在线刷新 Tokens 目前不支持资源服务器 **以弗相会** 启用 。 二. 使两者均能实现 `allow_online_access` 和同一资源服务器上的"Allow for Ephemeral Sessions"的结果是,授权服务器发布了一个在线刷新托肯,然后被拒绝(Allow for Ephemeral Sessions)`invalid_grant`在下一个刷新。 在添加 Ephemeral 会话支持之前, 在线刷新托肯, 禁用任何与之使用的资源服务器上的“ Allow for Ephemeral会话 ” `refreshTokenMode: RefreshTokenMode.Online`。 。 。 .
设定 `refreshTokenMode` 改为 `RefreshTokenMode.Online` (连同所需员额) `useRefreshTokens: true` 财务报告和审定财务报表 `useDpop: true`用于 **在线刷新** 非旋转的刷新符号,绑定在Auth0会期内. SDK 注入到 `online_access` 通过刷新式赠款更新范围和路线.
```js
import { createAuth0Client, RefreshTokenMode } from '@auth0/auth0-spa-js';
const auth0 = await createAuth0Client({
domain: '',
clientId: '',
useRefreshTokens: true,
refreshTokenMode: RefreshTokenMode.Online,
useDpop: true,
authorizationParams: {
redirect_uri: ''
}
});
```
`refreshTokenMode` 是一个子选项 `useRefreshTokens`: 它默认为 `RefreshTokenMode.Offline` (上述旋转刷新符号),必须设置为 `RefreshTokenMode.Online` 用于在线刷新托肯斯。 在线模式都要求 `useRefreshTokens: true` 财务报告和审定财务报表 `useDpop: true`。见 [在线访问](https://github.com/auth0/auth0-spa-js/blob/main/examples/online-access.md) 以全向导.
### 实验中心
> \[注\] 实验中心通过SDKs的支持目前正在早期访问中. 要请求访问此功能, 请联系您的 Auth0 代表 .
[实验中心](https://auth0.com/docs/customize/experiment-center/overview) 允许您测试您的登录流量。 Auth0 指定每个用户到一个变体服务器侧. 当需要强制特定变体——用于测试或应用地标工具的决定时——通过 `experiment_id` 财务报告和审定财务报表 `variation_id` 在登录通话中 :
```js
await auth0.loginWithRedirect({
authorizationParams: {
experiment_id: '',
variation_id: ''
}
});
```
推翻仅适用于该请求。 下一个没有这些参数的登录返回到正常的服务器侧任务 .
通过这些 **每一次通话** 而不是在 `authorizationParams` 在客户端构建时, 覆盖不会影响沉默 `prompt=none` 代号-续约电话(实验中心不运行于这些).
**测试:** 从测试自动化(如Cypress、Playwright)驱动,其中的ID从一个CI环境变量读取,对接一个中转租户。 在已运出的申请代码中不要使用硬码变体ID.
**用于生产:** 从一个特性旗工具(例如LOANDAKLY)中通过变种决定,该工具已经决定了用户应该看到的变种.
### 匿名会话
> \[注\] 匿名会话通过SDKs的支持目前处于早期访问中. 要请求访问此功能, 请联系您的 Auth0 代表 .
匿名会议在访问者登录前会指定一个持续身份. 设定 `createAnonymousSessionOnFailedSilentAuth: true` 使 SDK 在 `checkSession()` 找不到认证用户 .
```js
// createAuth0Client calls checkSession() internally — the anonymous session is ready on init
const auth0 = await createAuth0Client({
domain: '',
clientId: '',
createAnonymousSessionOnFailedSilentAuth: true,
// default is 'localStorage'; use 'memory' if you don't want persistence
anonymousSessionsCacheMode: 'localStorage'
});
const { accessToken } = await auth0.anonymous.getTokenSilently({
audience: 'https://api.example.com'
});
```
见 [匿名会话](https://github.com/auth0/auth0-spa-js/blob/main/examples/anonymous-sessions.md) 完整指南,包括带有元数据的明确会话创建、多个受众和登录.
### 更多实例
涵盖各种情景的综合实例,包括伐木、调用API、刷新信使、在线访问、组织、密码、外交部、DPoP等等,请参见 [缩略语.md](https://github.com/auth0/auth0-spa-js/blob/main/EXAMPLES.md) 文档.
## API 参考
探索Auth0-spa-js中可用的API方法.
- [配置选项](https://auth0.github.io/auth0-spa-js/interfaces/Auth0ClientOptions.html)
- [自动 0 客户端](https://auth0.github.io/auth0-spa-js/classes/Auth0Client.html)
- [创建 Auth0 客户端](https://auth0.github.io/auth0-spa-js/functions/createAuth0Client.html)
## 企业连接
Entertainment Connect让B2B SaaS应用程序添加企业SSO而不替换其已存在的认证堆栈. SDK的出口 `isFederatedDomain` 用于电子邮件域搜索;然后以 `loginWithRedirect` 使用电子邮件作为 `login_hint`。 。 。 . 见 [EXAMPLES.md#企业连接](https://npmcn.com/package/%40auth0/auth0-spa-js/EXAMPLES.md#enterprise-connect) 为完整的设置和流动.
## 反馈
### 捐款
我们赞赏反馈和对这次再投资的贡献! 在开始前,请参看以下内容:
- [Auth0的一般贡献准则](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)
- [Auth0 行为守则准则](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)
- [这个Repo的贡献指南](https://github.com/auth0/auth0-spa-js/blob/main/CONTRIBUTING.md)
### 提出问题
请提供反馈或报告错误 [提出我们的问题追踪器](https://github.com/auth0/auth0-spa-js/issues)。 。 。 .
### 脆弱性报告
请不要在公共 GitHub 问题跟踪器上报告安全漏洞 。 这个 [负责任的披露程序](https://auth0.com/whitehat) 详细说明披露安全问题的程序.
## 什么是奥特?
Auth0是一个易于执行,可适应的认证和授权平台. 学习更多退房 [为什么是Auth0?](https://auth0.com/why-auth0)
这个项目根据麻省理工学院的许可证获得许可。 见 [自由主义](https://github.com/auth0/auth0-spa-js/blob/main/LICENSE) 需要更多信息的文件.
## 常见问题
### @auth0/auth0-spa-js 是什么？
Auth0 SDK 单页应用程序,使用授权代码 Grant Flow with PKCE
### 如何安装 @auth0/auth0-spa-js？
在项目目录运行 npm install @auth0/auth0-spa-js，或使用 pnpm add / yarn add / bun add。
### @auth0/auth0-spa-js 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @auth0/auth0-spa-js 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @auth0/auth0-spa-js 可以商用吗？
@auth0/auth0-spa-js 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @auth0/auth0-spa-js 的下载量有多少？
根据 npm 官方下载统计，@auth0/auth0-spa-js 在 2026/10/07 – 2026/11/05 这 30 天内被下载 11,775,270 次，日均约 392,509 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @auth0/auth0-spa-js 还在维护吗？
最新版本 2\.30\.0 发布于 2026/10/29（9 天前）；至今共发布 138 个版本，其中过去 12 个月发布了 41 个；首次发布于 2019/03/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。