需要oauth 2客户端实现反应路由器

Question

我们已经从下面的代码库创建了我们自己的oauth 2服务器，授权代码实现。 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

https://github.com/LearnBoost/superagent-oauth

https://github.com/zalando/superagent-oauth2-client

Answer 1

我会试图解释与反应，我的路由器高水平采取认证。您需要在服务器和客户端上实施，并且您需要做出一些决策才能使自己成为可能。在这个例子中，我将使用redux作为通量库。

首先，你需要一个机制来保护你的路线，我这样做是有高阶组件，像这样：

// '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 prop是这里的控件，如果它是真的，那么将会呈现ChildComponent，否则会呈现SignIn。请注意，如果您不关心搜索引擎优化，那么呈现SignIn的这一过程很好，但如果您关心的是搜索引擎将您的受保护路线编入索引，则您可能希望redirect用户登录路线。

最后AuthenticatedComponent连接到还原存储session状态，但这可以很容易地切换到使用您选择的任何其他通量库。简而言之，它订阅session上的更改。如果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存储库session.hasAuthToken属性为true，而是显示SignIn组件。

嵌套在受保护组件下的其他路由也将受到保护，因为react-router组成路由。

在高级别，SignIn组件应该简单地是具有正常的<a href>（即不响应路由器Link）的页面以开始Oauth2握手。 simple-oauth2模块有一些关于如何实现oauth2服务器端的很好的例子，所以我不会在这里进入。如果您正在关注这些示例，那么您希望将该用户链接到端点app.get('/auth', function (req, res) {})。

在你将要持续的token不知何故callback端点（如您的会话（express-session将帮助在这里），或到数据库），然后将用户重定向回您的应用程序的反应。

现在，您需要将您的会话导入服务器端的REDX存储库，以准备在客户端进行水合。该redux文档解释了如何在Server Rendering页面上执行此操作，特别是Inject Initial Component HTML and State和The Client Side部分。最起码，你需要这样的对象：

{ 
    hasAuthToken: (typeof req.session.token !== 'undefined') 
} 

当然，你的实际执行情况将完全取决于你如何存储的令牌，并把它提供给服务器端请求。

希望这会让你开始。同样的过程也可以用于其他类型的认证，也可以用服务器作为XHR处理的用户名和密码来替换Oauth2链接。

好运。