草庐IT

javascript - react 路由器需要oauth 2客户端实现

coder 2024-05-11 原文

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

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

我们调查了许多 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

最佳答案

我将尝试用 react-router 解释我的高级 take 身份验证。您将需要在服务器和客户端上实现,并且您需要自己做出一些决定。对于这个例子,我将使用 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)
}

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

hasAuthToken prop 是这里的控件,如果为真则ChildComponent将被渲染,否则将渲染 SignIn .注意,这个渲染过程SignIn如果您不关心 SEO,那很好,但您可能想要 redirect如果您确实关心搜索引擎索引您的 protected 路线,请将用户添加到登录路线。

最后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属性为真,而是显示 SignIn组件。

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

在高层次上 SignIn组件应该只是一个带有普通 <a href> 的页面(即不是 react-router Link )开始 Oauth2 握手。 simple-oauth2模块有一些关于如何在服务器端实现 oauth2 的很好的例子,所以我不会在这里深入。如果您遵循这些示例,则为 app.get('/auth', function (req, res) {})您要将用户链接到的端点。

callback您将要保留 token 的端点以某种方式(例如,到您的 session (express-session 将在这里提供帮助)或到数据库),然后将用户重定向回您的 React 应用程序。

现在您需要将您的 session 放入服务器端 redux 存储中,以准备在客户端上进行水化。 redux 文档解释了如何在 Server Rendering 上执行此操作页面,特别是 Inject Initial Component HTML and StateThe Client Side部分。至少你需要一个像这样的对象:

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

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

希望这能让您入门。同样的过程也可以用于其他类型的身份验证,方法是将 Oauth2 链接替换为您的服务器作为 XHR 处理的用户名和密码形式。

祝你好运。

关于javascript - react 路由器需要oauth 2客户端实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34977898/

有关javascript - react 路由器需要oauth 2客户端实现的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  2. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息,尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中,我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中,就像这样defregister@title="Registration"@user=Use

  3. ruby-on-rails - Rails 3,嵌套资源,没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容,包括相关问题和stackoverflow上的答案,但仍然无法正常工作。我正在使用嵌套资源,但无法使表单正常工作。我总是遇到错误,例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  4. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词?例如,给定这样的路线:将“users”匹配到:“users#show”,通过:[:get,:post]我能实现这样的目标吗?users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作,但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文,我有一个设置cookie然后执行redirect_to:ba

  5. ruby-on-rails - 如何在 Rails 中设置路由的默认格式? - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式,每行不带“默认值”散列?谢谢。

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务,每x秒轮询一次队列,并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外,还有其他稳定的替代方案吗? 最佳答案 尽管启动基于Rails的持久任务是一种选择,但您可能希望查看更有序的系统,例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西,因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的,因为Rails上的启动时间通常为5-15秒,具体取决于您的硬件。不过,每天这样做几

  8. ruby - 在 TCPServer (Ruby) 中,我如何从客户端获取 IP/MAC? - 2

    我想在Ruby的TCPServer中获取客户端的IP地址。以及(如果可能的话)MAC地址。例如,Ruby中的时间服务器,请参阅评论。tcpserver=TCPServer.new("",80)iftcpserverputs"Listening"loopdosocket=tcpserver.acceptifsocketThread.newdoputs"Connectedfrom"+#HERE!HowcanigettheIPAddressfromtheclient?socket.write(Time.now.to_s)socket.closeendendendend非常感谢!

  9. ruby-on-rails - Rails 两条腿的 OAuth 提供商? - 2

    我有一个Rails2.3.5应用程序,其中包含我希望保护的API。没有用户-它是一个应用到应用风格的网络服务(更像是亚马逊服务而不是facebook),所以我想使用两条腿的OAuth方法来实现它。我一直在尝试使用oauth-plugin服务器实现作为开始:http://github.com/pelle/oauth-plugin...但它的构建需要三足(网络重定向流)oauth。在我深入研究对其进行更改以支持两条腿之前,我想看看是否有更简单的方法,或者是否有人有更好的方法让Rails应用程序实现成为两条腿的OAuth提供程序。 最佳答案

  10. ruby - cucumber 的路由问题 - 2

    我正在使用rails3和cucumber,除了这个小问题,一切都很顺利GivenIamonthe"editautomobile"pageNoroutematches{:controller=>"automobiles",:action=>"edit"}(ActionController::RoutingError)现在路径在paths.rb中设置为edit_automobile_path在routes.rb中我有汽车作为资源,我搭建了它所以请告诉我我遗漏了什么,清楚地定义了路线并且匹配,因为我运行了rake路线并看到了路线。请指出正确的方向 最佳答案

随机推荐