使用angular-oauth2-oidc实现跨应用单点登录的最佳实践

在基于Angular的企业级应用中，经常会遇到多个应用之间需要共享认证状态的需求。本文将深入探讨如何使用angular-oauth2-oidc库实现跨应用的认证状态维护，特别是当用户在应用间跳转且刷新令牌过期时的处理方案。

跨应用认证的挑战

当企业系统由多个Angular应用组成时，用户可能需要在应用A和应用B之间跳转。使用OIDC协议进行认证时，每个应用都会维护自己的访问令牌和刷新令牌。这里存在一个典型问题：当用户在应用B停留时间超过应用A的刷新令牌有效期后，再返回应用A时，应用A的认证状态如何处理？

初始解决方案分析

最初的解决方案采用了较为复杂的逻辑：

1. 检测是否为从其他应用跳转回来
2. 尝试使用刷新令牌更新认证状态
3. 如果刷新失败且确认是从其他应用跳转，则清除存储并重新登录
4. 利用Keycloak的会话存在性实现自动登录

这种方案虽然可行，但存在几个问题：

• 代码复杂度高，维护困难
• 需要手动管理存储状态
• 存在竞态条件风险

优化方案：共享域下的简化实现

更优雅的解决方案是将多个应用部署在同一个域名下。这样可以利用浏览器的同源策略，使应用间共享sessionStorage。具体优势包括：

1. 令牌状态共享：应用A和应用B可以共享刷新后的令牌
2. 自动静默刷新：setupAutomaticSilentRefresh()可以跨应用工作
3. 简化代码：不再需要复杂的重定向检测和存储管理

优化后的核心代码变得非常简洁：

const authConfig: AuthConfig = {
  issuer: '配置中的颁发者',
  redirectUri: window.location.origin + '/appContext/',
  clientId: '客户端ID',
  responseType: 'code',
  scope: 'openid',
  showDebugInformation: true,
  waitForTokenInMsec: 300,
};

oauthService.configure(authConfig);
oauthService.setupAutomaticSilentRefresh();
return from(oauthService.loadDiscoveryDocumentAndTryLogin()).pipe(
  switchMap((flag) => {
    return someOtherInitOperations();
  }),
)

实现建议

1. 域名规划：确保相关应用使用相同的一级域名
2. 路径区分：通过不同的路径区分各个应用
3. 统一配置：共享认证配置，确保各应用使用相同的客户端ID和范围
4. 静默刷新：启用自动静默刷新功能以维护令牌有效性

注意事项

1. 如果无法实现同域部署，需要考虑其他SSO方案
2. 确保各应用的注销逻辑协调一致
3. 考虑使用Cookie而不是sessionStorage来延长会话持续时间
4. 测试各种边界情况，特别是令牌过期场景

通过这种方案，开发者可以构建更加稳定和用户友好的多应用系统，同时保持认证状态的一致性，提升用户体验。