同时访问两个OKTA+Angular+Spring Boot应用时出现invalid_client错误求助

核心原因 #

• 浏览器存储冲突：两个应用共享浏览器的Cookie、本地存储/会话存储空间，OKTA的认证会话信息（包含client_id）会被后启动的应用覆盖，导致切换应用时请求携带错误的client_id，触发invalid_client错误。
• OKTA SDK配置未隔离：Angular端的OKTA SDK默认使用通用键存储认证状态，未为每个应用设置独立标识，导致状态互相干扰。

解决方案 #

1. 为每个Angular应用配置独立的存储键 #

修改Angular应用的OKTA配置文件（如app.module.ts），为每个应用设置唯一的storageKey，确保认证状态存储互不干扰：

// 应用1的OKTA配置
const oktaConfig = {
  issuer: 'https://你的OKTA域名/oauth2/default',
  clientId: '应用1的client-id',
  redirectUri: window.location.origin + '/login/callback',
  storageKey: 'okta-app1-auth-state' // 唯一标识，与应用2不同
};

// 应用2的OKTA配置
const oktaConfig = {
  issuer: 'https://你的OKTA域名/oauth2/default',
  clientId: '应用2的client-id',
  redirectUri: window.location.origin + '/login/callback',
  storageKey: 'okta-app2-auth-state' // 独立的存储键
};

2. 隔离OKTA应用的Cookie设置 #

在OKTA控制台为每个应用配置独立的Cookie参数，避免跨应用共享会话Cookie：

• 登录OKTA控制台，进入对应应用的设置页面
• 切换到「Login」标签，找到「Cookie Settings」
• 为每个应用设置不同的Path（比如本地应用用不同端口的话，可设为/app1、/app2），或确保Cookie Domain仅对应当前应用的访问路径。

3. 验证Spring Boot后端配置正确性 #

检查每个Spring Boot应用的配置文件（application.properties/application.yml），确保client_id与OKTA控制台中对应应用的配置完全一致，没有混用：

# 应用1配置
okta.oauth2.issuer=https://你的OKTA域名/oauth2/default
okta.oauth2.client-id=应用1的client-id
okta.oauth2.client-secret=应用1的client-secret

# 应用2配置
okta.oauth2.issuer=https://你的OKTA域名/oauth2/default
okta.oauth2.client-id=应用2的client-id
okta.oauth2.client-secret=应用2的client-secret

4. 临时验证方案 #

使用浏览器的隐私窗口分别打开两个应用，此时浏览器会隔离Cookie和本地存储，可快速确认是否为存储冲突导致的问题。

内容的提问来源于stack exchange，提问作者Ram