javascript - 如何正确地将 MSAL(用于 js 的 Microsoft 身份验证库)导入并使用到 typescript react 单页应用程序中？

Question

问题

我似乎无法将 MSAL 库正确导入到我的 typescript 代码中。我正在使用 MSAL for JS库(应该有打字)在一个简单的 typescript / react 项目中，使用带有反应 typescript 脚本的 create-react-app 脚手架。我是 typescript 的新手，不确定我是否遗漏了一些明显的东西，或者在将它用于 typescript 项目时 MSAL 包是否存在问题。

详情:

1. 我使用 npm install --save msal 从 NPM 添加了 MSAL 包.
2. 我尝试使用不同形式的 import {Msal} from 'msal'; 将 MSAL 导入我的 .ts
3. 这会导致 typescript 错误 Could not find a declaration file for module 'msal'. '<path>/node_modules/msal/out/msal.js' implicitly has an 'any' type.
4. 觉得这很奇怪，我查看了 node_module/msal/out 文件夹并看到了一个“msal.d.ts”文件，这正是我所期望的。
5. 当我查看 msal.d.ts 的内容时文件，我没有看到任何我通常希望看到的导出。
6. 我尝试使用 npm install --save-dev @types/msal 从@types 安装声明, 但它不存在。
7. 我还尝试使用 let Msal = require('Msal'); 将其导入到我的文件中，但收到 Msal.UserAgentApplication 不是构造函数的错误。
8. 我尝试使用///引用指令并向主 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"
  ]
}

Answer 1

看起来最新版本的 MSAL.js 确实有一个 CommonJS 导出。您现在可以在 TypeScript 中执行以下操作(使用 TypeScript 2.3.3 版和 MSAL.js 0.1.3 版进行测试):

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>
    );
}