Activation de l’authentification dans une API web avec Azure AD B2C

• Visual Studio Code
• C# pour Visual Studio Code (dernière version)
• Kit SDK .NET 5.0

• Visual Studio Code ou un autre éditeur de code
• Runtime Node.js

Utilisez la commande dotnet new. La commande dotnet new crée un dossier nommé TodoList comportant les ressources du projet d’API web. Ouvrez le répertoire, puis Visual Studio Code.

dotnet new webapi -o TodoList
cd TodoList
code . 

Lorsqu’il vous est demandé d’« ajouter les ressources requises au projet », sélectionnez Oui.

Utilisez Express pour Node.js afin de créer une API web comme suit :

1. Créez un dossier nommé TodoList.
2. Dans le dossier TodoList, créez un fichier nommé app.js.
3. Dans une interface de commande, exécutez npm init -y. Cette commande crée un fichier package.json par défaut pour votre projet Node.js.
4. Dans l’interpréteur de commandes, exécutez npm install express. Cette commande installe le framework Express.

Pour ajouter la bibliothèque d’authentification, installez le package en exécutant la commande suivante :

dotnet add package Microsoft.Identity.Web

Pour ajouter la bibliothèque d’authentification, installez les packages en exécutant la commande suivante :

npm install passport
npm install passport-azure-ad
npm install morgan

Le package morgan est un intergiciel (middleware) de journalisation de requêtes HTTP pour Node.js.

Ouvrez Startup.cs, puis ajoutez les déclarations using suivantes au début de la classe :

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

Recherchez la fonction ConfigureServices(IServiceCollection services). Ensuite, ajoutez l’extrait de code suivant avant la ligne de code services.AddControllers(); :

public void ConfigureServices(IServiceCollection services)
{
    // Adds Microsoft Identity platform (Azure AD B2C) support to protect this Api
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
            .AddMicrosoftIdentityWebApi(options =>
    {
        Configuration.Bind("AzureAdB2C", options);

        options.TokenValidationParameters.NameClaimType = "name";
    },
    options => { Configuration.Bind("AzureAdB2C", options); });
    // End of the Microsoft Identity platform block    

    services.AddControllers();
}

Recherchez la fonction Configure. Ensuite, ajoutez l’extrait de code suivant juste après la ligne de code app.UseRouting(); :

app.UseAuthentication();

Après modification, votre code se présente ainsi :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();
    
    // Add the following line 
    app.UseAuthentication();
    // End of the block you add
    
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

Ajoutez le code JavaScript suivant à votre fichier app.js.

// Import the required libraries
const express = require('express');
const morgan = require('morgan');
const passport = require('passport');
const config = require('./config.json');

// Import the passport Azure AD library
const BearerStrategy = require('passport-azure-ad').BearerStrategy;

// Set the Azure AD B2C options
const options = {
    identityMetadata: `https://${config.credentials.tenantName}.b2clogin.com/${config.credentials.tenantName}.onmicrosoft.com/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
    clientID: config.credentials.clientID,
    audience: config.credentials.clientID,
    issuer: config.credentials.issuer,
    policyName: config.policies.policyName,
    isB2C: config.settings.isB2C,
    scope: config.resource.scope,
    validateIssuer: config.settings.validateIssuer,
    loggingLevel: config.settings.loggingLevel,
    passReqToCallback: config.settings.passReqToCallback
}

// Instantiate the passport Azure AD library with the Azure AD B2C options
const bearerStrategy = new BearerStrategy(options, (token, done) => {
        // Send user info using the second argument
        done(null, { }, token);
    }
);

// Use the required libraries
const app = express();

app.use(morgan('dev'));

app.use(passport.initialize());

passport.use(bearerStrategy);

//enable CORS (for testing only -remove in production/deployment)
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, Origin, X-Requested-With, Content-Type, Accept');
    next();
});

Dans le dossier /Controllers, ajoutez un fichier PublicController.cs, puis ajoutez-le à l’extrait de code suivant :

using System;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;

namespace TodoList.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class PublicController : ControllerBase
    {
        private readonly ILogger<PublicController> _logger;

        public PublicController(ILogger<PublicController> logger)
        {
            _logger = logger;
        }

        [HttpGet]
        public ActionResult Get()
        {
            return Ok( new {date = DateTime.UtcNow.ToString()});
        }
    }
}

Dans le fichier app.js, ajoutez le code JavaScript suivant :

// API anonymous endpoint
app.get('/public', (req, res) => res.send( {'date': new Date() } ));

Dans le dossier /Controllers, ajoutez un fichier HelloController.cs, puis ajoutez-le à l’extrait de code suivant :

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;

namespace TodoList.Controllers
{
    [Authorize]
    [RequiredScope("tasks.read")]
    [ApiController]
    [Route("[controller]")]
    public class HelloController : ControllerBase
    {

        private readonly ILogger<HelloController> _logger;
        private readonly IHttpContextAccessor _contextAccessor;

        public HelloController(ILogger<HelloController> logger, IHttpContextAccessor contextAccessor)
        {
            _logger = logger;
            _contextAccessor = contextAccessor;
        }

        [HttpGet]
        public ActionResult Get()
        {
            return Ok( new { name = User.Identity.Name});
        }
    }
}

Le contrôleur HelloController est doté de l’attribut AuthorizeAttribute, qui limite l’accès aux utilisateurs authentifiés uniquement.

Le contrôleur comprend également [RequiredScope("tasks.read")]. RequiredScopeAttribute vérifie que l’API web est appelée avec les bonnes étendues, tasks.read.

Dans le fichier app.js, ajoutez le code JavaScript suivant :

// API protected endpoint
app.get('/hello',
    passport.authenticate('oauth-bearer', {session: false}),
    (req, res) => {
        console.log('Validated claims: ', req.authInfo);
        
        // Service relies on the name claim.  
        res.status(200).json({'name': req.authInfo['name']});
    }
);

Le point de terminaison /hello appelle d’abord la fonction passport.authenticate(). La fonction d’authentification limite l’accès aux utilisateurs authentifiés uniquement.

La fonction d’authentification vérifie également que l’API web est appelée avec les bonnes étendues. Les étendues autorisées se trouvent dans le fichier de configuration.

Ajoutez l’extrait de code JSON suivant au fichier appsettings.json.

"Kestrel": {
    "EndPoints": {
      "Http": {
        "Url": "http://localhost:6000"
      },
      "Https": {
         "Url": "https://localhost:6001"   
        }
    }
  }

Ajoutez le code JavaScript suivant au fichier app.js. Il est également possible de configurer des points de terminaison HTTP et HTTPS pour l’application Node.

// Starts listening on port 6000
const port = process.env.PORT || 6000;

app.listen(port, () => {
    console.log('Listening on port ' + port);
});

Dans le dossier racine du projet, ouvrez le fichier appsettings.json, puis ajoutez les paramètres suivants :

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Dans le fichier appsettings.json, mettez à jour les propriétés suivantes :

Dans le dossier racine du projet, créez un fichier config.json, puis ajoutez-le à l’extrait de code JSON suivant :

{
    "credentials": {
        "tenantName": "<your-tenant-name>.onmicrosoft.com",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

Dans le fichier config.json, mettez à jour les propriétés suivantes :

Dans l’interface de commande, lancez l’application web en exécutant la commande suivante :

 dotnet run

La sortie suivante s’affiche, ce qui signifie que votre application est opérationnelle et prête à recevoir des demandes.

Now listening on: http://localhost:6000

Pour arrêter le programme, sélectionnez Ctrl+C dans l’interface de commande. Vous pouvez réexécuter l’application avec la commande node app.js.

Ouvrez un navigateur et accédez à http://localhost:6000/public. Dans la fenêtre du navigateur, le texte suivant s’affiche, ainsi que la date et l’heure actuelles.

Dans l’interface de commande, lancez l’application web en exécutant la commande suivante :

node app.js

La sortie suivante s’affiche, ce qui signifie que votre application est opérationnelle et prête à recevoir des demandes.

Example app listening on port 6000!

Pour arrêter le programme, sélectionnez Ctrl+C dans l’interface de commande. Vous pouvez réexécuter l’application avec la commande node app.js.

Ouvrez un navigateur et accédez à http://localhost:6000/public. Dans la fenêtre du navigateur, le texte suivant s’affiche, ainsi que la date et l’heure actuelles.

• Procurez-vous l’API web avec la Bibliothèque d’identités Microsoft.

• Procurez-vous l’API web avec la Bibliothèque Passport.js.