如何将 MSAL（Microsoft Authentication Library for js）正确导入和使用到 typescript react 单页应用程序中？

Posted 2023-03-13

【中文标题】如何将 MSAL（Microsoft Authentication Library for js）正确导入和使用到 typescript react 单页应用程序中？

【英文标题】：How to properly import and use the MSAL (Microsoft Authentication Library for js) into a typescript react single page application?

【发布时间】：2017-10-28 22:28:42

【问题描述】：

问题

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

详情：

我使用 npm install --save msal 从 NPM 添加了 MSAL 包。 我尝试使用不同形式的import Msal from 'msal'; 将 MSAL 导入我的 .ts 这会导致打字稿错误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 文件的内容时，我没有看到任何我通常希望看到的导出。 我尝试使用npm install --save-dev @types/msal 从@types 安装声明，但它不存在。 我还尝试使用 let Msal = require('Msal'); 将其导入到我的文件中，但收到 Msal.UserAgentApplication 不是构造函数的错误。 尝试使用 /// 参考指令并将脚本标记添加到主 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.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>
    );

【讨论】：

我已经能够按照您的建议来新建 UserAgentAppliation，但是，在之前的代码中（我从 CDN 加载 Msal），我执行了以下 Msal.Storage("localStorage").getItem(...)。现在，当我使用 import * as Msal from 'msal' 时会出现错误。有没有办法让它发挥作用？

【参考方案2】：

我也遇到了同样的问题，等不及作者修复了，所以分叉修改了原代码。作为临时修复，您可以使用我的版本 msalx 而不是 msal。

npm install msalx

你可以在https://github.com/malekpour/microsoft-authentication-library-for-js#example找到react中的源代码和示例用法

【讨论】：

你是英雄

【参考方案3】：

如果您安装了exports-loader (npm install exports-loader --save-dev)，您可以避免使用脚本标签并将以下内容添加到您的指令中：

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

【讨论】：

我遇到异常：意外的'！'在'exports-loader?Msal!./node_modules/msal/out/msal.js'中。不要使用 import 语法来配置 webpack loader import/no-webpack-loader-syntax

我可以使用它进行导入，但出现以下错误：Msal.UserAgentApplication is not a constructor

【参考方案4】：

正如您正确提到的 - 在 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) =>
    

    );

请注意，即使在自述文件中，他们也只指定了一种使用其库的方式——通过包含脚本标签，而不是通过导入模块。进一步查看他们的源代码表明他们也没有使用模块。

【讨论】：

引用路径定义结合在我的 index.html 中包含来自 CDN 的 js 文件让它为我工作。如果我找到更清洁的方法，我会更新。

嗨 Nigel，你能把你的项目上传到你的 Github 吗？我正在尝试使用 React 和 MSAL 查找示例。提前致谢

更高版本的 MSAL 现在似乎运行良好，我使用的是 0.1.3 版本，很简单：import * as Msal from 'msal'; 运行良好。