Angular 4/Angular 2 validate SPA against Azure B2C Active Directory

Question

In Angular 4/Angular 2 app, I want to validate it against Azure B2C Active Directory. In ASP.NET MVC, it was done using [Authorize] attribute on Controller and using an OWIN Startup.cs class to generate the authentication challenge and generating the Bearer token.

Moving on to a SPA application using Angular 4/Angular 2, I am not able to find a relevant tutorial for the same. I have seen some examples using Auth0, but I am not looking for an Auth0 solution. I want to authenticate directly against the Azure B2C Active Directory.

Can some approach and relevant example and tutorial describing the same be provided.

Tried ng2-adal sample suggested by 'Fei Xue - MSFT' below. Adding ng2-adal sample error message pics.

Added 'package.json' code:-

    {
  "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"
  }
}

Fei Xue - MSFT Fei Xue - MSFT · Accepted Answer · 2017-05-05T09:17:12

AFAIK, we need to implement CanActivate interface in the Angular 2 for the guard deciding if a route can be activated.

To protect the SPA for the Angular 2 using Azure AD you can refer this code sample. And about the Azure AD B2C authentication, you can refer this document.

Angular 4/Angular 2 validate SPA against Azure B2C Active Directory

1 Answers