Vue Adal

Vue Adal is a plugin for Vue.js to help with using Azure Active Directory.

Check the sample folder for a usage example.

Installation

yarn add vue-adal

npm install vue-adal

Basic Usage

import Adal from 'vue-adal'
Vue.use(Adal, {
// This config gets passed along to Adal, so all settings available to adal can be used here.
  config: {
    // 'common' (multi-tenant gateway) or Azure AD Tenant ID
    tenant: '<guid>',

    // Application ID
    clientId: '<guid>',

    // Host URI
    redirectUri: '<host addr>',

    cacheLocation: 'localStorage'
  },

  // Set this to true for authentication on startup
  requireAuthOnInitialize: true,

  // Pass a vue-router object in to add route hooks with authentication and role checking
  router: router
})

important: make sure to set the mode on your router to 'history' so that it doesn't use hashes! This will have implications on the serverside.

new Router({
  mode: 'history', // Required for Adal library
  ... // Rest of router init
})

Getting user Information

After signing in, get access to the user as follows:

import { AuthenticationContext } from 'vue-adal' // This will be populated with a valid context after initialization

...
const profile = AuthenticationContext.user.profile
...

Getting Access to a Resource

After configuring Vue Adal, you'll still need to get a token to a resource.

Important: your Azure application must be configured to allow the oauth2ImplicitFlow in the manifest, like so:

Axios HTTP Client / Interceptor

Vue Adal provides a convenient and automated way to do that with an axios http client, called AxiosAuthHttp. It configures an interceptor the auto-acquires tokens and will retry requests after a 401 and another attempt to get a token.

Here is an example:

import axios from 'axios'
import { default as Adal, AxiosAuthHttp } from 'vue-adal'

...
Vue.use({
  install (vue, opts = {}) {
    // Configures an axios http client with a interceptor to auto-acquire tokens
    vue.prototype.$graphApi = AxiosAuthHttp.createNewClient({
      // Required Params
      axios: axios,
      resourceId: graphApiResource, // Resource id to get a token against

      // Optional Params
      router: router, // Enables a router hook to auto-acquire a token for the specific resource

      baseUrl: graphApiBase, // Base url to configure the client with

      onTokenSuccess (http, context, token) { // Token success hook
        // When an attempt to retrieve a token is successful, this will get called.
        // This enables modification of the client after a successful call.
        if (context.user) {
          // Setup the client to talk with the Microsoft Graph API
          http.defaults.baseURL = `${graphApiBase}/${context.user.profile.tid}`
        }
      },

      onTokenFailure (error) { // Token failure hook
        // When an attempt to retrieve a token is not successful, this will get called.
        console.log(error)
      }
    })
  }
})
...

Take a look at the sample for more details.

Manually getting a token

If you'd like to get a token yourself, use the acquireToken command on the Authentication context:

import { AuthenticationContext } from 'vue-adal' // This will be populated with a valid context after initialization

...
  AuthenticationContext.acquireToken(resource, (err, token) => {
    if (err) {
      let errCode = err.split(':')[0]
      switch (errCode) {
        case 'AADSTS50058': // Need to prompt for user sign in
          AuthenticationContext.login()
          break
        case 'AADSTS65001': // Token is invalid; grab a new one
          AuthenticationContext.acquireTokenRedirect(resource)
          break
        case 'AADSTS16000': // No Access
        default:
          // Need a pop-up forcing a login
          AuthenticationContext.login()
          break
      }
      return
    }
    const headers = {
      'Authorization': `BEARER ${token}`
    }
  })
...

Route Hooks

If you pass in a router object as an option in Vue Adal, it will configure a global hook before each route allowing for route meta tags around authentication and roles.

To make a route that requires auth, add a meta object to the route with requireAuth set to true:

// Other routes
...
    {
      path: '/secret',
      name: 'secret',
      component: MySecretComponent,
      meta: {
        requireAuth: true
      }
    }
...

To make a route that requires role(s), add a :

// Other routes
...
    {
      path: '/secretRoles',
      name: 'secretRoles',
      component: MySecretRolesComponent,
      meta: {
        requireAuth: true
        // Much match at least one of these roles
        requireRoles: [
          'TheMan',
          'Admin'
        ]
      }
    }
...

Conditionally Show Content Based on Auth Status

Conditionally show content when authenticated:

<div v-if="$adal.isAuthenticated()">You are signed in!</div>

Conditionally show content only when at least one role exists on user:

<div v-if="$adal.checkRoles(['Admin'])">You are an admin!</div>

maiermuc/vue-adal