Как аутентифицировать прогрессивное веб-приложение Vue.js с помощью Microsoft Graph

Question

У меня есть приложение Vue.js. Это приложение является прогрессивным веб-приложением, поэтому оно предназначено в первую очередь для работы на стороне клиента. Однако во время первоначального запуска мне нужно аутентифицировать пользователя в Azure Active Directory, получить данные, связанные с его учетной записью, и сохранить их для автономного использования.

У меня уже есть серверный API для получения данных, связанных с учетной записью пользователя. Я также знаю, как хранить его для автономного использования. Однако мой вопрос: как мне пройти аутентификацию с помощью Microsoft Graph из моего приложения Vue.js? Все, что я вижу, основано на использовании промежуточного программного обеспечения Node.js, но, если я чего-то не понимаю, мое прогрессивное веб-приложение не является приложением Node.js. Это просто JavaScript, HTML и CSS.

Если пользователь закроет приложение, а затем повторно посетит его через пару дней, я думаю, что мне потребуется использовать токен обновления, чтобы получить новый токен доступа. И все же, все, что я вижу, опирается на промежуточное ПО Node.js. Я считаю, что мне нужно решение, которое работает исключительно в Vue.js / JavaScript. Я ошибаюсь?

Обновление

1) Установлен клиент Microsoft Graph через NPM (npm install @microsoft/microsoft-graph-client --save). Это установлен 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 предоставляет сценарии браузера, которые do делают MSALAuthenticationProvider доступным:

lib/graph-js-sdk-web.js

• Browserified связка (без возможности веток деревьев)
• устанавливает 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