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

Question

我正在使用 React 和 Express 创建一个 SPA。我正在尝试使用 MSAL.js 进行身份验证，并查看了Microsoft 的 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 一起使用。

您链接的教程文章指向使用隐式流的示例。我建议使用更安全的身份验证代码流。

本教程应满足您的需求。特别检查本节。

ps 对于 React 客户端应用程序，请参阅此。