Habilitación de la autenticación en su propia API web mediante Azure AD B2C

• Visual Studio Code
• C# para Visual Studio Code (versión más reciente)
• SDK de .NET 5.0

• Visual Studio Code u otro editor de código
• Entorno de ejecución de Node.js

Use el comando dotnet new. El comando dotnet new crea una nueva carpeta denominada TodoList con los recursos del proyecto de API web. Abra el directorio y, a continuación, abra Visual Studio Code.

dotnet new webapi -o TodoList
cd TodoList
code . 

Cuando se le pida que "agregue los recursos necesarios al proyecto", seleccione Sí.

Use Express para Node.js para crear una API web. Para crear una API web, haga lo siguiente:

1. Cree una carpeta con el nombre TodoList.
2. En la carpeta TodoList, cree un archivo denominado app.js.
3. En un shell de comandos, ejecute npm init -y. Este comando crea un archivo package.json predeterminado para el proyecto de Node.js.
4. En el shell de comandos, ejecute npm install express. Este comando instala el marco Express.

Para agregar la biblioteca de autenticación, instale el paquete ejecutando el siguiente comando:

dotnet add package Microsoft.Identity.Web

Para agregar la biblioteca de autenticación, instale los paquetes mediante la ejecución del siguiente comando:

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

El paquete Morgan es un middleware de registrador de solicitudes HTTP para Node.js.

Abra Startup.cs y, a continuación, al principio de la clase, agregue las siguientes declaraciones de using:

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

Busque la función ConfigureServices(IServiceCollection services). A continuación, antes de la línea de código services.AddControllers();, agregue el siguiente fragmento de código:

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();
}

Busque la función Configure. A continuación, inmediatamente después de la línea de código app.UseRouting();, agregue el siguiente fragmento de código:

app.UseAuthentication();

Después del cambio, el código debe tener un aspecto similar al siguiente fragmento de código:

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();
    });
}

Agregue el siguiente código JavaScript al archivo 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();
});

En la carpeta /Controllers, agregue un archivo PublicController.cs y, a continuación, agréguelo al siguiente fragmento de código:

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()});
        }
    }
}

En el archivo app.js, agregue el código JavaScript siguiente:

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

En la carpeta /Controllers, agregue un archivo HelloController.cs y, a continuación, agréguelo al código siguiente:

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});
        }
    }
}

El controlador HelloController está decorado con el AuthorizeAttribute, que limita solo el acceso a los usuarios autenticados.

El controlador también está decorado con [RequiredScope("tasks.read")]. El RequiredScopeAttribute comprueba que se llama a la API web con los ámbitos adecuados, tasks.read.

En el archivo app.js, agregue el código JavaScript siguiente:

// 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']});
    }
);

El punto de conexión /hello primero llama a la función passport.authenticate(). La función de autenticación limita el acceso solo a los usuarios autenticados.

La función de autenticación también comprueba que se llama a la API web con los ámbitos adecuados. Los ámbitos permitidos se encuentran en el archivo de configuración.

Agregue el fragmento de código JSON siguiente al archivo appsettings.json.

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

Agregue el siguiente código JavaScript al archivo app.js. Es posible configurar puntos de conexión HTTP y HTTPS para la aplicación Node.

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

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

En la carpeta raíz del proyecto, abra el archivo appsettings.json y, a continuación, agregue la siguiente configuración:

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

En el archivo appsettings.json, actualice las siguientes propiedades:

En la carpeta raíz del proyecto, cree un archivo config.json y, a continuación, agréguelo al siguiente fragmento de código JSON:

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

En el archivo config.json, actualice las propiedades siguientes:

En el shell de comandos, inicie la aplicación web ejecutando el siguiente comando:

 dotnet run

Debería ver la siguiente salida, que significa que la aplicación está en funcionamiento y lista para recibir solicitudes.

Now listening on: http://localhost:6000

Para detener el programa, en el shell de comandos, seleccione Ctrl+C. Puede volver a ejecutar la aplicación mediante el comando node app.js.

Abra un explorador y vaya a http://localhost:6000/public. En la ventana del explorador, debería ver el texto siguiente mostrado, junto con la fecha y hora actuales.

En el shell de comandos, inicie la aplicación web ejecutando el siguiente comando:

node app.js

Debería ver la siguiente salida, que significa que la aplicación está en funcionamiento y lista para recibir solicitudes.

Example app listening on port 6000!

Para detener el programa, en el shell de comandos, seleccione Ctrl+C. Puede volver a ejecutar la aplicación mediante el comando node app.js.

Abra un explorador y vaya a http://localhost:6000/public. En la ventana del explorador, debería ver el texto siguiente mostrado, junto con la fecha y hora actuales.

• Obtenga la API web mediante la biblioteca de identidades de Microsoft.

• Obtenga la API web mediante la biblioteca Passport.js.