1. vue-msal-browser

vue-msal-browser

Vue-MSAL-Browser

vue-msal-browser is a VueJS 2 wrapper for the msal-browser library. You can use it to authenticate the users of your SPA and retrieve their access token to call your backend APIs.

It is widely inspired by the vue-msal library by @mvertopoulos

Pre-requisites

To use it you need:

Installation

Use npm or yarn to install vue-msal-browser.

 npm install vue-msal-browser
or
yarn add vue-msal-browser

Usage

Vue CLI

Initialize the plugin

For the Vue apps generated with the Vue CLI, you can import the plugin in the main.js file like described below.
The options allowed are the same as the options of the MSAL browser library.

 import { default as msalPlugin } from "vue-msal-browser";
const msalConfig = {
  auth: {
    tenant: '<your-tenant>',
    clientId: '<your-client-id>',
    authority: '<your-tenant-address>',
    redirectUri: '<your-redirect-url>', // It has to be configured on your Azure tenant
    scopes: ['<your-scopes>']
  },
  cache: {
    cacheLocation: '<your-cache-location>'
  },
  graph: {
    url: '<your-graph-api-url>',
    scopes: '<your-graph-api-scopes>',
    response_type: "blob"
  },
  mode: "redirect"
  ...
}
Vue.use(msalPlugin, msalConfig);

Use the plugin from a view component

You can call the plugin from you Vue components like a Vue.prototype

 
<template>
    <a href="#" v-if="accounts !== 0" @click="logout()">Logout</a>
</template>

<script>
export default {
  methods: {
    logout: function () {
      this.$msal.logoutRedirect()
    }
  },
  created () {
    this.$msal.authenticateRedirect()
  }
}

</script>


Use the plugin in the VueX store

You can also call it from the actions, mutation or getters in your Vue store.
First import the msalInstance

import { msalInstance } from "vue-msal-browser"

And then call the plugin in your actions

 export default {
  async AzureAuthentication() {
    msalInstance.authenticateRedirect();
  },
};

Here is a more detailed example: The following action authentify the users on redirect mode with a cachelocation "localStorage".

 export default {
  // Authenticate the user with Active Directory
  async AzureAuthentication({ commit, getters, dispatch }) {
    try {
      let existingTokenResponse = getters.mainTokenResponse;
      let newTokenResponse;

      // The user has already logged in. We try to get his token silently
      if (existingTokenResponse)
        newTokenResponse = await msalInstance.acquireTokenSilent({
          account: existingTokenResponse.account,
          scopes: msalInstance.extendedConfiguration.auth.scopes,
        });
      // The user has not logged in. We check if he comes back from a redirect with a token
      else newTokenResponse = await msalInstance.handleRedirectPromise();

      // No token found, we redirect the user
      if (!newTokenResponse) {
        await msalInstance.loginRedirect(msalInstance.loginRequest);
        return false;
      }
      // There is an existing token, we authentify the user
      else if (newTokenResponse) {
        // We add the access token as an authorization header for our Axios requests to our API
        this._vm.axios.defaults.headers.common["Authorization"] =
          "Bearer " + newTokenResponse.accessToken;
        if (msalInstance.extendedConfiguration.graph) {
          // The graph is set, we check if the user has already a picture in the local storage
          // if he does not we grab a token silently for our graph scope and call Microsoft graph to get the picture
          if (!localStorage.getItem("userPicture")) {
            let graphTokenResponse = await msalInstance.getSilentToken(
              newTokenResponse.account,
              msalInstance.extendedConfiguration.graph.scopes
            );
            let graphResponse = await msalInstance.callMSGraph(
              msalInstance.extendedConfiguration.graph.url,
              graphTokenResponse.accessToken
            );
            dispatch("AzureSetPicture", graphResponse);
          }
        }
        return true;
      }
    } catch (error) {
      console.error(error);
    }
  },
};

Extra configuration options and methods

The chapter below describes the extra configuration options and methods added by vue-msal-browser.
For more information about how to use the basic msal-browser functions, please refer to the MSAL browser documentation.

Extra configuration options

General Config Options

Option Description Format Default Value
mode MSAL Interaction type used for authentication. Used in the authenticate method. Can be redirect or popup string undefined

Auth Config Options

Option Description Format Default Value
scopes Default authentication scopes that your users will be allowed to access. Array of strings []

Graph Config Options

Option Description Format Default Value
url The URL of your graph API. string undefined
scopes Default authentication scopes that your users require from you graph API. Array of strings []
response_type Response type expected from the graph API. string undefined

Extra methods

The following methods have been added to the msal-browser original methods

1. authenticate

  • Usage:
    Authenticate the user with a redirect or a popup depending on the mode configuration option.

  • Example:
    msalInstance.authenticate()

2. authenticateRedirect

  • Usage:
    Ensure that there is no interaction ongoing and authenticate the user with the redirect mode if he is not authenticated yet.

  • Example:
    msalInstance.authenticateRedirect()

3. authenticatePopup

  • Usage:
    Authenticate the user with the popup mode if he is not authenticated yet.

  • Example:
    msalInstance.authenticatePopup()

4. getSilentToken

Parameter name Type Description
account Object MSAL user account object
scopes Array of strings Graph scopes
  • Usage:
    Grab a token silently for a given user and scope and return an access token object as a response. Redirect the user to the login if it fails.

  • Example:
    let graphTokenResponse = await msalInstance.getSilentToken(newTokenResponse.account, msalInstance.extendedConfiguration.graph.scopes);

5. callMSGraph

Parameter name Type Description
endpoint String Microsoft graph endpoint
accessToken String Azure access token
  • Usage:
    Allows to use the access token retrieved by the main msalInstance to call MSGraph

  • Example:
    let graphResponse = await msalInstance.callMSGraph(msalInstance.extendedConfiguration.graph.url, graphTokenResponse.accessToken);

Todos

  • Make a Vue 3 version
  • Add the mode as a parameter to the getSilentToken method
  • Add tests
  • [README] Add infos on Nuxt usage

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT