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

我正在使用VueJS 2.x框架设置一个应用程序，它需要通过Azure Active Directory服务对用户进行身份验证。我已经有了服务所必需的“登录信息”（身份验证和令牌URL）

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

当存在允许轻松进行身份验证的方法时，您如何继续？或者您必须依赖Vue之外的库吗

---

任何建议都会有帮助。

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

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

Index.html：

var config = {
  tenant: 'xxx.onmicrosoft.com',
  clientId: '',
  redirectUri: '',
  cacheLocation: 'localStorage'
};

var authContext=新的AuthenticationContext（配置）；
函数登录（）{
authContext.login（）；
}
函数初始化（配置选项）{
如果（配置选项）{
//默认情况下，重定向和注销\重定向设置为当前位置
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 | |路径默认值；
//使用给定的配置创建实例
}否则{
抛出新错误（“调用init时必须设置configOptions”）；
}
//loginresource用于设置已验证状态
updateDataFromCache（authContext.config.loginResource）；
}
变量_oauthData={
I认证：错误，
用户名：“”，
登录错误：“”，
简介：“
};
var updateDataFromCache=函数（资源）{
//此处仅缓存查找，不中断事件
var token=authContext.getCachedToken（资源）；
_oauthData.isAuthenticated=token！==null&&token.length>0；
var user=authContext.getCachedUser（）| |{用户名：'}；
_oauthData.userName=user.userName；
_oauthData.profile=user.profile；
_oauthData.loginError=authContext.getLoginError（）；
};
函数saveTokenFromHash（）{
var hash=window.location.hash；
var requestInfo=authContext.getRequestInfo（散列）；
if（authContext.isCallback（哈希））{
//回调可以来自登录或iframe请求
var requestInfo=authContext.getRequestInfo（散列）；
authContext.saveTokenFromHash（requestInfo）；
window.location.hash=“”；
if（requestInfo.requestType！==authContext.REQUEST\u TYPE.LOGIN）{
authContext.callback=window.parent.AuthenticationContext（）.callback；
}
}
}
函数isAuthenticate（）{
返回_oauthData.isAuthenticated；
}
saveTokenFromHash（）；
初始化（配置）；
Hello{{{oauthData.userName}
登录
var app=新的Vue({
el:“应用程序”，
数据：{
oauthData:_oauthData
}
});

config.js：

var config = {
  tenant: 'xxx.onmicrosoft.com',
  clientId: '',
  redirectUri: '',
  cacheLocation: 'localStorage'
};

---

为了解决这个问题，我求助于ADAL JS。我制作了一个Vue+Vue路由器示例应用程序，但我将包括以下重要部分

在package.json中： ADAL JS库的基本包装器模块： 在Vue组件中： 将访问令牌添加到请求头 下面是vue资源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();
  });
});

---

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

免责声明：我是这个插件的作者

通过npm使用：

基本用法

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

---

在上有更多的说明可供使用，并且在上有说明+a，您可以使用Adal JavaScript。然而，我建议您对此解决方案在安全方面进行更多研究，它似乎不符合新的安全建议，即使用PKCE（请参阅）。我找不到任何关于这方面的adal JavaScript文档。

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

我的问题是，我不仅需要使用azure ad验证我的vue.js应用程序，还需要获取用户所属的安全组

为了实现这一点，我做了以下工作：

我使用了上面提到的vue adal示例应用程序（您可以在示例文件夹下的：）-中找到它

但是我仍然需要做一些改变，使它按照我需要的方式运行。问题是，在使用我的用户登录后，示例应用程序使用windows.net graph 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'

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

此外，在返回url组件中，我必须更改axios查询以获取用户所属的安全组。。。因此我更改了这个（在home.vue文件中）：

为此：

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

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

---

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

感谢您花时间这么做。我一试就会给你回电话。是的，但你得看看阿达尔香草。但这个答案并不正确，因为adal已经为您完成了大部分工作。@Coreus上面的代码示例对我来说很好。大多数其他库只是包装adal.js以使其适合像adal 1.0.14中的

adal vanilla

这样的框架，上面的大部分内容不需要，因为它在其他地方处理。例如：authContext.isCallback（window.location.hash）我最终以这种方式使用了一些东西：我还使用了

1.0.14

version AdalJS。上面的代码不是完美的解决方案，它只是帮助开发人员开始使用Azure AD保护VueJS应用程序。如果您已经有了解决方案，您可以将其发布并标记为答案，以便其他有相同问题的社区

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

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'

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
}