[Vuejs]-How do i authenticate my vuejs app using azure active directory and get the security groups to which the user belong to

by

4👍

it was something that took me a long time to figure out so im posting my findings here, hopfully this will help someone:

this was a hard one for me so im posting here – hopfully this will save some time to someone:

my problem was that i need not only to authenticate my vuejs app with azure-ad, but i need also to get the security groups to which the user is belonging to.

to achive this, this is what i done:

i used the vue-adal sample app mentioned above( you can find it in: https://github.com/survirtual/vue-adal ) – under sample folder.

but i still had to make some changes to make it behave the way i need. the problam was that after logging in with my user the sample app used windows.net graph api for retrieving user info with the token from the user authentication, so i had to change in main.js this:

const graphApiBase = `https://graph.windows.net`
const graphApiResource = '00000002-0000-0000-c000-000000000000'

to this:

const graphApiBase = `https://graph.microsoft.com/v1.0`
const graphApiResource = '00000003-0000-0000-c000-000000000000'

in addition, inside the return url component i had to change the axios query to get the security groups to which the user belongs to..so i changed this (in the home.vue file):

async getUserInfo () {
      let res = await this.$graphApi.get(`me`, {
        params: {
          'api-version': 1.6
        }
      })

to this:

async getUserInfo () {
      let res = await this.$graphApi.post(`/me/getMemberGroups`, {
        securityEnabledOnly: true
      })
      console.log(res)
      return res.data
    }

and then the data that i received back from the api contained the security groups to which the user belongs to…

👤VitalyGo877

Leave a comment