使用 MSAL 对 Azure 静态 Web 应用中的函数进行授权答案

【问题标题】：Authorisation using MSAL for a function in Azure Static Web App使用 MSAL 对 Azure 静态 Web 应用中的函数进行授权
【发布时间】：2021-03-02 01:28:42
【问题描述】：

我正在尝试使用 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 应用程序公开了一个示例函数 GetMessage，它返回一些虚拟文本
如果到函数的路由不受保护，SPA 可以成功调用函数并将文本返回到浏览器/SPA
如果到函数的路由通过 routes.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 - 禁止。更改范围或用户角色似乎没有什么区别，尽管我可能缺少一个神奇的组合。

如果我调用的函数是 Micrsoft Graph（即 https://graph.microsoft.com/v1.0/me），则此过程完美运行——它仅在我们自己的静态 Web 应用程序函数上失败。我看不到访问 Azure 服务器端日志的方法，无法理解它可能失败的原因。

使用 AAD v1 流程，即调用 http://APP_URL/.auth/login/aad 可以完美运行 - 但它不使用访问令牌。它使用一个名为 StaticWebAppsAuthCookie 的 Cookie（对 APP_URL/.auth/login/aad 的一次调用就足以对用户进行身份验证和授权）。可以找到一个例子here

我知道 MSAL 是 Azure AD 正在发展的流程，那么有没有办法通过 MSAL 流程授权用户？专门使用 Azure AD、静态 Web 应用和在静态 Web 应用中公开的函数（不是作为独立的 Azure Function 应用）。

【问题讨论】：

标签： azure azure-active-directory azure-functions msal azure-static-web-app

【解决方案1】：

我相信在调用静态 Web 应用程序中包含的 Azure 函数 API 时，该服务会将自己的身份验证令牌插入到标头中。如果您依赖 Authorization Bearer 标头将您的令牌从应用程序传递到 api，它可能会被覆盖。

就我而言，我发送的是令牌：

{
  "typ": "JWT", 
  "alg": "RS256", 
  "kid": "{key value}"
}
{
  "iss": "https://{domain}.b2clogin.com/{tenant ID}/v2.0/", 
  "aud": "{client ID}",
  ...
}

但我的 Azure Functions API 正在接收令牌：

{
  "typ": "JWT", 
  "alg": "HS256", 
}
{
  "iss": "https://{ID}.scm.azurewebsites.net", 
  "aud": "https://{ID}.azurewebsites.net/azurefunctions",
  ...
}

这里正在跟踪此问题：https://github.com/Azure/static-web-apps/issues/34

【讨论】：