创建单页面应用的“身份应用”
您可以使用“SiX统一认证与授权”为您的“单页面应用程序 (SPA)”创建“身份提供商 (IdP)”。
提示
通过“SiX统一认证与授权”控制台 或 API 创建的 IdP 应该与一个或多个“OAuth2客户端”关联。
如果您将多个“OAuth2客户端”关联到同一个IdP并将这些客户端设置给不同的SPA，则该IdP的用户将获得这些SPA的单点登录能力（SSO）。
“IdP/OAuth2客户端”支持开箱即用的“OIDC/OAuth2”协议。
交互流程
以下是一个或多个 SPA 利用“SiX统一认证与授权”为 SPA 用户实现 SSO 的典型流程。
有关 OIDC 协议和 authorization_code 授权流程，请参阅：OpenID Connect Basic Client 实施指南
为SPA创建IdP的步骤
1. 创建身份应用程序
登录“SiX统一认证与授权”控制台。
导航到菜单：“认证管理->创建身份应用”为SPA创建身份应用程序。
2. 创建一个公共OAuth2客户端并将其与身份应用程序关联
登录“SiX统一认证与授权”控制台。
导航到菜单：“授权管理->创建授权客户端”以创建OAuth2客户端并将此客户端绑定到上一步中创建的“身份应用程序”。
提示
请注意，对于 SPA，应使用一个公共OAuth2客户端。
3. 将一个OAuth2客户端模块安装到您的 SPA 中。
根据您 SPA 使用的框架（如 Vue、React、Angular），安装标准的社区 OAuth2/OIDC 客户端库，例如 oidc-client-ts 或 auth0-spa-js。
通过配置以下来自 “SiX统一认证与授权” IdP 的元数据来设置您的 SPA：
- 客户端 ID (Client ID)：在步骤 2 中创建的公共客户端的唯一标识符。
- 授权端点 (Authorize Endpoint)：SPA 将用户重定向以进行身份验证的 URL。
- 令牌端点 (Token Endpoint)：SPA 用于将授权码交换为令牌的 URL。
- 重定向 URI (Redirect URI)：在您的 OAuth 客户端配置中注册的回调 URL。
完成配置后，由 SPA 发起授权码模式 (Authorization Code Flow)（为了增强安全性，建议配合 PKCE 使用）。登录成功后，IdP 将重定向回您的应用程序，并提供获取身份令牌（ID Token）和访问令牌（Access Token）所需的凭据。
提示
请参阅下面的 IdP 示例屏幕截图和一个基于 VUE 的 SPA 的示例代码。
高级功能
客户品牌 IdP
创建的 IdP 可以配置为匹配客户品牌风格，例如使用公司徽标、字体、颜色等。
支持多个身份验证源
除了“SiX统一认证与授权”平台租户提供的UI和认证流程之外，您还可以将身份验证委托给其他来源，例如其他 OIDC 身份提供商或 SAML2 身份提供商。平台将负责此身份验证委托。
更多信息请参阅：
IdP 共享到子组织
您可以将您的身份应用程序共享给其子组织，然后子组织可以直接使用此身份应用程序。
一个典型的例子是：您可以在企业级创建一个 IdP，并将其共享给所有部门，您企业中的所有员工都可以使用同一个 IdP。
示例
SPA IdP示例1截图
SPA IdP示例2截图
SPA IdP 示例代码仓库
提示
如果您无法访问仓库，请通过联系我们 上的联系信息与我们联系