如何在静态Web应用中获取Azure AD访问令牌？

Question

我有一个普通的 Vue.JS SWA，它通过 staticwebapp.config.json 中的这些设置使用标准 Azure AD 身份验证：

"auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/common/v2.0",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }

在 Azure AD 中注册了具有 AZURE_CLIENT_ID 的应用。身份验证是通过标准

/.auth/login/aad 

端点调用的。我可以成功登录和注销。 “/.auth/me”端点返回包含所有用户详细信息（角色、ID 等）和声明的 clientPrincipal 对象。

现在我想调用 MS graph API https://graph.microsoft.com/v1.0/我，但不知道如何获取访问令牌以在请求中设置授权标头。我可以看到设置了一个 AppServiceAuthSession cookie，但它不是令牌。
我已经看到了这个 https://stackoverflow.com/questions/59860238/how-to-convert-azure-cookie-appserviceauthsession-to-a-valid-oauth-jwt-access-to ，但是重建整个身份验证流程看起来没有必要，因为我已经登录了。

将不胜感激任何建议。非常感谢！

尝试按原样使用所有 MS Graph API，但正如预期的那样，收到“消息”：“访问令牌为空”。 还查看了 azure/msal-browser 模块，希望能够默默地获取令牌，但对于像我这样的 JS 新手来说，它看起来超级复杂且文档记录很差。

Answer 1

它看起来目前不支持，请参阅此 github 问题：将访问令牌添加到用户详细信息端点。

Answer 2

以下微软文档显示了代表用户获取访问权限，您可以参考此DOC 获取访问令牌。

希望这有帮助。

Answer 3

不幸的是，看起来此功能不适合Azure静态Web应用程序。

我找到了一个解决方法，可以帮助某人（如果您使用JavaScript MSAL）

可以使用从/。auth/Me endpoint检索到的loginhint来悄悄地检索您的auth token token。可以发送到您的后端API。

参见“ nofollow noreferrer”>应用有关更多信息

import { PublicClientApplication } from '@azure/msal-browser'

const response = await fetch('/.auth/me')

const data = await response.json()

const msal = new PublicClientApplication(config.aad)
await msal.initialize()

const loginResponse = await msal.ssoSilent({
  loginHint: data.clientPrincipal.userDetails,
})

const accessToken = loginResponse.accessToken

console.log(accessToken)