如何使用分离的后端和前端（Passport / Express / React）进行社交身份验证

Posted 2023-03-08

【中文标题】如何使用分离的后端和前端（Passport / Express / React）进行社交身份验证

【英文标题】：How to do social auth with a decoupled backend and frontend (Passport / Express / React)

【发布时间】：2018-10-15 06:37:43

【问题描述】：

我正在尝试使用 passportJS / Express 后端和 react JS 前端来进行社交身份验证。但是，我不确定如何去做。

我已经阅读并实现了社交身份验证，它在使用 Google 身份验证登录时返回由 express 应用程序签名的 JWT 令牌。这允许我使用 Authorization 标头访问后端受保护的端点。

但是，如何通过 React 触发这一点，尤其是因为应该通过前端直接调用 Google（因此后端不使用 Passport JS 进行身份验证触发）？具体来说，当后端和前端都解耦时，这个流程应该如何？

【参考方案1】：

实际上，哈哈，在发布后不久，我发现了这个： https://medium.com/@alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa

瘦子：

通过 Google 验证客户端 使用谷歌的令牌并发送到快递服务器；验证令牌是否经过身份验证和匹配 如果两者都匹配，则发出用于 Express JS API 调用的 JWT 令牌。这应该存储在 localStorage 中。

【讨论】：

在本地存储中存储访问令牌被认为是一种不好的做法，并且会导致安全漏洞。考虑将令牌存储在内存或会话中。