Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: WebAPI configuration


Installing required packages

There is only one required package to achieve our Web Api protection with a JWT.


PM> Install-Package Microsoft.AspNetCore.Authentication.JwtBearer -Version 2.0.1

Configure your Web API in Startup.cs:

using System;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace WebApiJwtBearer
   public class Startup
      public Startup(IConfiguration configuration)
         Configuration = configuration;

      public IConfiguration Configuration { get; }

     //This method gets called by the runtime. Use this method to add services to the container.
     public void ConfigureServices(IServiceCollection services)
        services.AddAuthentication(options =>
           options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
           options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        }).AddJwtBearer(options =>
           options.Authority = ""; <- tenantId
           options.Audience = "257b6c36-1168-4aac-be93-6f2cd81cec43"; <- clientId
           options.TokenValidationParameters.ValidateLifetime = true;
           options.TokenValidationParameters.ClockSkew = TimeSpan.Zero;



    //This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
       if (env.IsDevelopment())


      app.UseCors(builder => builder

Now you should be done 🙂

Let’s see what happen if we test it :


Nice isn’t it? 🙂

Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: Angular5 configuration


Install required packages and setup Angular 5 application

Firstly install the latest version of Angular with Angular-CLI

npm install -g @angular/cli

Then install an angular version of ADAL.JS:  adal-angular5

npm install --save adal-angular5

Create a AuthService

We will create a AuthService.ts, this service will manage signin, signout and users data :


import { Adal5HTTPService, Adal5Service } from 'adal-angular5';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class AuthService {

private_config = {
   tenant:'136544d9-038e-4646-afff-10accb370679', <-- tenantId mentionned in the previous article
   clientId:'257b6c36-1168-4aac-be93-6f2cd81cec43', <-- clientId mentionned in the previous article
   redirectUri:"http://localhost:4200/auth-callback", <-- callback URI mentionned in the previous article
   postLogoutRedirectUri:"http://localhost:4200" <-- same URI as homepage URI mentionned in the previous article

constructor(private_adal:Adal5Service) {

public isLoggedIn():boolean {
   return this._adal.userInfo.authenticated;

public signout():void {

public startAuthentication():any {

public getName():string {

public completeAuthentication():void {
   this._adal.getUser().subscribe(user=> {
   var expireIn=user.profile.exp-newDate().getTime();



this service is the most important thing, it will be used everywhere in the application.

Create a AuthGuardService

This AuthGuard service is usefull for protecting your page with authentication

You need to implement CanActivate method using Interface with the same name:


import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

export class AuthGuardService implements CanActivate {

constructor(private_authService:AuthService) { }

   canActivate():boolean {

   if(this._authService.isLoggedIn()) {
      return true;
    return false;


CanActivate is fired when you try to access to a route that is protected.

To setup route protection, create a component served by a protected route you want to protected with authentication, and setup route protection in app.module.ts:

Example of a protected component:


import { AuthService } from './../services/auth.service';
import { Component, OnInit } from '@angular/core';

   styleUrls: ['./protected.component.css']

export class ProtectedComponent implements OnInit {

   constructor(private_authService:AuthService) { }

   ngOnInit() {;

   public signout():void {



Welcome {{name}}


<a href="javascript:void(0);" (click)="signout();">signout</a>

Protect your routes like this in app.module.ts:

const routes: Routes = [
   children: []
   canActivate: [AuthGuardService]

Create a AuthCallback component

This component will be used as endpoint in your app to manage user creation after receiving the token from Azure Authorization endpoint.

Azure AD will call your page and send the token. If you remember well, the URI has to be declaqred in Azure to make it work.


import { AuthService } from './../services/auth.service';
import { Router, ActivatedRoute } from '@angular/router';
import { Component, OnInit, NgZone } from '@angular/core';

   styleUrls: ['./auth-callback.component.css']

export class AuthCallbackComponent implements OnInit {

   constructor(private_router:Router, private_authService:AuthService, private_zone:NgZone, private_activatedRoute:ActivatedRoute) { }

   ngOnInit() {

      setTimeout(() => {
      () => this._router.navigate(['/protected'])


<p>Please wait while we redirect you back</p>

The method completeAuthentication is in fact internally a Promise but I execute the redirection after authentication synchronously by using a setTimeout statement.

I used also NgZone object.

Why this?

Passing a callback to promise after authentication in completeAuthentication did not work on Safari IOS, so the work around was using setTimeout inside NgZone… a bit dirty but it works! 🙂

Modify you app.component.html to test a protected route:

<h3><a routerLink="/">Home</a> | <a routerLink="/protected">Protected</a></h3>

Check your app.module.ts

Your app.module.ts should be well setup like this:

import { AuthService } from './services/auth.service';
import { AuthGuardService } from './services/auth-guard.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ProtectedComponent } from './protected/protected.component';
import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
import { Adal5Service, Adal5HTTPService } from 'adal-angular5';
import { HttpClient } from '@angular/common/http';
const routes: Routes = [
   children: []
   canActivate: [AuthGuardService]

   declarations: [
   imports: [
   exports: [RouterModule],
   providers: [AuthGuardService, AuthService, Adal5Service,{ provide:Adal5HTTPService, useFactory:Adal5HTTPService.factory, deps: [HttpClient, Adal5Service] } ],
   bootstrap: [AppComponent]

export class AppModule { }

Demo time !!!

If everything is well setup in Azure and in your Angular 5 application, if you try to go to navigate to a protected route you should have a logging page to Microsoft and be redirected to your web application:






If log in your browser console the authenticated user object you should have something like this :

Awesome right ? 😉

Now let’s see how we protect a Web Api: Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: WebAPI configuration

Code quality: Using CodeAnalysis.FxCopAnalyzers and Stylecop in .NET Core 2 applications



Why Code quality is important? Because correctness, maintainability, and even elegance are all involved in creating great code.

Code Quality is a fascinating subject, which comprises a mixture of knowledge, experience, guidelines, principles, patterns and conventions. And if that wasn’t enough, they all should be carefully adapted to each particular team and use case.

The subject gets even more confusing when you start considering tooling. However, choosing the right tools for each team and use case will make achieving quality code simpler.

This article contains an introduction to the Code Quality subject in the .Net Core ecosystem.


There are several analyzers available, the most interesting ones in my opinion are:

  • Microsoft.AnalyzerPowerPack
  • Microsoft.CodeAnalysis.FxCopAnalyzers
  • codecracker.CSharp
  • SonarAnalyzer.CSharp
  • StyleCop.Analyzers
  • Microsoft.VisualStudio.Azure.CodeAnalysis (for Azure projects)

In this article I have chosen CodeAnalysis.FxCopAnalyzers.

It can be installed via Nuget Packages, it’s easy to install and it uses a ruleset file, you can download a sample here we will see later how to configure it: myrules.ruleset


Depending the version Visual Studio you have to be careful with what package version you have to install:

If you don’t install the right package with your current version of Visual Studio you may have issues when you compile your project.

For more information you can referer to the GitHub web page:

In my case I have Visual Studio 2017 15.3 so I have to install the version 2.3.0.


StyleCop is like CodeAnalysis, it uses Roslyn Analyzers but does only care about style programming.

Code analysis searches for patterns which may indicate a bug, while StyleCop is simply enforcing style rules, a simple convention used by your team.


After installing the Nuget package add in your solution items folder the file stylecop.json (at the same place as your ruleset file), it’s mandatory to add this file to make it work

Then edit your csproj to link your stylecop.json to the project you want to analyze like this (there is no visual tool for this in Visual Studio 2017 for StyleCop):

In the mean time add the ruleset file as follow as well:

<Project Sdk="Microsoft.NET.Sdk">
     <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="2.3.0-beta1" />    
     <PackageReference Include="StyleCop.Analyzers" Version="1.0.2" />  


     <AdditionalFiles Include="$(SolutionDir)\stylecop.json" Link="stylecop.json" />  

When you are done with that, you can select the rules you want to enable / disable (None, Warning, Error…):

CodeAnalysis rules:

StyleCop rules:

Then when you compile Warnings or Errors appear:

Sample of underlined code:


Great isn’t it? 😉

Now your turn to fix analyze your code 😮