如何使用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'

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

但是，@microsoft/microsoft-graph-client提供的浏览器脚本确实可用MSALAuthenticationProvider：

lib/graph-js-sdk-web.js

• 浏览器化捆绑包（不可进行树摇动）
• 集window.MicrosoftGraph，其中包含MSALAuthenticationProvider
• 本身不导出任何符号

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

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

演示1

lib/es/browser/index.js

• ES 模块（可摇树）
• 出口MSALAuthenticationProvider

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

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

演示2

lib/src/browser/index.js

• CommonJS 模块（不可进行树摇动）
• 出口MSALAuthenticationProvider

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

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

演示3