如何使用后端和前端分离的社交身份验证(Passport/Express/React) [英] How to do social auth with a decoupled backend and frontend (Passport / Express / React)

问题描述

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

I am trying to use passportJS / Express backend, and a react JS frontend, for social auth. However, I am not certain about how to go about doing so.

我已经阅读并实现了社交身份验证，当使用Google Auth登录时，该身份验证会返回由快递应用程序签名的JWT令牌.这使我可以使用Authorization标头访问后端的受保护端点.

I have did some reading and implemented social auth, which returns a JWT token signed by the express app when logged in with Google Auth. This allows me to access protected endpoints at the backend using the Authorization header.

但是，如何通过React触发此操作，特别是由于应该直接通过前端对Google进行调用(因此后端不使用Passport JS进行身份验证触发)?具体来说，当后端和前端都解耦时，这种流程应该是什么样子?

However, how does one trigger this via React, especially since a call to Google should be made directly via the frontend (and hence backend does not do the authentication trigger using Passport JS)? Specifically, how should this flow look like when both backend and frontend are decoupled?

推荐答案

实际上，发布后不久，我发现: https://medium.com/@alexanderleon/实现带有反应性宁静的api-9b44f4714fa的社交身份验证

Actually, lol shortly after posting, I just found this: https://medium.com/@alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa

骨感:

• 通过Google身份验证客户端
• 使用Google的令牌并将其发送到Express服务器；验证令牌是否已通过身份验证并匹配
• 如果两者都匹配，则发出要用于Express JS API调用的JWT令牌.这应该存储在localStorage中.

这篇关于如何使用后端和前端分离的社交身份验证(Passport/Express/React)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！