Enable authentication in your own web API by using Azure AD B2C

• Visual Studio Code
• C# for Visual Studio Code (latest version)
• .NET 5.0 SDK

• Visual Studio Code, or another code editor
• Node.js runtime

Use the dotnet new command. The dotnet new command creates a new folder named TodoList with the web API project assets. Open the directory, and then open Visual Studio Code.

dotnet new webapi -o TodoList
cd TodoList
code . 

When you're prompted to "add required assets to the project," select Yes.

Use Express for Node.js to build a web API. To create a web API, do the following:

1. Create a new folder named TodoList.
2. Under the TodoList folder, create a file named app.js.
3. In a command shell, run npm init -y. This command creates a default package.json file for your Node.js project.
4. In the command shell, run npm install express. This command installs the Express framework.

To add the authentication library, install the package by running the following command:

dotnet add package Microsoft.Identity.Web

To add the authentication library, install the packages by running the following command:

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

The Morgan package is an HTTP request logger middleware for Node.js.

Open Startup.cs and then, at the beginning of the class, add the following using declarations:

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

Find the ConfigureServices(IServiceCollection services) function. Then, before the services.AddControllers(); line of code, add the following code snippet:

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

Find the Configure function. Then, immediately after the app.UseRouting(); line of code, add the following code snippet:

app.UseAuthentication();

After the change, your code should look like the following snippet:

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

Add the following JavaScript code to your app.js file.

// 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.cn/${config.credentials.tenantName}.partner.onmschina.cn/${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();
});

Under the /Controllers folder, add a PublicController.cs file, and then add it to the following code snippet:

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

In the app.js file, add the following JavaScript code:

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

Under the /Controllers folder, add a HelloController.cs file, and then add it to the following code:

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

The HelloController controller is decorated with the AuthorizeAttribute, which limits access to authenticated users only.

The controller is also decorated with the [RequiredScope("tasks.read")]. The RequiredScopeAttribute verifies that the web API is called with the right scopes, tasks.read.

In the app.js file, add the following JavaScript code:

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

The /hello endpoint first calls the passport.authenticate() function. The authentication function limits access to authenticated users only.

The authentication function also verifies that the web API is called with the right scopes. The allowed scopes are located in the configuration file.

Add the following JSON snippet to the appsettings.json file.

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

Add the following JavaScript code to the app.js file. It's possible to setup HTTP and HTTPS endpoints for the Node application.

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

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

Under the project root folder, open the appsettings.json file, and then add the following settings:

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

In the appsettings.json file, update the following properties:

Under the project root folder, create a config.json file, and then add it to the following JSON snippet:

{
    "credentials": {
        "tenantName": "<your-tenant-name>.partner.onmschina.cn",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.cn/<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"
    }
}

In the config.json file, update the following properties:

In the command shell, start the web app by running the following command:

 dotnet run

You should see the following output, which means that your app is up and running and ready to receive requests.

Now listening on: http://localhost:6000

To stop the program, in the command shell, select Ctrl+C. You can rerun the app by using the node app.js command.

Open a browser and go to http://localhost:6000/public. In the browser window, you should see the following text displayed, along with the current date and time.

In the command shell, start the web app by running the following command:

node app.js

You should see the following output, which means that your app is up and running and ready to receive requests.

Example app listening on port 6000!

To stop the program, in the command shell, select Ctrl+C. You can rerun the app by using the node app.js command.

Open a browser and go to http://localhost:6000/public. In the browser window, you should see the following text displayed, along with the current date and time.

• Get the web API by using the Microsoft identity library.

• Get the web API by using the Passport.js library.