文档
- 快速启动 - 使用 Auth0 快速向您的应用程序添加登录、登录和用户信息的交互式指南.
- 软件样本 - 与Auth0合并的完整样本应用程序.
- 问题 - 经常问关于Auth0 -spa -js SDK的问题.
- 实例 - 常见情况代码样本.
- Docs 站点 - 探索我们的Docs网站, 了解更多关于Auth0.
开始
安装
使用 无 在工程目录中运行以下命令:
npm install @auth0/auth0-spa-js
来自CDN:
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.30/auth0-spa-js.production.js"></script>
配置 Auth0
创建一个 单页应用程序 输入 Auth0 剪贴板。 。 。 .
如果你在使用现有的应用程序,验证您在您的单页应用程序中配置了以下设置:
- 点击应用程序页面的“ 设置” 标签 .
- 向下滚动并点击"显示高级设置"链接.
- 在"高级设置"下,点击"OAuth"分页.
- 确保“JsonWebToken 签名算法”设定为
RS256而"OIDC Conformant"是启用的.
其次,在“设置”页面的“应用程序 URIs”栏下为您的应用程序配置以下URL:
- 允许召回 URL数字 :
http://localhost:3000 - 允许登录 URL数字 :
http://localhost:3000 - 允许的 Web 来源数字 :
http://localhost:3000
这些 URL 应当反映您应用程序运行的源代码 . 允许召回 URL 也可能包括一个路径,取决于你处理回调的地方(见下文).
注意到 客户身份 财务报告和审定财务报表 域名 “基本信息”栏下的数值。 下一步你需要这些价值.
配置 SDK
创建一个 Auth0Client 在提交或初始化您的申请之前。 你只应该有一个客户的例子.
import { createAuth0Client } from '@auth0/auth0-spa-js';
//with async/await
const auth0 = await createAuth0Client({
domain: '<AUTH0_DOMAIN>',
clientId: '<AUTH0_CLIENT_ID>',
authorizationParams: {
redirect_uri: '<MY_CALLBACK_URL>'
}
});
//or, you can just instantiate the client on its own
import { Auth0Client } from '@auth0/auth0-spa-js';
const auth0 = new Auth0Client({
domain: '<AUTH0_DOMAIN>',
clientId: '<AUTH0_CLIENT_ID>',
authorizationParams: {
redirect_uri: '<MY_CALLBACK_URL>'
}
});
//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 您创建的示例 :
<button id="login">Click to Login</button>
//redirect to the Universal Login Page
document.getElementById('login').addEventListener('click', async () => {
await auth0.loginWithRedirect();
});
//in your callback route (<MY_CALLBACK_URL>)
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 通过刷新式赠款更新范围和路线.
import { createAuth0Client, RefreshTokenMode } from '@auth0/auth0-spa-js';
const auth0 = await createAuth0Client({
domain: '<AUTH0_DOMAIN>',
clientId: '<AUTH0_CLIENT_ID>',
useRefreshTokens: true,
refreshTokenMode: RefreshTokenMode.Online,
useDpop: true,
authorizationParams: {
redirect_uri: '<MY_CALLBACK_URL>'
}
});
refreshTokenMode 是一个子选项 useRefreshTokens: 它默认为 RefreshTokenMode.Offline (上述旋转刷新符号),必须设置为 RefreshTokenMode.Online 用于在线刷新托肯斯。 在线模式都要求 useRefreshTokens: true 财务报告和审定财务报表 useDpop: true。见 在线访问 以全向导.
实验中心
[注] 实验中心通过SDKs的支持目前正在早期访问中. 要请求访问此功能, 请联系您的 Auth0 代表 .
实验中心 允许您测试您的登录流量。 Auth0 指定每个用户到一个变体服务器侧. 当需要强制特定变体——用于测试或应用地标工具的决定时——通过 experiment_id 财务报告和审定财务报表 variation_id 在登录通话中 :
await auth0.loginWithRedirect({
authorizationParams: {
experiment_id: '<EXPERIMENT_ID>',
variation_id: '<VARIATION_ID>'
}
});
推翻仅适用于该请求。 下一个没有这些参数的登录返回到正常的服务器侧任务 .
通过这些 每一次通话 而不是在 authorizationParams 在客户端构建时, 覆盖不会影响沉默 prompt=none 代号-续约电话(实验中心不运行于这些).
测试: 从测试自动化(如Cypress、Playwright)驱动,其中的ID从一个CI环境变量读取,对接一个中转租户。 在已运出的申请代码中不要使用硬码变体ID.
用于生产: 从一个特性旗工具(例如LOANDAKLY)中通过变种决定,该工具已经决定了用户应该看到的变种.
匿名会话
[注] 匿名会话通过SDKs的支持目前处于早期访问中. 要请求访问此功能, 请联系您的 Auth0 代表 .
匿名会议在访问者登录前会指定一个持续身份. 设定 createAnonymousSessionOnFailedSilentAuth: true 使 SDK 在 checkSession() 找不到认证用户 .
// createAuth0Client calls checkSession() internally — the anonymous session is ready on init
const auth0 = await createAuth0Client({
domain: '<AUTH0_DOMAIN>',
clientId: '<AUTH0_CLIENT_ID>',
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'
});
见 匿名会话 完整指南,包括带有元数据的明确会话创建、多个受众和登录.
更多实例
涵盖各种情景的综合实例,包括伐木、调用API、刷新信使、在线访问、组织、密码、外交部、DPoP等等,请参见 缩略语.md 文档.
API 参考
探索Auth0-spa-js中可用的API方法.
企业连接
Entertainment Connect让B2B SaaS应用程序添加企业SSO而不替换其已存在的认证堆栈.
SDK的出口 isFederatedDomain 用于电子邮件域搜索;然后以 loginWithRedirect 使用电子邮件作为 login_hint。 。 。 .
见 EXAMPLES.md#企业连接 为完整的设置和流动.
反馈
捐款
我们赞赏反馈和对这次再投资的贡献! 在开始前,请参看以下内容:
提出问题
请提供反馈或报告错误 提出我们的问题追踪器。 。 。 .
脆弱性报告
请不要在公共 GitHub 问题跟踪器上报告安全漏洞 。 这个 负责任的披露程序 详细说明披露安全问题的程序.
什么是奥特?
Auth0是一个易于执行,可适应的认证和授权平台. 学习更多退房 为什么是Auth0?
这个项目根据麻省理工学院的许可证获得许可。 见 自由主义 需要更多信息的文件.