使用 Azure AD 通过 Web API 验证 Vue

Question

我正在尝试查询来自 AzureAD protected WebAPI from Vue using vue-msal 的数据。

WebApi：58ca819e- 是在 AzureAD 中注册的 webapi 应用程序 ID

"AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "58ca819e-",
    "TenantId": "3a0cf09b-"
  },

main.js 中的 Msal 插件：be7e77ba 是在 AzureAD 中注册的 spa 客户端应用程序 ID

import msal from 'vue-msal'
Vue.use(msal, {
  auth: {
    clientId: 'be7e77ba-x',
    tenantId: '3a0cf09b-x',
    redirectUri: 'http://localhost:8080/callback'
  },   
  cache: {
    cacheLocation: 'localStorage',
  },
});

在组件中：$msal.acquireToken 在 2 个范围 Microsoft Graph user.read 和 WebAPI api://58ca819e-/access_as_user 上调用访问令牌，其中 58ca819e- 是在 AzureAD 中注册的 WebAPI 应用程序 ID。

if (!this.$msal.isAuthenticated()) {        
      this.$msal.signIn();    
    }
    else{
      this.$msal
        .acquireToken({scopes: ["user.read", 'api://58ca819e-x/access_as_user']})
        .then((res)=>{
          console.log(res.accessToken)
          this.token = res
        })
        .catch(err=>console.error(err))
    }

收到的访问令牌仅包含 Microsoft Graph，但不包含 WebAPI 范围。该令牌对于 WebAPI 无效。

"scp": "openid profile User.Read email",

仅提供WebAPI作用域时，生成的包含"scp": "access_as_user",的token可以访问WebAPI：

this.$msal.acquireToken({scopes: ['api://58ca819e-x/access_as_user']})
or
this.$msal.acquireToken({scopes: ['api://58ca819e-x/access_as_user','user.read']})

好像只用了 1 个示波器？我们可以请求 >1 个范围的访问令牌吗？

Answer 1

没有！

一个token只能对应一个scope。 access token是根据你要访问的api audience颁发的，是唯一的！一个令牌只能有一个audience，不能使用多个作用域来请求访问令牌。

你应该把你想访问的 api 放在范围内。例如，如果要访问 MS 图 api，则可以输入 https://graph.microsoft.com/.default。如果要访问自定义 api，可以输入 api://{back-end app client api}/scope name.

使用 Azure AD 通过 Web API 验证 Vue

Authenticate Vue with WebAPI using AzureAD

azure-active-directory

msal

vuejs2

jwt-auth

webapi