在Angular 2中使用AAD 2身份验证成功登录后，在Internet Explorer 11（在某些特定版本中）中重定向到Null

Question

在Angular 2中使用AAD 2身份验证成功登录后，在Internet Explorer 11（在某些特定版本中）中重定向到Null。

在Chrome和其他浏览器中按预期工作。

从主页http://localhost:1234，将重定向到AAD 2身份验证登录页面。成功登录后，必须重定向到同一主页，即http://localhost:1234。但它正在重定向到http://localhost:1234/null。但在其他浏览器中，它会按预期重定向。即http://localhost:1234/

请帮我解决这个问题。我使用以下代码。

import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { UserAgentApplication } from 'msalx';
import { Router } from '@angular/router';
import { AppConfig } from '../app.config';

@Injectable()
export class LoginService 
{
  private config: Object = null;
  private Token: any;
  public getConfig() 
  {
    return this.config;
  }
  public getToken() 
  {
    return this.Token;
  }

  public clientID = this.con.getClientID();
  public graphAPIScopes = [this.con.getClientID()];
  //["https://graph.microsoft.com/user.read"];
  public redirectUri = location.origin

 constructor(private router: Router, private con: AppConfig) {
 }

 public clientApplication = new UserAgentApplication
 (
    this.clientID, null,(errorDesc, token, error, tokenType) => {
      // Called after loginRedirect or acquireTokenPopup
      if (tokenType == "id_token") {this.callTokenApi();
      localStorage.setItem('User', 
        JSON.stringify(this.clientApplication.getUser()));
        this.logMessage("User logged-in");
      } else {
        this.logMessage("Error during login:\n" + error);
      }
  });

  state = {
    isLoggedIn: false,
    message: ""
  }

 logMessage(message: string) {
 }

 loginRedirect(sessionTimedOut: boolean) {
   if (sessionTimedOut) {
     this.clearUserInfoAndRedirectToLoginPage();
   }

   var GetState = this.clientApplication.isCallback(window.location.hash);
   if (!GetState) {
     if (!this.clientApplication.getUser()) {
       this.clearUserInfoAndRedirectToLoginPage();
     }
   }
}

clearUserInfoAndRedirectToLoginPage() {
  localStorage.setItem('User', null);
  localStorage.setItem('Token', null);
  this.clientApplication.loginRedirect(this.graphAPIScopes);
}

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

loginPopup() {
  this.clientApplication.loginPopup
  (this.graphAPIScopes).then ((idToken) => {
     this.clientApplication.acquireTokenSilent(this.graphAPIScopes).
     then ((accessToken) => {
       var userName = this.clientApplication.getUser().name;
       this.logMessage("User '" + userName + "' logged-in");
     }, 
     (error) => {this.clientApplication.
       acquireTokenPopup(this.graphAPIScopes).
         then((accessToken) => {
           var userName = this.clientApplication.getUser().name;
           this.logMessage("User '" + userName + "' logged-in");
         }, (error) => {
           this.logMessage("Error acquiring the popup:\n" + error);
         });
       })
     }, (error) => {
      this.logMessage("Error during login:\n" + error);
   });
 }
 callTokenApi() {
    this.clientApplication.
    acquireTokenSilent(this.graphAPIScopes).then   ((accessToken) => {
        localStorage.setItem('Token', accessToken);
        window.location.reload();
    }, (error) => {
    })
  }
  callApiWithAccessToken(accessToken: string) {
    accessToken;
  }
}

Answer 1

您的问题似乎与在Protected Mode中运行的Internet Explorer有关。根据微软的说法：“为JavaScript ES5生成Msal.js，以便它可以在Internet Explorer中运行。”

要在本地运行您的应用程序，您需要禁用此Protected mode。请按照以下步骤操作：

1. 转到Internet Explorer设置（齿轮图标）
2. 选择Internet选项|单击安全性，单击Internet区域，然后取消选中“启用保护模式（需要重新启动Internet Explorer）”。 Internet Explorer会抱怨您的计算机不再受到保护。确认
3. 重新启动Internet Explorer
4. 运行并调试您的应用程序
5. 完成后，您可以转到IE设置|恢复Internet Explorer安全设置互联网选项|安全|将所有区域重置为默认级别

---

只是考虑计数（微软的话）：

如果您将应用程序部署到生产环境（例如在Azure Web应用程序中），这通常可以正常工作，前提是最终用户已接受弹出窗口。我们使用Internet Explorer 11对其进行了测试。

---

有关更详细的说明，请访问this MSAL Github link