Vuejs2 使用AzureAD通过WebAPI验证Vue

我正在尝试使用从Vue查询数据

WebApi:

58ca819e-

是否在AzureAD中注册了WebApi应用程序id

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

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

main.js中的Msal插件：

be7e77ba

是在AzureAD中注册的spa客户端应用程序id吗

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

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”：“以用户身份访问”

的令牌可以访问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个作用域请求访问令牌吗？

否

一个令牌只能对应一个

范围

。访问令牌是根据您想要访问的密钥颁发的，并且是唯一的！一个令牌只能有一个

访问群体

，并且不能使用多个作用域来请求访问令牌

您应该将要访问的api放在作用域中。例如，如果您想访问MS graph api，可以将

https://graph.microsoft.com/.default

。如果要访问自定义api，可以在

api://{back-end-app-client-api}/scope-name

中输入