需要 React 路由器的 OAuth 2 客户端实现

need oauth 2 client implementation for react router

本文关键字：客户端 实现 OAuth React 路由器 需要      更新时间：2023-09-26

我们创建了自己的OAuth 2服务器，并从下面的代码库中实现了授权代码。https://github.com/FrankHassanabad/Oauth2orizeRecipes

但是我们正在尝试将OAuth2客户端身份验证集成到Web应用程序中，其中包括React Router和Flux实现。

我们调查了许多 Git 存储库，但没有得到任何正确的方法来做到这一点。

是否有任何实施措施可以指导我们如何实现这一目标？

再次感谢。

更新

我们正在研究下面的存储库，但仍然不清楚我们如何使事情工作。 比如在哪里合并身份验证和 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

我将尝试解释我使用 react-router 进行的高级身份验证。您将需要在服务器和客户端上实现，并且需要自己做出一些决定。在本例中，我将使用 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道具是这里的控件，如果为 true，则将渲染ChildComponent，否则将渲染SignIn。请注意，如果您不关心 SEO，则此呈现SignIn过程很好，但如果您确实关心搜索引擎索引受保护的路由，则可能需要将用户重定向到登录路由。

最后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 存储session.hasAuthToken属性为 true，而是显示SignIn组件。

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

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

在 callback 端点中，您需要以某种方式持久化token（例如，保存到您的会话（快速会话将在此处提供帮助）或数据库），然后将用户重定向回您的 react 应用程序。

现在，您需要将会话放入服务器端 redux 存储中，以准备在客户端上冻结会话。redux 文档在服务器渲染页面上解释了如何执行此操作，特别是注入初始组件 HTML 和状态以及客户端部分。至少你需要一个这样的对象：

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

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

希望这能让你开始。通过将 Oauth2 链接替换为服务器作为 XHR 处理的用户名和密码表单，此过程也可用于其他类型的身份验证。

祝你好运。

相关文章：