使用 Azure AD 使用 Web API 验证 Vue答案

【问题标题】：Authenticate Vue with WebAPI using AzureAD使用 Azure AD 使用 Web API 验证 Vue
【发布时间】：2021-01-12 12:09:02
【问题描述】：

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

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 在 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 个范围的访问令牌吗？

【问题讨论】：

标签： vuejs2 azure-active-directory msal webapi jwt-auth

【解决方案1】：

不！

一个令牌只能对应一个scope。访问令牌是根据你要访问的api audience颁发的，而且是唯一的！一个令牌只能有一个audience，并且不能使用多个范围来请求访问令牌。

你应该把你想访问的api放在作用域中。比如要访问MS graph api，可以输入https://graph.microsoft.com/.default。如果你想访问自定义的api，你可以输入api://{back-end app client api}/scope name。

【讨论】：