How do you authenticate a VueJS app with Azure AD?
I'm not sure that there is a library to help with security for Vue apps. However, we can easily leverage Adal.js for authentication.
I wrote a simple demo for your reference:
Index.html:
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="node_modules\adal-angular\lib\adal.js"></script>
<script src="config.js"></script>
<script>
var authContext = new AuthenticationContext(config);
function login() {
authContext.login();
}
function init(configOptions) {
if (configOptions) {
// redirect and logout_redirect are set to current location by default
var existingHash = window.location.hash;
var pathDefault = window.location.href;
if (existingHash) {
pathDefault = pathDefault.replace(existingHash, "");
}
configOptions.redirectUri = configOptions.redirectUri || pathDefault;
configOptions.postLogoutRedirectUri =
configOptions.postLogoutRedirectUri || pathDefault;
// create instance with given config
} else {
throw new Error("You must set configOptions, when calling init");
}
// loginresource is used to set authenticated status
updateDataFromCache(authContext.config.loginResource);
}
var _oauthData = {
isAuthenticated: false,
userName: "",
loginError: "",
profile: ""
};
var updateDataFromCache = function(resource) {
// only cache lookup here to not interrupt with events
var token = authContext.getCachedToken(resource);
_oauthData.isAuthenticated = token !== null && token.length > 0;
var user = authContext.getCachedUser() || { userName: "" };
_oauthData.userName = user.userName;
_oauthData.profile = user.profile;
_oauthData.loginError = authContext.getLoginError();
};
function saveTokenFromHash() {
var hash = window.location.hash;
var requestInfo = authContext.getRequestInfo(hash);
if (authContext.isCallback(hash)) {
// callback can come from login or iframe request
var requestInfo = authContext.getRequestInfo(hash);
authContext.saveTokenFromHash(requestInfo);
window.location.hash = "";
if (requestInfo.requestType !== authContext.REQUEST_TYPE.LOGIN) {
authContext.callback = window.parent.AuthenticationContext().callback;
}
}
}
function isAuthenticate() {
return _oauthData.isAuthenticated;
}
saveTokenFromHash();
init(config);
</script>
</head>
<body>
<div id="app">
<p v-if="_oauthData.isAuthenticated">Hello {{ oauthData.userName }}</p>
<button onclick="login()" v-else>Login</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
oauthData: _oauthData
}
});
</script>
</body>
</html>
config.js:
var config = {
tenant: 'xxx.onmicrosoft.com',
clientId: '',
redirectUri: '',
cacheLocation: 'localStorage'
};
To solve this very problem, I leaned on ADAL JS. I've made a Vue + Vue-Router sample application available here - but I'll include the important pieces below.
In your package.json:
"dependencies": {
"adal-angular": "^1.0.15",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
A basic wrapper module for the ADAL JS library:
import AuthenticationContext from 'adal-angular/lib/adal.js'
const config = {
tenant: 'your aad tenant',
clientId: 'your aad application client id',
redirectUri: 'base uri for this application',
cacheLocation: 'localStorage'
};
export default {
authenticationContext: null,
/**
* @return {Promise}
*/
initialize() {
this.authenticationContext = new AuthenticationContext(config);
return new Promise((resolve, reject) => {
if (this.authenticationContext.isCallback(window.location.hash) || window.self !== window.top) {
// redirect to the location specified in the url params.
this.authenticationContext.handleWindowCallback();
}
else {
// try pull the user out of local storage
let user = this.authenticationContext.getCachedUser();
if (user) {
resolve();
}
else {
// no user at all - go sign in.
this.signIn();
}
}
});
},
/**
* @return {Promise.<String>} A promise that resolves to an ADAL token for resource access
*/
acquireToken() {
return new Promise((resolve, reject) => {
this.authenticationContext.acquireToken('<azure active directory resource id>', (error, token) => {
if (error || !token) {
return reject(error);
} else {
return resolve(token);
}
});
});
},
/**
* Issue an interactive authentication request for the current user and the api resource.
*/
acquireTokenRedirect() {
this.authenticationContext.acquireTokenRedirect('<azure active directory resource id>');
},
/**
* @return {Boolean} Indicates if there is a valid, non-expired access token present in localStorage.
*/
isAuthenticated() {
// getCachedToken will only return a valid, non-expired token.
if (this.authenticationContext.getCachedToken(config.clientId)) { return true; }
return false;
},
/**
* @return An ADAL user profile object.
*/
getUserProfile() {
return this.authenticationContext.getCachedUser().profile;
},
signIn() {
this.authenticationContext.login();
},
signOut() {
this.authenticationContext.logOut();
}
}
In the app's entry point (main.js if you used vue-cli):
import Vue from 'vue'
import App from './App'
import router from './router'
import authentication from './authentication'
// Init adal authentication - then create Vue app.
authentication.initialize().then(_ => {
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
});
For your Vue router configuration:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import authentication from '../authentication'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
requiresAuthentication: true
}
}
]
})
// Global route guard
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuthentication)) {
// this route requires auth, check if logged in
if (authentication.isAuthenticated()) {
// only proceed if authenticated.
next();
} else {
authentication.signIn();
}
} else {
next();
}
});
export default router;
In your Vue components:
import authentication from './authentication'
...
computed: {
isAuthenticated() {
return authentication.isAuthenticated();
}
},
methods: {
logOut() {
authentication.signOut();
}
}
Add access token to request headers
The below is an example of a vue-resource http interceptor, but any method will do.
Vue.http.interceptors.push(function (request, next) {
auth.acquireToken().then(token => {
// Set default request headers for every request
request.headers.set('Content-Type', 'application/json');
request.headers.set('Ocp-Apim-Subscription-Key', 'api key');
request.headers.set('Authorization', 'Bearer ' + token)
// continue to next interceptor
next();
});
});
Hopefully this saves somebody a little time :)
You can use Adal JavaScript. However, I suggest you to research more on security side for this solution, it doesn't seem to be in line with the new security recommendation, which is to use a PKCE (see https://oauth.net/2/grant-types/implicit/). I couldn't find any adal JavaScript documentation for that.
Disclaimer: I am the author of this plugin.
Use vue-adal via npm:
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
})
There are more instructions for use on npm, and instructions + a sample on github