Как правильно импортировать и использовать MSAL (библиотека проверки подлинности Microsoft для js) в приложение для обработки одной страницы typescript?

Проблема

Я не могу заставить библиотеку MSAL правильно импортировать код typescript. Я использую библиотеку MSAL для JS (которая, как предполагается, имеет типизацию) в простой typescript/реагирующей проектной подкладке, action-app с реакциями typescript. Я новичок в typescript и не уверен, что я пропустил что-то очевидное или возникли проблемы с пакетом MSAL при использовании его с проектами typescript.

Детали:

Я добавил пакет MSAL из NPM с помощью npm install --save msal.
Я попытался импортировать MSAL в мой .ts, используя разные формы import {Msal} from 'msal';
Это приводит к ошибке typescript Could not find a declaration file for module 'msal'. '<path>/node_modules/msal/out/msal.js' implicitly has an 'any' type.
Думая, что это было странно, я посмотрел папку node_module/msal/out и увидел файл "msal.d.ts", чего я ожидал.
Когда я смотрю содержимое файла msal.d.ts, я не вижу экспорта, который я обычно ожидал увидеть.
Я попытался установить объявление из @types с помощью npm install --save-dev @types/msal, но он не существует.
Я также попытался импортировать его в свой файл с помощью let Msal = require('Msal');, но получаю сообщение об ошибке, что Msal.UserAgentApplication не является конструктором.
Мне не очень повезло с использованием справочной директивы///и добавления тега script к основному index.html. Это также не похоже на правильный путь решения проблемы.

ExampleMsal.ts

import { observable, action, computed } from 'mobx';
import * as Msal from 'msal'; // <-- This line gives the error

class ExampleMsal{
    @observable 
    private _isLoggedIn: boolean;

    constructor() {
        this._isLoggedIn = false;
    }

    @computed 
    get isLoggedIn(): boolean {
        return this._isLoggedIn;
    }

    @action 
    signIn() {

        let userAgentApplication = new Msal.UserAgentApplication('<client-id>', null, 
        function (errorDes: string, token: string, error: string, tokenType: string) {
            // this callback is called after loginRedirect OR acquireTokenRedirect 
            // (not used for loginPopup/aquireTokenPopup)
        }
        );

        userAgentApplication.loginPopup(['user.read']).then(function(token: string) {
            let user = userAgentApplication.getUser();
            if (user) {
                // signin successful
                alert('success');
            } else {
                // signin failure
                alert('fail');
            }
        }, function (error: string) {
            // handle error
            alert('Error' + error);
        });        
        this._isLoggedIn = true;
    }

    @action 
    signOut() {
        this._isLoggedIn = false;
    }
}

export default ExampleMsal;

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

Ответ 1

Как вы правильно сказали - в msal.d.ts нет экспорта - его не является модулем, и поэтому вы не должны пытаться импортировать.

Вместо этого вы можете использовать его следующим образом:

/// <reference path="./node_modules/msal/out/msal.d.ts" />

const userAgentApplication = new Msal.UserAgentApplication("your_client_id", null, (errorDes, token, error, tokenType) =>
    {

    });

Обратите внимание, что даже в readme они указывают только один способ использования своей библиотеки - включив тег script, а не импортируя модуль. И, изучая исходный код, они также не используют модули.

Ответ 2

У меня была такая же проблема, и я не мог дождаться, когда автор ее исправит, поэтому разветкил и модифицировал исходный код. Как временное исправление, вы можете использовать мою версию msalx вместо msal.

npm install msalx

Вы можете найти исходный код и пример использования в ответ на: https://github.com/malekpour/microsoft-authentication-library-for-js#example

Ответ 3

Похоже, что последняя версия MSAL.js имеет экспорт CommonJS. Теперь вы можете просто сделать следующее в TypeScript (проверено с версией 2.3.3 из TypeScript и 0.1.3 из MSAL.js):

import * as Msal from 'msal';

Теперь в вашем .ts (или в моем случае .tsx файле) вы можете, например, настроить обработчик события клика и создать объект UserAgentApplication:

// In you class somewhere
private userAgentApplication: any = undefined;

// The login button click handler
handleLoginClick = (event: any): void => {
    if (!this.userAgentApplication) {
        this.userAgentApplication = new Msal.UserAgentApplication(
            'clientID string', 'authority string or empty', this.authCallback, { cacheLocation: 'localStorage'});
    }
    // Other login stuff...
}

// In React render()
public render() {
    return (
        <Button
            bsStyle="warning"
            type="button"
            onClick={(e) => this.handleLoginClick(e)}
        >
        Log in
        </Button>
    );
}

Ответ 4

Если вы устанавливаете export-loader (npm install exports-loader --save-dev), вы можете избежать тега script и добавить следующие директивы:

var Msal = require("exports-loader?Msal!../../../node_modules/msal/out/msal.js");

Ответ 5

Как указано в вики, правильный способ импорта:

import * as Msal from 'msal';