使用React快速集成OneAuth
准备工作
本节介绍如何将OneAuth 与您的SPA应用集成,使用OneAuth作为SPA应用的用户存储库并实现用户登录。
如果您正在构建一个由服务器端渲染的Web应用,参考Web应用集成用户登录
前提条件:
-
已经具备了OneAuth的组织账户。如果没有?免费创建
-
具备基础的JavaScript开发经验
-
有SPA应用或正在构建的工程需要接入认证流程
如果你没有相关的应用,只是期望学习如何使用,建议参考如下的资料 :
React quickstart
教您构建Vue.js应用程序的基础知识,React Quickstart
或者,如果您想快速开始,只需下载一个应用示例,请下载我们的React示例。
在OneAuth控制台创建SPA应用
在您使用OneAuth可以登录用户之前,您需要在管理后台创建一个单页应用用于的OneAuth的 应用集成。
-
使用您的管理员帐户登录您的OneAuth组织。
-
在管理后台,选择 应用 > 应用
-
点击 创建应用
-
选择OIDC-Openid Connect认证方式
-
选择SPA 单页面应用 应用类型,点击下一步
-
填写应用名称,应用描述(可选)
-
用户授权方式选择Authorization Code,这将为您的SPA启用带有 PKCE 的授权码流,并能够在访问令牌过期时刷新访问令牌,而不会提示用户重新进行身份验证。
-
输入登录重定向的地址 ,例如,添加本地开发环境的地址:
[http://localhost:3000/callback](http://localhost:3000/callback)
,或者生产环境的地址:[https://app.example.com/callback](https://app.example.com/callback)
。 -
点击保存
-
添加CORS安