需要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

我将尝试用react-router解释我的高级认证.您需要在服务器和客户端上实现,并且您需要做出一些决定.对于这个例子,我将使用redux作为flux库.

首先,您需要一种机制来保护您的路线,我使用更高阶的组件,如下所示:

// '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)
}

这里的代码非常简单,它导出一个函数,它将react组件作为唯一的参数.这ChildComponent是您要保护的组件.

该hasAuthToken道具是控制在这里,如果为真,那么ChildComponent将被渲染,否则会呈现SignIn.请注意,SignIn如果您不关心SEO ,则此渲染过程很好,但如果您关心索引受保护路由的搜索引擎,您可能希望将用户重定向到登录路由.

最后AuthenticatedComponent连接到redux存储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 store session.hasAuthToken属性为true,而是显示SignIn组件.

嵌套在受保护组件下的其他路由也将受到保护,因为react-router组成路由的方式.

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

在callback端点中,您将希望以token某种方式(例如,您的会话(快速会话将在这里帮助)或数据库),然后将用户重定向回您的反应应用程序.

现在,您需要将会话放入服务器端的redux存储区,以便在客户端上进行水合作用.redux文档解释了如何在Server Rendering页面上执行此操作,特别是Inject Initial Component HTML和State和Client Side部分.至少你需要一个像这样的对象:

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

当然,您的实际实现将完全取决于您如何存储令牌并将其提供给服务器端请求.

希望这会让你开始.同样的过程也可以用于其他类型的身份验证,也可以使用服务器作为XHR处理的用户名和密码表单替换Oauth2链接.

祝你好运.