gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 01:56:40 26 4
gpt4 key购买 nike

我们已经创建了我们自己的 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com