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

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 连接客户端发生的身份验证。据我了解，必须传递身份验证 token ，但我不确定如何传递它。

服务器端示例代码有:

// 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 可能有必要的内容，但没有运气。

我陷入了困境，因为我不确定我是否对承载策略的工作原理有根本性的误解，是否错误地使用了 MSAL 或 Passport(或两者)，或者这是否是一个配置问题。我感谢您的帮助!

Answer 1

调用 protected REST API 时，您需要提供客户端应用程序(代表登录用户)获取的访问 token 。因此，ID token 在这里不起作用 - 它仅适用于您的客户端应用程序，作为成功用户身份验证的证明。 (理想情况下，您的客户端和服务应用程序应该是分开的，每个应用程序都由 Azure AD 应用程序注册代表)。

身份验证后，您需要使用 acquireToken* 方法之一获取访问 token 。您将 token 请求对象传递给该方法。您需要在此处指定您请求访问 token 的资源和权限。适用于调用 REST API 的访问 token 不应该/不会适用于其他 API。

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

This tutorial应该可以满足您的需求。检查this section特别是。

附:对于 React 客户端应用程序，请参阅 this .