Express,Passport-Google,React-维护正确的会话信息

时间:2018-12-20 06:04:45

标签: node.js reactjs express passport.js express-session

我已经花了几天时间试图了解我的问题,但是运气还不太好。

在我的node / express应用程序中使用passport-google,我想对用户进行身份验证并成功重定向到在其他端口上运行的React应用程序(使用create-react-app引导),并为此设置了正确的快速会话运行React的端口。

这是我的流程,问题以及我到目前为止所收集的内容:

  1. 用户在我的React应用程序上单击<a href="http://localhost:8000/auth/google">Login with Google</a>

  2. 护照会重定向并向用户显示登录屏幕,并最终将用户发送回我的快速应用程序上的auth/google/callback

  3. auth/google/callback将其成功重定向发送到端口3000上的我的React应用。

在这一点上,似乎要绑定到端口3000的Express会话已连接到端口8000。要清楚一点,在端口8000上调用自定义/session端点,该端点将Express会话发回,向我显示我想要,虽然从3000调用它却什么都没显示。我猜这是因为它最初在端口8000上发生。基于this post,我认为我可能是对的。

另外,真正令我困惑的是,当我在端口3000上重定向回我的React应用程序时,我看到了connect.sid cookie,它在端口8000上看到了正确的sessionId。不能同时工作。为什么将connect.sid设置在端口3000上,而对req.session的任何调用都没有提供护照信息?什么时候/如何设置?据我了解,护照是在序列化/反序列化过程中设置的

总的来说,我正在努力实现的可行性/值得付出的努力吗?我本以为我可以更轻松地解决这个问题,但是当您只使用服务器本身以及诸如ejs或模板语言之类的模板语言时,护照似乎是一个很好的身份验证策略。

最终我要做的是方便地从Google检索用户数据,这样我就可以用它来对我的数据库进行调用。我想如果我在React应用程序上将connect.sid作为cookie,我可以使用它在我的MongoStore上查找会话信息,该会话信息看起来像我所需的东西,但是最好只是注册该信息在我的会话中的服务器上?另外,我不确定是否可以通过ExpressSession上的httpOnly标志访问cookie并使用document.cookie来解析cookie是否是一个好习惯。我还在过去的项目中使用过WebSockets,将信息从服务器发送到客户端(以消除相同的问题),但是不确定这是否是我缺乏了解护照流程或解决问题的一种可行方法护照并不是用来减轻压力的。

以下是一些身份验证流程,没有特定顺序。任何想法,评论,建议或更正将不胜感激!

router.get("/google", passport.authenticate("google", { scope: ["profile"] }))
router.get(
    "/google/callback",
    passport.authenticate("google",
    {
        successRedirect: "http://localhost:3000",
        failureRedirect: "http://localhost:3000/auth-failed",
    }, (req, res) => {
        // empty
    })
)

app.use(
  session({
    secret: process.env.APP_SECRET || "keyboardcat",
    store: new MongoStore({ mongooseConnection: dbConnection }),
    resave: false,
    saveUninitialized: false,
    cookie: {
      httpOnly: false
    }
  })
)

passport.serializeUser((user, done) => {
    done(null, { _id: user._id })
})

passport.deserializeUser((id, done) => {
    User.findOne(
        { _id: id },
        (err, user) => {
            if (err) {
                console.log(err)
            }
            done(null, user)
        }
    )
})

旁注:实际上,我使用Next.js进行了此工作,因为它消除了处理不同端口的问题。如果我继续发现它是可行的解决方案,可以说服我放弃我的create-react-app。

0 个答案:

没有答案