Angular 4 / Angular 2针对Azure B2C Active Directory验证SPA

Question

在Angular 4 / Angular 2应用中，我想针对Azure B2C Active Directory进行验证。 在ASP.NET MVC中，使用Controller上的[Authorize]属性并使用OWIN Startup.cs类来生成身份验证质询并生成Bearer令牌来完成此操作。

转到使用Angular 4 / Angular 2的SPA应用程序，我找不到与此相关的教程。 我已经看到了一些使用Auth0的示例，但是我没有在寻找Auth0解决方案。 我想直接针对Azure B2C Active Directory进行身份验证。

可以提供一些方法以及相关示例和描述它们的教程。

下面的“费雪-MSFT”建议对ng2-adal样品进行尝试。 添加ng2-adal示例错误消息图片。

添加了'package.json'代码：-

    {
  "name": "angular2-azure-ad",
  "version": "1.0.0",
  "scripts": {
    "gulp": "gulp",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "build": "tsc",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "angular2-adal": "^0.1.4",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "gulp": "^3.9.1",
    "gulp-typescript": "^2.13.6",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-shell": "^0.5.2",
    "del": "^2.2.0"
  }
}

Answer 1

AFAIK，我们需要在Angular 2中实现CanActivate接口，以使后卫确定是否可以激活路由。

为了使用Azure AD保护Angular 2的SPA，可以引用此代码示例 。 关于Azure AD B2C身份验证，可以参考此文档 。