Question

我们已经创建了我们自己的oauth 2服务器，其代码库具有授权代码实现。 https://github.com/FrankHassanabad/Oauth2orizeRecipes

但我们正在尝试将oauth2客户端身份验证集成到Web应用程序中，其中包括反应路由器和流量实现。

我们调查了很多git存储库，但没有得到任何正确的方法来执行此操作。

是否有任何实施指向我们如何实现？

再次感谢。

更新

我们正在查看下面的存储库，但仍然不清楚我们如何使工作。比如在哪里合并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的过程很好，但如果您关心搜索引擎索引您的搜索引擎，您可能希望redirect用户使用登录路线受保护的路线。

最后AuthenticatedComponent连接到redux store session状态，但可以很容易地将其切换为使用您选择的任何其他flux库。简而言之，它正在订阅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握手。 simple-oauth2模块有一些关于如何实现oauth2服务器端的很好的例子，所以我不想进入这里。如果您关注这些示例，则表示您要将用户链接到的app.get('/auth', function (req, res) {})端点。

在callback端点中，您希望以某种方式（例如，您的会话（express-session将在此处提供帮助）或数据库）保留token，然后将用户重定向你的反应应用程序。

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

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

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

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

祝你好运。

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

1 个答案: