SuperAPI AI 工具集

ping-orchestration-reactjs-journey-sdk

前端与建站

查看项目

更新于 10-16 03:42

技能介绍

用途:为 ReactJS 单页应用搭建完整认证流程,使用 Ping Orchestration JavaScript SDK(@forgerock/journey-client、@forgerock/oidc-client)对接 PingOne Advanced Identity Cloud(AIC)或 PingAM。支持两种模式:从零生成示例应用(含 package.json、vite.config.js、index.html、CSS、导航与视图),或仅生成 SDK 集成文件并指导接入现有 SPA。

主要能力:通过 OIDC well-known 端点发现配置 Journey 客户端;OIDC 客户端处理 OAuth 2.0 令牌交换、续期与撤销;自定义 useJourney Hook 管理分步认证;按回调类型渲染对应 React 组件;React Router 受保护路由;Context 管理认证状态;登录、注册、登出流程;通过 oidcClient.user.info() 展示用户资料;成功、错误与失败处理。

使用方式:需先收集 wellknownUrl、clientId、scope(默认 openid profile email)、redirectUri、journeyLogin、journeyRegister、appPort 等参数。安装依赖:npm install @forgerock/journey-client @forgerock/oidc-client react react-dom react-router-dom;可选 npm install @forgerock/protect。开发依赖:npm install --save-dev vite @vitejs/plugin-react。需在 PingAM/AIC 配置 CORS(允许来源、方法 GET/POST、指定请求头、允许凭据)并注册公共 SPA OAuth 客户端(授权码模式、Token 端点认证方式 none、重定向 URI、隐式同意)。随后创建 .env、constants.js、oidc.context.js、journey.hook.js、form.jsx、各回调组件、login/register/logout 视图、受保护路由、入口 index.jsx 与 public/callback.html。

适用场景:演示 Ping Orchestration JavaScript SDK 的示例应用;为现有 React SPA 增加认证、步进认证或任意 Journey/Tree 流程。

限制:要求 React 18+、React Router 6+、Vite、Node.js >= 18.12.0;wellknownUrl 须以 https:// 开头并以 /.well-known/openid-configuration 结尾;redirectUri 须为 https:// 或 http://localhost 开头的有效 URL,且端口应与 appPort 一致;scope 不含 openid 时会自动补上并提示。资料未提供收费、价格与效果信息。