如何使用Azure AD验证VueJS应用程序？

Question

我正在使用VueJS 2.x框架设置应用，并且需要通过Azure Active Directory服务对用户进行身份验证。我已经有了＃34;登录信息＆＃34; （Auth和Token URL）对服务是必要的。

到目前为止，我只遇到了显示VueJS中设置的one article，但它依赖于第三方服务（Auth0） - 在此过程中添加了不必要的卷积。

当aren't any VueJS npm modules允许轻松进行身份验证时，如何继续？或者您是否必须依赖Vue以外的图书馆，如Adal JS？

任何建议都会有所帮助。

Answer 1

为了解决这个问题，我倾向于 ADAL JS 。我已经提供了 Vue + Vue-Router 示例应用程序here - 但我将在下面列出重要内容。

在你的package.json中：

"dependencies": {
    "adal-angular": "^1.0.15",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},

ADAL JS库的基本包装模块：

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();
  }
}

在应用程序的入口点（如果您使用了vue-cli，则为main.js）：

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 }
  });
});

对于您的Vue路由器配置：

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;

在您的Vue组件中：

import authentication from './authentication'
...
computed: {
  isAuthenticated() {
    return authentication.isAuthenticated();
  }
},
methods: {
  logOut() {
    authentication.signOut();
  }
}

将访问令牌添加到请求标头

以下是vue-resource http拦截器的示例，但任何方法都可以。

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();
  });
});

希望这能节省一些时间：）

Answer 2

我不确定是否有用于帮助Vue应用安全的库。但是，我们可以轻松利用Adal.js进行身份验证。

我写了一个简单的演示供您参考：

<强>的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'
};

Answer 3

免责声明：我是此插件的作者。

通过npm：

使用vue-adal

npm install vue-adal

基本用法

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
})
```

重要：确保将路由器上的模式设置为“历史记录”，以便不使用哈希值！这将对服务器端产生影响。

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

npm上有更多使用说明，sample上的说明+ github

Answer 4

您可以使用Adal JavaScript。但是，我建议您针对此解决方案在安全性方面进行更多研究，这似乎与使用PKCE的新安全性建议不符（请参阅https://oauth.net/2/grant-types/implicit/）。我找不到任何有关该文件的JavaScript文档。

Answer 5

这对我来说很难，所以我要在这里发布-希望这可以节省一些时间给某人：

我的问题是，我不仅需要使用azure-ad对vue.js应用进行身份验证，而且还需要获取用户所属的安全组。

要达到这个目的，这就是我所做的：

我使用了上面提到的vue-adal示例应用程序（您可以在https://github.com/survirtual/vue-adal中找到它）-示例文件夹下。

但是我仍然必须进行一些更改以使其表现出所需的方式。问题在于，在使用我的用户登录后，示例应用程序使用windows.net图形API从用户身份验证中检索带有令牌的用户信息，因此我必须在main.js中进行以下更改：

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

对此：

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

此外，在返回URL组件内部，我必须更改axios查询以获取用户所属的安全组...，所以我对此进行了更改（在home.vue文件中）：

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

对此：

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

然后我从API收到的数据包含用户所属的安全组...