使用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安全域名，选择API>安全域，点击添加域，填写名称和安全域的URI,例如本地调试环境[http://localhost:8080](http://localhost:8080), 或者生产环境的URIhttps://app.example.com
在新建的SPA应用的授权用户 Tab页面，选择授权给Everyone或需要限制在某个Group进行访问。

安装SDK

npm i --save @oneauth/sdk-core @oneauth/sdk-react

@oneauth/sdk-core 会提供登录登出和鉴权所需的方法，@oneauth/sdk-react 中会提供对路由的鉴权功能和准备好的登录重定向页面

@oneauth/sdk-core 可单独使用。也可搭配@oneauth/sdk-react 使用。本文使用@oneauth/sdk-core 和@oneauth/sdk-react 共同来完成集成。

配置 @oneauth/sdk-react

初始化时需要传入 issuer， clientId， redirectUri， scopes，这些值可以从 oneauth 控制台得到，

实例化@oneauth/sdk-core 和@oneauth/sdk-react

@oneauth/sdk-react 提供了一个登录重定向的页面，和一个鉴权路由。

你需要把登录重定向页面配置到路由当中。

并将需要鉴权的页面配置在鉴权路由之下。

实例化@oneauth/sdk-core

import OneAuth from '@oneauth/sdk-core'
import { Security, LoginCallback, SecurityRoute } from '@oneauth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
function App() {
 ?const oneAuth = new OneAuth({
 ? ?issuer: `kang.oneauth.cn/oauth/v1`,
 ? ?clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
 ? ?redirectUri: `[http://localhost:3000/callback](http://localhost:3000/callback)`,
 ? ?scopes: ['openid', 'profile', 'email'],
  })
 ?return <>{/** 省略 **/}</>
}
?
export default App
?

添加一个登录按钮

import OneAuth from '@oneauth/sdk-core'
import { Security, LoginCallback, SecurityRoute } from '@oneauth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
function App() {
 ?const oneAuth = new OneAuth({
 ? ?issuer: `kang.oneauth.cn/oauth/v1`,
 ? ?clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
 ? ?redirectUri: `[http://localhost:3000/callback](http://localhost:3000/callback)`,
 ? ?scopes: ['openid', 'profile', 'email'],
  })
 ?//添加一个登录按钮
 ?const login = () => oneAuth.login()
 ?return (
 ? ?<>
 ? ? ?<button onClick={login}>Login</button>
 ? ?</>
  )
}
?
export default App

添加路由

需要从@oneauth/sdk-react 中引入

<Security />

并放置到页面中。

然后将@oneauth/sdk-core 的实例传递给

<Security oneAuth={oneAuth} />
import './App.css'
import OneAuth from '@oneauth/sdk-core'
import { Security, LoginCallback, SecurityRoute } from '@oneauth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { About } from './about'
function App() {
 ?const oneAuth = new OneAuth({
 ? ?issuer: `kang.oneauth.cn/oauth/v1`,
 ? ?clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
 ? ?redirectUri: `[http://localhost:3000/callback](http://localhost:3000/callback)`,
 ? ?scopes: ['openid', 'profile', 'email'],
  })
 ?const login = () => oneAuth.login()
 ?return (
 ? ?<BrowserRouter>
 ? ? ?<div className="App">
 ? ? ? ?<Security oneAuth={oneAuth}>
 ? ? ? ? ?<button onClick={login}>Login</button>
 ? ? ? ? ?<br />
 ? ? ? ? ?<Link to="/home">Home</Link>
 ? ? ? ? ?<Link to="/about">About</Link>
 ? ? ? ? ?<Route path="/home">
 ? ? ? ? ? ?<h1>Home</h1>
 ? ? ? ? ?</Route>
 ? ? ? ? ?<Route path="/about">
 ? ? ? ? ? ?<h1>About</h1>
 ? ? ? ? ?</Route>
 ? ? ? ?</Security>
 ? ? ?</div>
 ? ?</BrowserRouter>
  )
}
?
export default App

添加登录重定向页面

配置登录重定向页面的路由时，

需与@oneauth/sdk-core 的实例化参数redirectUri一致。

import './App.css'
import OneAuth from '@oneauth/sdk-core'
import { Security, LoginCallback, SecurityRoute } from '@oneauth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { About } from './about'
function App() {
 ?const oneAuth = new OneAuth({
 ? ?issuer: `kang.oneauth.cn/oauth/v1`,
 ? ?clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
 ? ?redirectUri: `[http://localhost:3000/callback](http://localhost:3000/callback)`,
 ? ?scopes: ['openid', 'profile', 'email'],
  })
 ?const login = () => oneAuth.login()
 ?return (
 ? ?<BrowserRouter>
 ? ? ?<div className="App">
 ? ? ? ?<Security oneAuth={oneAuth}>
 ? ? ? ? ?<button onClick={login}>Login</button>
 ? ? ? ? ?<br />
 ? ? ? ? ?<Link to="/home">Home</Link>
 ? ? ? ? ?<Link to="/about">About</Link>
 ? ? ? ? ?<Route path="/home">
 ? ? ? ? ? ?<h1>Home</h1>
 ? ? ? ? ?</Route>
 ? ? ? ? ?<Route path="/about">
 ? ? ? ? ? ?<h1>About</h1>
 ? ? ? ? ?</Route>
 ? ? ? ? ?<Route path="/callback">
 ? ? ? ? ? ?<LoginCallback />
 ? ? ? ? ?</Route>
 ? ? ? ?</Security>
 ? ? ?</div>
 ? ?</BrowserRouter>
  )
}
?
export default App

添加安全路由

给 about 页面添加鉴权

如此一来，每次打开 about 页面时都会检查用户是否登录了。

如果没有登录则会跳转到登录页。

登录完成后会跳转回来。

import './App.css'
import OneAuth from '@oneauth/sdk-core'
import { Security, LoginCallback, SecurityRoute } from '@oneauth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { About } from './about'
function App() {
 ?const oneAuth = new OneAuth({
 ? ?issuer: `kang.oneauth.cn/oauth/v1`,
 ? ?clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
 ? ?redirectUri: `[http://localhost:3000/callback](http://localhost:3000/callback)`,
 ? ?scopes: ['openid', 'profile', 'email'],
  })
 ?const login = () => oneAuth.login()
 ?return (
 ? ?<BrowserRouter>
 ? ? ?<div className="App">
 ? ? ? ?<Security oneAuth={oneAuth}>
 ? ? ? ? ?<button onClick={login}>Login</button>
 ? ? ? ? ?<br />
 ? ? ? ? ?<Link to="/home">Home</Link>
 ? ? ? ? ?<Link to="/about">About</Link>
 ? ? ? ? ?<Route path="/home">
 ? ? ? ? ? ?<h1>Home</h1>
 ? ? ? ? ?</Route>
 ? ? ? ? ?<SecurityRoute path="/about">
 ? ? ? ? ? ?<About />
 ? ? ? ? ?</SecurityRoute>
 ? ? ? ? ?<Route path="/callback">
 ? ? ? ? ? ?<LoginCallback />
 ? ? ? ? ?</Route>
 ? ? ? ?</Security>
 ? ? ?</div>
 ? ?</BrowserRouter>
  )
}
?
export default App