如何使用Microsoft Graph对Vue.js渐进式Web应用程序进行身份验证

Question

我有一个Vue.js应用。该应用程序是一个渐进式Web应用程序，因此主要在客户端上运行。但是，在初始启动期间，我需要在Azure Active Directory中对用户进行身份验证，获取与他们的帐户关联的数据，并将其存储以供脱机使用。

我已经有一个服务器端API，用于检索与用户帐户关联的数据。我也知道如何存储它以供离线使用。但是，我的问题是，如何从Vue.js应用程序中的Microsoft Graph进行身份验证？我所看到的一切都依赖于使用Node.js中间件。但是，除非我有误解，否则我的渐进式Web应用程序不是Node.js应用程序，而是JavaScript，HTML和CSS。

如果用户关闭应用程序，然后在几天后重新访问它，我相信我将需要使用刷新令牌来获取新的访问令牌。再一次，我看到的一切都依赖于Node.js中间件。我相信我需要一个完全在Vue.js / JavaScript中工作的解决方案。我误会了吗？

更新

1）通过NPM（npm install @microsoft/microsoft-graph-client --save）安装了Microsoft Graph Client。已安装v1.7.0。

2）在我的Vue.js应用中，我有：

import * as MicrosoftGraph from '@microsoft/microsoft-graph-client;
import * as Msal from 'msal';

let clientId = '<some guid>';
let scopes = ['user.read'];
let redirectUrl = 'http://localhost:1234/';  // This is registered in Azure AD.

let cb = (message, token, error, tokenType) => {
  if (error) {
    console.error(error);
  } else {
    console.log(token);
    console.log(tokenType);
  }
}

let reg = new Msal.UserAgentApplication(clientId, undefined, cb, { redirectUrl });
let authProvider = new MicrosoftGraph.MSALAuthenticationProvider(reg, scopes);

最后一行会产生一条错误消息：export 'MSALAuthenticationProvider' (imported as 'MicrosoftGraph') was not found in '@microsoft/microsoft-graph-client'

Answer 1

  

最后一行会产生一条错误消息：export 'MSALAuthenticationProvider' (imported as 'MicrosoftGraph') was not found in '@microsoft/microsoft-graph-client'

发生此错误是因为@microsoft/microsoft-graph-client的主脚本（lib/src/index.js）没有导出该符号。您会注意到记录MicrosoftGraph.MSALAuthenticationProvider会产生undefined。实际上，主要脚本旨在在Node中间件中运行。

不过，@microsoft/microsoft-graph-client提供了做使MSALAuthenticationProvider可用的浏览器脚本：

lib/graph-js-sdk-web.js

• browserified bundle（不可摇树）
• sets window.MicrosoftGraph，其中包含MSALAuthenticationProvider
• 不本身不会导出任何符号

import '@microsoft/microsoft-graph-client/lib/graph-js-sdk-web'

let authProvider = new window.MicrosoftGraph.MSALAuthenticationProvider(/* ... */)

demo 1

lib/es/browser/index.js

• ES模块（可树状摇动）
• 导出MSALAuthenticationProvider

import { MSALAuthenticationProvider } from '@microsoft/microsoft-graph-client/lib/es/browser'

let authProvider = new MSALAuthenticationProvider(/* ... */)

demo 2

lib/src/browser/index.js

• CommonJS模块（不可摇树）
• 导出MSALAuthenticationProvider

import { MSALAuthenticationProvider } from '@microsoft/microsoft-graph-client/lib/src/browser'

let authProvider = new MSALAuthenticationProvider(/* ... */)

demo 3