MSAL(Microsoft Authentication Library for js)을 텍스트 대응 단일 페이지 응용 프로그램으로 올바르게 가져오고 사용하는 방법은 무엇입니까?

MSAL(Microsoft Authentication Library for js)을 텍스트 대응 단일 페이지 응용 프로그램으로 올바르게 가져오고 사용하는 방법은 무엇입니까?

문제

MSAL 라이브러리를 내 타이프스크립트 코드로 올바르게 가져올 수 없습니다.저는 Create-react-app과 react-type 스크립트를 사용하여 골격이 형성된 간단한 typescript/react 프로젝트에서 MSAL for JS 라이브러리를 사용하고 있습니다.저는 타자기가 처음이라 타자기 프로젝트와 함께 사용할 때 명백한 것을 놓쳤는지 또는 MSAL 패키지에 문제가 있는지 잘 모르겠습니다.

세부사항:

1. 다음을 사용하여 NPM의 MSAL 패키지를 추가했습니다.npm install --save msal.
2. 다른 형식을 사용하여 MSAL을 내 .ts로 가져오려고 했습니다.import {Msal} from '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/out 폴더를 보니 'msal.d.ts' 파일이 있었습니다.
5. msal.d.ts 파일의 내용을 보면 일반적으로 볼 수 있을 것으로 예상되는 내보내기가 없습니다.
6. 다음을 사용하여 @types에서 선언을 설치하려고 했습니다.npm install --save-dev @types/msal하지만 존재하지 않습니다.
7. 또한 다음을 사용하여 파일로 가져오기를 시도했습니다.let Msal = require('Msal');하지만 Msal이라는 오류가 있습니다.UserAgentApplication은 생성자가 아닙니다.
8. /// 참조 지시어를 사용하고 main index.html에 스크립트 태그를 추가하려고 시도했지만 운이 좋지 않았습니다.이것은 또한 문제를 해결하는 올바른 방법으로 느껴지지 않습니다.

예제 Msal.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"
  ]
}

최신 버전의 MSAL.js에 CommonJS 내보내기가 있는 것 같습니다.이제 TypeScript(TypeScript 버전 2.3.3 및 MSAL.js 버전 0.1.3으로 테스트됨)에서 다음을 수행할 수 있습니다.

import * as Msal from 'msal';

이제 당신의.ts(또는 내 경우).tsxfile) 예를 들어 클릭 이벤트 핸들러를 설정하고 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>
    );
}

올바르게 언급했듯이 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에서도 모듈 가져오기가 아닌 스크립트 태그를 포함하여 라이브러리 사용 방법을 하나만 지정합니다.그리고 그들의 소스 코드를 더 자세히 살펴보면 그들도 모듈을 사용하지 않는다는 것을 알 수 있습니다.

저도 같은 문제가 있어서 작성자가 수정하는 것을 기다릴 수 없어서 원본 코드를 포크하여 수정했습니다.임시 수정으로 내 버전을 사용할 수 있습니다.msalx에 msal.

npm install msalx

소스 코드와 사용 예는 다음 사이트에서 확인할 수 있습니다. https://github.com/malekpour/microsoft-authentication-library-for-js#example

exports-loader)를 설치하는 npm install exports-loader --save-dev스크립트 태그를 사용하지 않고 다음을 지시사항에 추가할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/44228493/how-to-properly-import-and-use-the-msal-microsoft-authentication-library-for-js