Aktivera autentisering i ditt eget webb-API med hjälp av Azure AD B2C

• Visual Studio Code
• C# för Visual Studio Code (senaste versionen)
• .NET 5.0 SDK

• Visual Studio Code eller någon annan kodredigerare
• Node.js körmiljö

Använd kommandot dotnet new. Kommandot dotnet new skapar en ny mapp med namnet TodoList med webb-API-projekttillgångarna. Öppna katalogen och öppna sedan Visual Studio Code.

dotnet new webapi -o TodoList
cd TodoList
code . 

När du uppmanas att "lägga till nödvändiga tillgångar i projektet" väljer du Ja.

Använd Express för Node.js för att skapa ett webb-API. Gör följande för att skapa ett webb-API:

1. Skapa en ny mapp med namnet TodoList.
2. Under mappen TodoList skapar du en fil med namnet app.js.
3. Kör i ett kommandogränssnitt npm init -y. Det här kommandot skapar en standardfil förpackage.json för ditt Node.js projekt.
4. Kör npm install express i kommandogränssnittet. Det här kommandot installerar Express-ramverket.

Om du vill lägga till autentiseringsbiblioteket installerar du paketet genom att köra följande kommando:

dotnet add package Microsoft.Identity.Web

Om du vill lägga till autentiseringsbiblioteket installerar du paketen genom att köra följande kommando:

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

Morgan-paketet är ett mellanprogram för HTTP-begärandeloggning för Node.js.

Öppna Startup.cs och lägg sedan till följande using deklarationer i början av klassen:

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

Hitta ConfigureServices(IServiceCollection services) funktionen. Lägg sedan till följande kodfragment före services.AddControllers(); kodraden:

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

Hitta Configure funktionen. Lägg sedan till följande kodfragment direkt efter app.UseRouting(); kodraden:

app.UseAuthentication();

Efter ändringen bör koden se ut som följande kodfragment:

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

Lägg till följande JavaScript-kod i dinapp.js-fil .

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

Under mappen /Controllers lägger du till en PublicController.cs-fil och lägger sedan till den i följande kodfragment:

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

I filenapp.js lägger du till följande JavaScript-kod:

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

Under mappen /Controllers lägger du till en HelloController.cs fil och lägger sedan till den i följande kod:

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

Kontrollanten HelloController är dekorerad med AuthorizeAttribute, som endast begränsar åtkomsten till autentiserade användare.

Styrenheten är också dekorerad med [RequiredScope("tasks.read")]. RequiredScopeAttribute verifierar att webb-API:et anropas med rätt omfång, tasks.read.

I filenapp.js lägger du till följande JavaScript-kod:

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

Först anropar slutpunkten /hello funktionen passport.authenticate(). Autentiseringsfunktionen begränsar endast åtkomsten till autentiserade användare.

Autentiseringsfunktionen verifierar också att webb-API:et anropas med rätt omfång. De tillåtna omfången finns i konfigurationsfilen.

Lägg till följande JSON-kodfragment i appsettings.json-filen .

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

Lägg till följande JavaScript-kod i filenapp.js . Det går att konfigurera HTTP- och HTTPS-slutpunkter för Node-programmet.

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

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

Under projektrotmappen öppnar du filenappsettings.json och lägger sedan till följande inställningar:

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

Uppdatera följande egenskaper i filenappsettings.json :

Under projektrotmappen skapar du en config.json fil och lägger sedan till den i följande JSON-kodfragment:

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

Uppdatera följande egenskaper i filenconfig.json :

Starta webbappen i kommandogränssnittet genom att köra följande kommando:

 dotnet run

Du bör se följande utdata, vilket innebär att appen är igång och redo att ta emot begäranden.

Now listening on: http://localhost:6000

Om du vill stoppa programmet väljer du Ctrl+C i kommandogränssnittet. Du kan köra appen igen med hjälp node app.js av kommandot .

Öppna en webbläsare och navigera till http://localhost:6000/public. I webbläsarfönstret bör du se följande text, tillsammans med aktuellt datum och tid.

Starta webbappen i kommandogränssnittet genom att köra följande kommando:

node app.js

Du bör se följande utdata, vilket innebär att appen är igång och redo att ta emot begäranden.

Example app listening on port 6000!

Om du vill stoppa programmet väljer du Ctrl+C i kommandogränssnittet. Du kan köra appen igen med hjälp node app.js av kommandot .

Öppna en webbläsare och navigera till http://localhost:6000/public. I webbläsarfönstret bör du se följande text, tillsammans med aktuellt datum och tid.

• Hämta webb-API:et med hjälp av Microsofts identitetsbibliotek.

• Hämta webb-API:et med hjälp av Passport.js-biblioteket.