0

我正在处理 Angular 4.5 应用程序和 Azure B2C 身份验证工作。我的天蓝色 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 库是否正常工作？？？？

4

3 回答 3

2

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

MSAL 的更高版本 0.1.3 现在似乎运行良好，我使用的是 0.1.3 版本，它很简单：

 import * as Msal from 'msal';
于 2018-01-14T17:57:18.933 回答
1

您可以尝试使用 msal@angular，而不是使用纯 msal.js 库：

npm install msal-angular --save

希望这可以帮助！

于 2018-10-25T15:40:25.533 回答
0

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

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

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

于 2018-01-14T16:28:42.477 回答