用途:为浏览器端单页应用(Vanilla JS、Svelte、SolidJS 及任何不使用 React、Angular、Vue 的 SPA)添加 Auth0 登录与令牌管理,底层使用 @auth0/auth0-spa-js。React、Angular、Vue、Next.js、Nuxt、Express、React Native 等场景应改用对应的 auth0-react、auth0-angular、auth0-vue 等技能。
主要能力:安装并初始化 Auth0 客户端;处理登录重定向回调;提供 loginWithRedirect、loginWithPopup、logout、isAuthenticated、getUser、getTokenSilently、checkSession 等方法;用 getTokenSilently 获取访问令牌并调用受保护 API;支持刷新令牌、组织、MFA、DPoP、错误处理等进阶模式(详见其 Integration Patterns 文档)。
使用方式:先安装 npm install @auth0/auth0-spa-js,或通过 CDN 引入;在 Auth0 Dashboard 配置 Allowed Callback URLs、Allowed Logout URLs、Allowed Web Origins;用 createAuth0Client 初始化并传入 domain、clientId、authorizationParams.redirect_uri;登录重定向后调用 handleRedirectCallback 并清理 URL 参数;最后运行 npm run build 验证编译。技能要求先通过 gh api repos/auth0/auth0-spa-js/releases/latest --jq '.tag_name' 获取最新版本号,失败则查看 GitHub releases 页面。
限制与注意:SPA 代码中绝不能包含 client_secret;令牌不要存 localStorage,应使用内存(默认)或 sessionStorage;domain 只写主机名,不带 https://;回调 URL 端口需与开发服务器一致;loginWithPopup 必须由用户手势直接触发;页面刷新时 getTokenSilently 报 login_required 通常需在 Allowed Web Origins 添加来源。构建失败时按提示修复,若 5–6 次仍失败应询问用户。具体配置项、声明参考与测试清单见其文档,资料未提供价格与平台细节。