I am trying to query the data from AzureAD protected WebAPI from Vue using vue-msal.
WebApi: 58ca819e-
is webapi app id registered in AzureAD
"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"ClientId": "58ca819e-",
"TenantId": "3a0cf09b-"
},
Msal plugin in main.js: be7e77ba
is spa client app id registered in AzureAD
import msal from 'vue-msal'
Vue.use(msal, {
auth: {
clientId: 'be7e77ba-x',
tenantId: '3a0cf09b-x',
redirectUri: 'http://localhost:8080/callback'
},
cache: {
cacheLocation: 'localStorage',
},
});
In the component: $msal.acquireToken
is called for access token on 2 scopes Microsoft Graph user.read
and WebAPI api://58ca819e-/access_as_user
where 58ca819e-
is WebAPI app id registed in AzureAD.
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))
}
The received access token contains only Microsoft Graph but not WebAPI scopes. The token is invalid for the WebAPI.
"scp": "openid profile User.Read email",
When only WebAPI scope is provided, the generated token containing "scp": "access_as_user",
can access the WebAPI:
this.$msal.acquireToken({scopes: ['api://58ca819e-x/access_as_user']})
or
this.$msal.acquireToken({scopes: ['api://58ca819e-x/access_as_user','user.read']})
Looks like only 1 scope is used? Can we ask the access token for >1 scopes?