在Angular 4.5 Service中未定义的Msal用于Azure B2C身份验证

Question

我正在从事Angular 4.5应用程序和Azure B2C身份验证工作。 我的Azure B2C配置中有单独的应用程序，并且可以正常工作，所以我知道问题出在我的代码中。 我收到未定义的Msal错误。

我已经通过安装Msal库

 npm install msal

但是我不确定是否需要在安装之前或之后添加对package.json文件的引用？

Visual Studio Code不会给我任何错误，但是在浏览器中却可以。

错误

 ReferenceError: 'Msal' is not defined
 at MsalService (http://localhost:4000/0.chunk.js:15545:9)
 at createClass (http://localhost:4000/main.bundle.js:11407:13)
 at _createProviderInstance (http://localhost:4000/main.bundle.js:11380:13)
 at createProviderInstance (http://localhost:4000/main.bundle.js:11214:5)
 at createViewNodes (http://localhost:4000/main.bundle.js:12679:17)
 at callViewAction (http://localhost:4000/main.bundle.js:13138:13)
 at execComponentViewsAction (http://localhost:4000/main.bundle.js:13047:13)
 at createViewNodes (http://localhost:4000/main.bundle.js:12716:5)
 at callViewAction (http://localhost:4000/main.bundle.js:13138:13)
 at execComponentViewsAction (http://localhost:4000/main.bundle.js:13047:13)
 at createViewNodes (http://localhost:4000/main.bundle.js:12716:5)
 at createRootView (http://localhost:4000/main.bundle.js:12584:5)
 at callWithDebugContext (http://localhost:4000/main.bund

Msal服务，其中会产生错误；

import { Injectable } from '@angular/core';

   declare var bootbox: any;
   declare var Msal: any;

 @Injectable()
 export class MsalService{

 access_token: string;

 tenantConfig = {       
    tenant: 'mytenant.onmicrosoft.com',
    clientID: 'my client id xxx',
    signUpSignInPolicy: 'B2C_1_SiUpIn',
    b2cScopes: ["http://myb2cscope/App/Read"]
 };

 authority = "https://login.microsoftonline.com/tfp/" + this.tenantConfig.tenant + "/" + this.tenantConfig.signUpSignInPolicy;   

 /* B2C SignIn SignUp Policy Configuration*/
   clientApplication = new Msal.UserAgentApplication(
    this.tenantConfig.clientID, this.authority, 
    function (errorDesc: any, token: any, error: any, tokenType: any) {
        // Called after loginRedirect or acquireTokenPopup
    }
 );

  public login(): void {
    var _this = this;
     this.clientApplication.loginPopup(this.tenantConfig.b2cScopes).then(function (idToken: any) {
         _this.clientApplication.acquireTokenSilent(_this.tenantConfig.b2cScopes).then(
             function (accessToken: any) {
                 _this.access_token = accessToken;
             }, function (error: any) {
                 _this.clientApplication.acquireTokenPopup(_this.tenantConfig.b2cScopes).then(
                     function (accessToken: any) {
                         _this.access_token = accessToken;
                     }, function (error: any) {
                         bootbox.alert("Error acquiring the popup:\n" + error);
                     });
             })
     }, function (error: any) {
         bootbox.alert("Error during login:\n" + error);
     });
 }

 logout(): void {
     this.clientApplication.logout();
 };

 isOnline(): boolean {
     return this.clientApplication.getUser() != null; 
 };

 getProduct(): string
      {
          return "12 Apples";
      }
   }

我不确定我是否很清楚或者是否有办法确认我的安装Msal库是否正常？???

Answer 1

MSAL版本0.1.0中的msal.d.ts文件没有导出，因此无法在服务类中将其称为导入，浏览器将通过此错误“模块”

MSAL的更高版本0.1.3现在似乎可以正常工作，我使用的是0.1.3版本，它很简单：

 import * as Msal from 'msal'; 

Answer 2

您可以尝试使用msal @ angular来代替纯msal.js库：

npm install msal-angular-保存

希望这可以帮助！

Answer 3

尝试在您的app.html中添加<script type="text/javascript" src="path_to_msal_package/msal.js"></script>或尝试使用此angular-msal软件包https://www.npmjs.com/package/角膜角

编辑：您得到的错误ReferenceError: 'Msal' is not defined意味着即使您安装了'Msal'lib，也不会注入项目中。

这是一个例子https://github.com/sunilbandla/msal-angular-sample