使用MSAL.js与Azure Active Directory保护spa中的REST API调用-如何将身份验证令牌传

Question

我正在使用React和Express创建SPA。我正在尝试使用MSAL.js包括身份验证，并查看了微软的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可能有必要的东西，但没有运气。

我被卡住了，因为我不确定我是否对承载策略如何工作有一个基本的误解，如果我使用MSAL或Passport(或两者)不正确，或者这是一个配置问题。谢谢你的帮助!

Answer 1

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

认证完成后，需要通过acquireToken*方法获取访问令牌。将令牌请求对象传递给该方法。在这里，您需要指定请求访问令牌的资源和权限。调用REST API的访问令牌不应该/不会与其他API一起工作。

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

本教程应该可以满足您的需求。请特别检查这一节

注。对于React客户端应用程序，请参见: