https://github.com/FrankHassanabad/Oauth2orizeRecipes
但是我们正在努力将oauth2客户端认证集成到Web应用程序中,其中包括对路由器和通量实现的反应.
我们研究了许多git存储库,但没有得到任何正确的方法来做到这一点.
有什么实施指出我们如何实现？
再次感谢.
UPDATE
我们正在查看下面的知识库,但仍然不清楚我们如何使事情发挥作用.喜欢在哪里合并auth和oauth逻辑,以及使服务器/客户端发生什么事情.
https://github.com/rackt/react-router/tree/master/examples/auth-flow
https://github.com/andreareginato/simple-oauth2
解决方法
首先,您将需要一种机制来保护您的路由,我用更高级的组件这样做：
// 'Components/requireAuthentication'
import React,{ Component,PropTypes } from 'react'
import { connect } from 'react-redux'
import SignIn from './SignIn'
export default (ChildComponent) => {
class AuthenticatedComponent extends Component {
static propTypes = {
hasAuthToken: PropTypes.bool.isrequired
};
render () {
const { hasAuthToken } = this.props
return (hasAuthToken
? <ChildComponent {...this.props} />
: <SignIn />
)
}
}
const mapStateToProps = ({session}) => (session)
return connect(mapStateToProps)(AuthenticatedComponent)
}
这里的代码很简单,它导出一个函数,它期望一个反应组件作为唯一的参数.此ChildComponent是您要保护的组件.
hasAuthToken支持是这里的控件,如果它是true,那么ChildComponent将被渲染,否则它将渲染SignIn.注意,如果你不关心SEO,这个渲染SignIn的过程很好,但是如果你关心搜索引擎索引你的保护路由,你可能想要将用户redirect登录到一个登录路由.
最后,AuthenticatedComponent连接到redux存储会话状态,但这可以很容易地切换到使用您选择的任何其他通量库.简单地说,它正在订阅会话更改.如果hasAuthToken的值更改,则当前安装的组件将被重新呈现.
现在路线：
import { Route } from 'react-router'
import Container from './Components/Container'
import Private from './Components/Private'
import requireAuthentication from './Components/requireAuthentication'
export default (
<Route path='/' component={Container}>
<Route path='private' component={requireAuthentication(Private)}>
<Route path='other' component={...} />
</Route>
</Route>
)
这里我使用我要保护的组件的requireAuthentication方法(上面的代码中的默认导出方法).这将保持页面不被显示,除非redux store session.hasAuthToken属性为true,而是显示SignIn组件.
嵌套在受保护组件下的其他路由也将受到保护,因为反应路由器组成路由.
在高级别,SignIn组件应该是一个普通的< a href> (即不反应路由器Link)开始Oauth2握手. simple-oauth2模块有一些很好的例子,说明如何实现oauth2服务器端,所以我不会在这里.如果您正在关注这些示例,那么您要将用户链接到的app.get(‘/ auth’,function(req,res){})端点.
在回调端点中,您将希望以某种方式保持令牌(例如,对于您的会话(express-session将帮助此处)或数据库),然后将用户重定向到您的反应应用程序.
现在,您需要将您的会话进入服务器端的redux商店,以准备在客户端上进行水合. redux文档解释了如何在Server Rendering页面上,特别是Inject Initial Component HTML and State和The Client Side部分.至少你需要一个这样的对象：
{
hasAuthToken: (typeof req.session.token !== 'undefined')
}
当然,您的实际实现将完全取决于如何存储令牌并将其提供给服务器端请求.
希望这会让你开始.同样的过程也可以用于其他类型的身份验证,也可以用您的服务器作为XHR处理的用户名和密码表替换Oauth2链接.
最好的运气.
