Auth0 SPA JS 集成
使用 @auth0/auth0-spa-js 为任何基于浏览器的单页应用程序添加身份验证 —— 适用于 Vanilla JS、Svelte、SolidJS 和不使用 React、Angular 或 Vue 的任何 SPA 的低级 Auth0 SDK。
代理指令：在提供 SDK 设置说明之前，通过运行以下命令获取最新的发布版本：
gh api repos/auth0/auth0-spa-js/releases/latest --jq '.tag_name'
在所有依赖项行中使用返回的版本，而不是任何硬编码版本。如果命令失败，请回退到检查 https://github.com/auth0/auth0-spa-js/releases。
前提条件
支持 ES2017+ 的现代浏览器
npm 或 yarn（或用于无捆绑器应用程序的 CDN）
具有配置的单页应用程序的 Auth0 账户
如果您没有设置 Auth0，请参阅 auth0-quickstart
何时不使用
React SPAs（hooks，Auth0Provider）：使用 auth0-react
Angular SPAs（AuthModule，AuthGuard）：使用 auth0-angular
Vue 3 SPAs（createAuth0，useAuth0）：使用 auth0-vue
Next.js（服务器端会话，App Router）：使用 auth0-nextjs
Nuxt（服务器端 SSR）：使用 auth0-nuxt
Express 服务器端 Web 应用程序：使用 auth0-express
React Native / Expo 移动应用程序：使用 auth0-react-native
快速入门工作流
npm install @auth0/auth0-spa-js
或通过 CDN（无捆绑器）。运行以下命令以获取最新版本，然后在 HTML 中使用它：
VERSION=$(npm view @auth0/auth0-spa-js version)
有关使用 Auth0 CLI 的自动设置，请参阅 Setup Guide 以获取完整的脚本。
对于手动设置，创建 .env（Vite）：
VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id
在 Auth0 Dashboard 中，为您的单页应用程序设置：
允许的回调 URL：http://localhost:5173
允许的注销 URL：http://localhost:5173
允许的 Web 原点：http://localhost:5173
import { createAuth0Client } from '@auth0/auth0-spa-js';
const auth0 = await createAuth0Client({
domain: import.meta.env.VITE_AUTH0_DOMAIN,
clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
authorizationParams: {
redirect_uri: window.location.origin
}
});
// 处理登录后的重定向回调
const query = new URLSearchParams(window.location.search);
if ((query.has('code') || query.has('error')) && query.has('state')) {
await auth0.handleRedirectCallback();
window.history.replaceState({}, document.title, window.location.pathname);
}
代理指令：在添加新 UI 元素之前，搜索项目中现有的登录、注销、登录或注销按钮的点击处理程序。如果找到现有的处理程序，请将 Auth0 代码挂接到它们而不修改现有的 UI。仅当找不到现有的处理程序时才创建新按钮。
// 登录
document.getElementById('login-btn').addEventListener('click', async () => {
await auth0.loginWithRedirect();
});
// 注销
document.getElementById('logout-btn').addEventListener('click', () => {
auth0.logout({
logoutParams: {
returnTo: window.location.origin
}
});
});
// 根据身份验证状态更新 UI
const isAuthenticated = await auth0.isAuthenticated();
if (isAuthenticated) {
const user = await auth0.getUser();
console.log(user.name, user.email);
}
const accessToken = await auth0.getTokenSilently();
const response = await fetch('https://your-api.example.com/data', {
headers: {
Authorization:
Bearer ${accessToken}
}
});
代理指令：完成集成后，构建项目以验证它是否可以成功编译：
npm run build
如果构建失败，请分析错误输出并修复问题。常见的集成构建失败包括：
模块未找到：缺少 npm install @auth0/auth0-spa-js —— 运行安装命令
无法找到名称 'import.meta'：TypeScript 目标太低 —— 在 tsconfig.json 中设置 "target": "ES2020" 或更高
createAuth0Client 不是函数：错误的导入路径或无需捆绑的 CDN 使用
运行时环境变量未定义：Vite 需要 VITE_ 前缀；webpack/CRA 需要 REACT_APP_ 前缀
在每次修复后重新运行构建。跟踪构建-修复迭代次数。
失败检查：如果在 5-6 次修复尝试后构建仍然失败，请停止并询问用户使用 AskUserQuestion：“在几次修复尝试后，构建仍然失败。你想如何继续？”
让技能继续迭代修复 —— 继续构建-修复循环，进行另外 5-6 次尝试
手动修复 —— 显示剩余错误并让用户解决它们
跳过构建验证 —— 在没有成功构建的情况下继续
详细文档
设置指南 —— 自动设置脚本（Bash/PowerShell）、Auth0 CLI 命令、.env 配置、回调 URL 设置
集成模式 —— 令牌管理、调用 API、刷新令牌、组织、MFA、DPoP、错误处理、高级模式
测试和参考 —— 配置选项、声明参考、测试清单、常见问题、安全考虑
by