如何实现基于Okta的Angular（OIDC）应用与.NET（SAML2.0）应用间的单点登录（SSO）

这个场景其实是Okta跨协议SSO的典型应用，核心是利用Okta的全局用户会话打通SAML和OIDC两个认证体系。我之前帮团队做过类似的集成，下面是一步步的实现方案：

Okta的SSO基于自身的全局会话（oktaSessionId Cookie），不管用户是通过SAML还是OIDC完成登录，只要这个会话有效，访问同一租户下的其他应用时，Okta会自动完成身份验证，无需用户重复输入凭据。我们的目标就是让.NET（SAML）和Angular（OIDC）共享这个Okta全局会话。

• 首先，你的.NET SAML应用和Angular OIDC应用必须注册在同一个Okta租户下。
• 两者要使用相同的用户身份池：不管是Okta原生用户、AD/LDAP同步的内部用户，还是外部用户（比如Okta的外部身份提供商），必须保证用户在两个应用中是同一个身份实体（比如邮箱/用户名一致）。

• 确认.NET应用的SAML配置已正确完成：ACS URL、Entity ID等参数和Okta后台完全匹配。
• 在Okta的SAML应用设置中，开启**"Enable Single Logout"**（可选但推荐，保证登出一致性）。
• 关键：用户通过.NET应用登录时，Okta会自动创建全局会话（默认行为），只要登录流程正常即可，无需额外配置。

Angular这边用Okta官方的@okta/okta-angular SDK实现自动检测Okta会话并静默获取令牌：

1. 安装依赖：

npm install @okta/okta-angular @okta/okta-auth-js

2. 在app.module.ts中配置Okta Auth，重点开启自动登录和静默刷新：

import { NgModule } from '@angular/core';
import { OktaAuthModule, OktaAuth } from '@okta/okta-angular';

const oktaAuth = new OktaAuth({
  issuer: 'https://your-okta-domain.com/oauth2/default', // 替换为你的Okta issuer地址
  clientId: 'your-angular-oidc-client-id', // Okta中OIDC应用的Client ID
  redirectUri: window.location.origin + '/login/callback', // 回调地址，需提前在Okta中配置
  postLogoutRedirectUri: window.location.origin,
  autoLogin: true, // 核心：自动检测Okta全局会话，无需用户手动触发登录
  silentRefresh: true, // 静默刷新令牌，维持会话有效性
  silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html', // 静默刷新回调页，需提前创建
  pkce: true // 推荐开启PKCE，提升认证安全性
});

@NgModule({
  imports: [
    OktaAuthModule.forRoot({ oktaAuth })
    // 其他模块...
  ],
  // ...
})
export class AppModule {}

3. 创建silent-refresh.html放在Angular项目的src目录下（构建后会生成在根目录），内容如下：

<!DOCTYPE html>
<html>
<head>
  <title>Silent Refresh</title>
</head>
<body>
  <script src="https://global.oktacdn.com/okta-auth-js/6.9.0/okta-auth-js.min.js" type="text/javascript"></script>
  <script>
    const authClient = new OktaAuth({
      issuer: 'https://your-okta-domain.com/oauth2/default',
      clientId: 'your-angular-oidc-client-id'
    });
    authClient.handleSilentRefresh();
  </script>
</body>
</html>

4. 在Angular路由中配置登录回调路由：

import { OktaCallbackComponent } from '@okta/okta-angular';

const routes: Routes = [
  { path: 'login/callback', component: OktaCallbackComponent },
  // 其他业务路由...
];

如果Angular应用是作为图标嵌入到.NET落地页的iframe中，需要额外配置Okta允许跨域嵌入：

• 在Okta后台，进入Security > API > Trusted Origins，添加你的.NET落地页域名，勾选**"CORS"和"Redirect"**。
• 在Angular的OIDC应用设置中，找到**"Allowed iframe embed origins"**，添加.NET落地页的域名，确保静默刷新能正常执行。

1. 访问.NET落地页，用内部/外部用户完成SAML登录。
2. 点击Angular应用的图标，打开Angular应用（新标签页或iframe均可）。
3. 此时Angular的Okta SDK会自动检测到浏览器中存在Okta的全局会话，静默向Okta请求OIDC令牌，无需跳转登录页面，直接进入Angular应用。

• 如果Angular应用仍跳转到登录页：检查Okta的System Log，查看授权请求是否被拒绝，可能是用户没有Angular应用的访问权限，或者会话已过期。
• 跨域问题：确认Trusted Origins配置正确，查看浏览器控制台是否有CORS错误。
• iframe中静默刷新失败：检查silent-refresh.html是否能正常访问，并且Okta的Allowed iframe embed origins已正确配置。

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