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 进行身份验证。

能否提供一些方法和相关示例以及描述相同内容的教程。

尝试了下面“Fei Xue - 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，您可以参考 this code sample。而关于Azure AD B2C认证，可以参考this document。