准备工作
本节介绍如何将XAuth 与您的SPA应用集成，使用XAuth作为SPA应用的用户存储库并实现用户登录。
如果您正在构建一个由服务器端渲染的Web应用，参考Web应用集成
前提条件：
- 已经具备了XAuth的组织账户。如果没有？免费创建
- 具备基础的JavaScript开发经验
- 有SPA应用或正在构建的工程需要接入认证流程
如果你没有相关的应用，只是期望学习如何使用，建议参考如下的资料 ：
React quickstart
教您构建React应用程序的基础知识，React Quickstart
或者，如果您想快速开始，只需下载一个应用示例，请下载我们的React示例。
Vue.js quickstart
教您构建Vue.js应用程序的基础知识，Vue Quickstart,Vue 3.0 Quickstart
或者，如果您想快速开始，只需下载一个应用示例，请下载我们的Vue2.0示例,Vue3.0示例,
SPA与刷新令牌（Refresh token）
作为公共客户端实现的单页应用（SPA）程序，无法安全地在浏览器中存储和处理刷新令牌，因此必须使用不依赖刷新令牌的方法，除非其授权服务器对刷新令牌的泄漏风险采取了安全措施（如使用刷新令牌轮换或具有使用约束条件的刷新令牌）。在许多情况下，尤其是对于公共客户机的SPA应用，发行到期时间较短的访问令牌并在需要时更新令牌被认为是一种最佳做法，因此在用户会话存在的整个过程中都可能需要更新新令牌。
但是，将用户重定向到OpenID提供方并返回会带来用户体验的挑战，有可能会中断用户的体验，因此通常不希望在正常导航期间将用户重定向到登录页面。为了避免这种破坏性重定向，一个改进的措施是在应用程序中使用隐藏的iframe进行重定向，/authorize 端点允许使用名为 prompt 的请求参数，并将prompt参数设置为none，以避免中断用户体验。如果 prompt 参数的值为 none，这将保证不会提示用户登录，无论他们是否有活动会话。
如果用户具有有效会话，则应用程序将接收新令牌。如果没有，应用程序将收到错误响应，并且可以再次重定向用户，而无需使用prompt=none选项触发身份验证。XAuth在提供SDK中包含相关的设计，使应用程序更容易执行此操作。到目前为止，prompt参数是 SPA 维持用户会话而不提示用户多次登录的唯一最佳实践。
智能跟踪防护 (ITP) 和增强型跟踪防护 (ETP) 等浏览器隐私控制的引入会影响浏览器处理第三方 cookie 的方式。这些浏览器隐私控制防止使用 XAuth 会话 cookie 以静默方式更新用户会话，这会迫使用户重新进行身份验证，对无缝的用户体验产生影响。
刷新令牌轮换为 SPA 提供了一种在 ITP 浏览器中维护用户会话的解决方案。由于刷新令牌独立于任何 cookie，因此您不必依赖 XAuth会话 cookie 来更新访问和 ID 令牌。
Tips:如果应用程序和 XAuth 在同一个域中，并不会受到影响，您仍然可以使用 XAuth 会话 cookie 并静默更新令牌。
