web-dev-qa-db-ja.com

MSAL（js用Microsoft認証ライブラリ）をTypeScript反応シングルページアプリケーションに適切にインポートして使用するにはどうすればよいですか？

問題

私は自分の活字体のコードに適切にインポートするMSALライブラリを取得するように見えることはできません。 create-react-appを使用してスキャフォールドされた単純なTypeScript/reactプロジェクトで、 MSAL for JS ライブラリ（タイピングが想定されている）を使用していますスクリプトで、活字体の反応します。 TypeScriptを初めて使用するので、明らかな何かを見逃しているかどうか、またはTypeScriptプロジェクトで使用するときにMSALパッケージに問題があるかどうかはわかりません。

詳細：

  1. 私はnpm install --save msalを使用してNPMからMSALパッケージを追加しました。
  2. 私はimport {Msal} from 'msal';の異なる形式を使用して、私の.TSにMSALをインポートしようとしました
  3. この活字体誤差の結果は、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 /アウトフォルダとのこぎりA「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"
  ]
}
javascripttypescripttypescript-typingsmsal
17
nbrowne

あなたは正しく述べたように - そのモジュールではなく、したがって、インポートしようとしてはならない - 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に、彼らは自分のライブラリーを使用しての唯一の方法を指定することに注意してください。また、ソースコードをさらに調べると、モジュールも使用していないことがわかります。

10
Amid

MSAL.jsの最新バージョンのようですdoesにはCommonJSエクスポートがあります。 TypeScriptで次の操作を行うことができます（TypeScriptバージョン2.3.3およびMSAL.jsの0.1.3でテスト済み）：

import * as Msal from 'msal';

.ts（または私の場合は.tsx file）たとえば、クリックイベントハンドラーをセットアップし、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>
    );
}
11
Henry Daehnke

私は同じ問題を抱えていて、作者がそれを修正するのを待つことができなかったので、元のコードを分岐して修正しました。一時的な修正として、msalxの代わりに私のバージョンmsalを使用できます。

npm install msalx

ソースコードと使用例は、reactで次の場所にあります： https://github.com/malekpour/Microsoft-authentication-library-for-js#example

10
Ali Malekpour

あなたは（輸出・ローダーをインストールする場合npm install exports-loader --save-dev）あなたはスクリプトタグを避け、あなたのディレクティブに以下を追加することができます。

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

wiki に記載されているように、インポートする適切な方法は次のとおりです。

import * as Msal from 'msal';
1
vzhikness