在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