我正在尝试使用 Azure AD 和 MSAL 对使用 Azure 静态 Web 应用创建和公开的 Azure 函数进行身份验证和授权。如果我将应用配置为使用较旧的 AAD v1 流,但不使用 MSAL,则用户可以成功访问 API。设置/用例:
- 使用基本 HTML 和 JS 作为 Azure 静态 Web 应用程序部署和托管的单页应用程序 (SPA)(这是一个演示“Hello World”应用程序)
- 该应用程序使用 MSAL 集成了身份验证。具体来说msal-browser.js版本 2.6.1。使用以下方式检索身份令牌:
msal.PublicClientApplication(msalConfig).loginPopup(loginRequest)
其中 msalConfig 包含:
```
auth: {
clientId: "<CLIENTID>",
authority: "https://login.microsoftonline.com/<TENANT_ID>"
}
```
-
用户经过身份验证并返回身份令牌。
-
静态 Web 应用程序公开了一个示例函数获取消息返回一些虚拟文本
-
如果函数的路由不受保护,SPA 可以成功调用函数,并将文本返回到浏览器/SPA
-
如果到该功能的路由受到保护路线.json除非用户经过身份验证和授权,否则对该函数的请求(正确)将返回 401。
{
"routes": [
{
"route": "/api/*",
"allowedRoles": ["Authenticated"]
}
]
}
为了通过 MSAL 对用户进行身份验证,我尝试检索一个访问令牌,并将其放入函数调用的 Bearer 标头中:
```
async function getAPI() {
const currentAcc = myMSALObj.getAccountByHomeId(accountId);
if (currentAcc) {
const response = await getTokenPopup(silentRequest, currentAcc).catch(error => {
console.log(error);
});
console.log("Got token " + response.accessToken)
const accToke = response.accessToken
const headers = new Headers();
const bearer = `Bearer ${accToke}`;
headers.append("Authorization", bearer);
const options = {
method: "GET",
headers: headers
};
let { text } = await( await fetch('/api/GetMessage',options)).json();
document.querySelector('#name').textContent = text;
}
}
```
令牌在 jwt.ms 中检索并验证,但该函数始终返回 403 - 禁止。如果更改范围或用户角色似乎没有什么区别,尽管我可能缺少一个神奇的组合。
如果我调用的函数是 Microsoft Graph,则此过程完美运行 - 即https://graph.microsoft.com/v1.0/me https://graph.microsoft.com/v1.0/me- 它只是在我们自己的静态网络应用程序功能上失败。我看不到一种访问 Azure 服务器端日志的方法来了解它可能失败的原因。
使用 AAD v1 流程,即调用 http://APP_URL/.auth/login/aad 效果很好 - 但它不使用访问令牌。它使用名为 StaticWebAppsAuthCookie 的 Cookie(对 APP_URL/.auth/login/aad 的单个调用足以对用户进行身份验证和授权)。可以找到一个例子here https://blog.baeke.info/2020/06/01/first-look-at-azure-static-web-apps/
我了解 MSAL 是 Azure AD 正在走向的流程,那么有没有办法通过 MSAL 流程对用户进行授权?特别是使用 Azure AD、静态 Web 应用程序和静态 Web 应用程序中公开的函数(而不是作为独立的 Azure Function 应用程序)。