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

【问题标题】：How do I authenticate a Vue.js progressive web app with the Microsoft Graph如何使用 Microsoft Graph 对 Vue.js 渐进式 Web 应用程序进行身份验证
【发布时间】：2019-10-13 23:37:53
【问题描述】：

我有一个 Vue.js 应用程序。这个应用程序是一个渐进式网络应用程序，因此它主要在客户端运行。但是，在初始启动期间，我需要在我的 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 客户端。这安装了 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'

【问题讨论】：

嘿，我快速查看了文档，似乎支持客户端 JavaScript (github.com/microsoftgraph/msgraph-sdk-javascript)。您应该能够直接在您的 web 应用程序上验证用户，而无需使用 Node.js。
@LoïcMonard 感谢您指出这一点。在任何地方都有这个工作的例子吗？一切似乎都拼凑在一起，而且变化很大。目前，我正在努力导入 MSALAuthentiationProvider，但没有任何运气。
@user687554 您能否提供代码您如何导入该提供程序？我刚刚建立了项目，来自 github 的示例正在为我工作。
@MaxSinev - 我刚刚添加了显示我如何导入提供程序的代码
@user687554 我猜您的导入可能是错误的，您尝试从库中导入所有内容，而在示例中他们只是导入 { Client }，就像 "import { Client } from "@ microsoft/microsoft-graph-client";"

标签： javascript vue.js oauth-2.0

【解决方案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

【讨论】：