reactjs 前端与后端分离时的Azure Active Directory SSO(SAML协议),如何通知前端验证已完成?

j2datikz  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(253)

因此,我想添加SSO using Azure AD。我的堆栈由作为前端的React应用程序和作为后端的NestJS API(解耦)组成。
1.用户点击登录按钮
1.我创建一个新窗口(弹出窗口),将用户引导到Azure AD登录页面(图中的步骤3)
1.用户成功登录Azure AD后,Azure AD会将SAML响应POST到我提供给他们的重定向URL(比如http://myapp.com/saml)(图中的步骤5)(据我所知,此重定向URL必须是NestJS API中的端点,因为React前端无法处理POST请求。

  1. NestJS将处理post请求,获取所需信息,验证等,然后NestJS has to return a Token to the frontend somehow,以便前端将该令牌存储在cookie中,并能够在NestJS API的后续请求中使用它,以便NestJS能够知道该用户已登录(步骤6)。
    我对这种方法的问题是,我不知道当NestJS完成验证时,客户端将如何获得令牌。如果这是一个耦合应用程序,这将不是一个问题,因为后端将处理post请求,设置cookie并重定向用户。但在这种情况下,NestJS不能重定向用户,因为react处理路由。处理这种情况的正确方法是什么?我想也许可以通过使用websockets来实现...这样当NestJS处理post请求时,它可以向用户发送一条消息,该消息将包含令牌,然后前端可以将其添加到cookie中,并将用户重定向到一个受保护的页面。

0g0grzrc

0g0grzrc1#

(1)前端是否真的需要存储一个令牌,以便在后续请求时发送到后端?如果后端在图表中的步骤7设置了一个cookie,该怎么办?然后,该cookie将在后续请求时发送到后端。该cookie的作用域将限于后端的域名和路径。使令牌远离前端的好处是,您可以确保它们不会通过交叉访问而被安全访问。如果您的后端cookie设置了HttpOnly属性,则会对您的前端发起站点脚本攻击。
(2)如果您仍需要在步骤7中从后端向前端传递信息,则发送一个HTTP 301响应,将Location标头设置为前端的URL,并将您要传递的信息包含在URL的查询或散列部分中。例如,在步骤6中验证之后,在步骤7中,后端的HTTP 301响应可以将Location报头设置为https://my-frontend-domain.com?user=bob或https://my-frontend-domain.com#user=bob。如果使用?user=bob,则当浏览器请求https://my-frontend-domain.com/?user=bob时,将再次通过网络发送user=bob,而使用#user=bob则不会,这样前端的JavaScript就可以从URL中读取user=bob。

相关问题