在Azure静态Web App中使用MSAL进行功能授权

在Azure静态Web App中使用MSAL进行功能授权,azure,azure-active-directory,azure-functions,msal,azure-static-web-app,Azure,Azure Active Directory,Azure Functions,Msal,Azure Static Web App,我正在尝试对Azure功能的用户进行身份验证和授权,该功能是使用Azure静态Web应用程序(使用Azure AD和MSAL)创建和公开的。如果我将应用程序配置为使用较旧的AAD v1流,但不使用MSAL,则用户可以成功访问API。设置/用例: 使用基本HTML和JS将单页应用程序(SPA)部署并托管为Azure静态Web应用程序(这是一个演示版“Hello World”应用程序) 该应用程序使用MSAL集成了身份验证。特别是msal-browser.js版本2.6.1。使用以下方法检索标识令

我正在尝试对Azure功能的用户进行身份验证和授权,该功能是使用Azure静态Web应用程序(使用Azure AD和MSAL)创建和公开的。如果我将应用程序配置为使用较旧的AAD v1流,但不使用MSAL,则用户可以成功访问API。设置/用例:

  • 使用基本HTML和JS将单页应用程序(SPA)部署并托管为Azure静态Web应用程序(这是一个演示版“Hello World”应用程序)
  • 该应用程序使用MSAL集成了身份验证。特别是msal-browser.js版本2.6.1。使用以下方法检索标识令牌:
其中msalConfig包含:

```
auth: {
        clientId: "<CLIENTID>",
        authority: "https://login.microsoftonline.com/<TENANT_ID>"
    }
```
为了通过MSAL对用户进行身份验证,我试图检索一个接入令牌,该令牌被放入函数调用的承载头中:

```
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,那么这个过程可以完美地工作——也就是说,它只是在我们自己的静态web应用程序函数上失败了。我看不到访问Azure服务器端日志的方法,无法理解为什么它可能会失败

使用AAD v1流,即调用http://APP_URL/.auth/login/aad 工作得很好-但它不使用访问令牌。它使用一个名为StaticWebAppsAuthCookie的Cookie(对APP_URL/.auth/login/aad的单个调用足以对用户进行身份验证和授权)。可以找到一个这样的例子


我知道MSAL是Azure广告正在走向的流程,所以有没有办法通过MSAL流程授权用户?特别是使用Azure AD,一个静态web应用程序和一个在静态web应用程序中公开的函数(不是作为一个独立的Azure函数应用程序)。

我相信,当调用静态web应用程序中包含的Azure函数API时,服务会将其自己的身份验证令牌插入头中。如果您依赖授权承载头将您的令牌从应用程序传递到api,它可能会被覆盖

在我的情况下,我正在发送令牌:

{
  "typ": "JWT", 
  "alg": "RS256", 
  "kid": "{key value}"
}
{
  "iss": "https://{domain}.b2clogin.com/{tenant ID}/v2.0/", 
  "aud": "{client ID}",
  ...
}
{
  "typ": "JWT", 
  "alg": "HS256", 
}
{
  "iss": "https://{ID}.scm.azurewebsites.net", 
  "aud": "https://{ID}.azurewebsites.net/azurefunctions",
  ...
}
但我的Azure函数API正在接收令牌:

{
  "typ": "JWT", 
  "alg": "RS256", 
  "kid": "{key value}"
}
{
  "iss": "https://{domain}.b2clogin.com/{tenant ID}/v2.0/", 
  "aud": "{client ID}",
  ...
}
{
  "typ": "JWT", 
  "alg": "HS256", 
}
{
  "iss": "https://{ID}.scm.azurewebsites.net", 
  "aud": "https://{ID}.azurewebsites.net/azurefunctions",
  ...
}
正在此处跟踪此问题: