这是前端的 React 应用程序和后端的 Express 应用程序使用 Azure AD 对用户进行身份验证和授权的正确流程吗?

Is this a right flow for React app on frontend and Express app on backend to authenticate and authorize users with Azure AD?

  1. 我在前端有 React 应用程序,我已在 Azure AD 上将其注册为 REACT_AZURE 并且我使用 @azure/msal-react npm 包对用户进行身份验证。

  2. 为了保护我的 Express 路线,我在 Azure AD 上注册了另一个应用 API_AZURE,并在“公开 API”部分添加了范围 'access_as_user'.

  3. 在 REACT_AZURE 应用的“API 权限”部分,我添加了 'access_as_user' 的权限。 现在我可以获取 'access_as_user' 范围的访问令牌并对我的快速服务器进行 API 调用。

  4. 在我的受保护路由中,我正在使用 passport-azure-ad BearerStrategy 来验证访问令牌,如果它有效,我就有权获取资源。

这是正确的流程吗?我是否必须向 Azure AD 注册两个应用程序?如果没有,我该怎么做才正确?

Is this the right flow? Do I have to register two apps with Azure AD? if not, how do I do it right?

当然,你的过程是完全正确的。您需要在 Azure 中注册两个应用程序,一个代表客户端应用程序,另一个代表 api 应用程序。然后暴露api应用的api,将客户端应用添加到api应用中。然后让用户登录客户端应用完成认证并获取token,并使用token调用api。我之前回答过,你可以参考

但我不确定您是否要根据用户角色控制哪些用户可以访问 api。如果您只希望租户中的某些用户访问 api,那么您可以添加一个步骤,即创建一个 app 角色 并授予您希望访问的用户到 api。那么租户中未被授予 app 角色 的用户将无权访问 api。参见