使用 MSAL.js 和 Azure Active Directory 保护 SPA 中的 REST API 调用 - 如何将身份验证令牌传递给承载策略

Question

我正在使用 React 和 Express 创建 SPA。我正在尝试使用 MSAL.js 包括身份验证并查看了 Microsoft's tutorials for SPA。我已经能够使用 @msal-react 通过 React 实现这一点。虽然这会执行身份验证，但它不会保护 REST API 免受未经身份验证的用户的访问。

我发现 Active Directory Javascript Nodejs Web API 似乎提供了一种使用 Passport 和 Bearer 策略来保护 REST API 的方法，但是显示如何将其与客户端耦合的链接似乎被打破了。

我不确定如何将客户端发生的身份验证与 REST API 连接起来。据我了解，身份验证令牌必须通过，但我不确定如何通过。

服务器端示例代码有：

// API endpoint exposed
app.get("/api",
    passport.authenticate('oauth-bearer', {session: false}),
    (req, res) => {
        console.log('Validated claims: ', req.authInfo);

        // Service relies on the name claim.  
        res.status(200).json({
            'name': req.authInfo['name'],
            'issued-by': req.authInfo['iss'],
            'issued-for': req.authInfo['aud'],
            'scope': req.authInfo['scp']
        });
    }
);

我在客户端尝试做的是获取账户信息：

import {
  useAccount,
  useMsal
} from "@azure/msal-react";

...

const { accounts } = useMsal();
const account = useAccount(accounts[0] || {});

通过验证后查看 account，我认为 account.idTokenClaims 可能有必要的东西，但没有运气。

我被卡住了，因为我不确定我是否对 Bearer 策略的工作原理有根本性的误解，我是否错误地使用了 MSAL 或 Passport（或两者），或者这是一个配置问题。感谢您的帮助！

Answer 1

调用受保护的 REST API 时，您需要出示客户端应用程序获得的访问令牌（代表登录用户）。因此 ID 令牌不会在这里使用 - 它仅适用于您的客户端应用程序，作为成功的用户身份验证的证明。（理想情况下，您的客户端和服务应用程序应该是分开的，每个都由一个 Azure AD 应用程序注册表示）。

身份验证后，您需要使用 acquireToken* 方法之一获取访问令牌。您将令牌请求对象传递给该方法。在这里您需要指定您请求访问令牌的资源和权限。可用于调用您的 REST API 的访问令牌不应与其他 API 一起使用。

您链接的教程文章指向使用 implicit flow 的示例。我建议使用更安全的 auth code flow.

This tutorial should cover your need. Check this section 特别是

p.s。对于 React 客户端应用程序，请参阅 this.

使用 MSAL.js 和 Azure Active Directory 保护 SPA 中的 REST API 调用 - 如何将身份验证令牌传递给承载策略

Securing REST API Calls in SPAs using MSAL.js with Azure Active Directory - How to Pass Authentication Token to Bearer Strategy

authentication

azure

azure-active-directory

passport.js

msal.js