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

Om du vill auktorisera åtkomst till ett webb-API kan du endast hantera begäranden som innehåller en giltig åtkomsttoken som problem med Azure Active Directory B2C (Azure AD B2C). Den här artikeln visar hur du aktiverar Azure AD B2C-auktorisering till ditt webb-API. När du har slutfört stegen i den här artikeln kommer endast användare som hämtar en giltig åtkomsttoken att ha behörighet att anropa dina webb-API-slutpunkter.

Förutsättningar

Innan du börjar läser du någon av följande artiklar som beskriver hur du konfigurerar autentisering för appar som anropar webb-API:er. Följ sedan stegen i den här artikeln för att ersätta exempelwebb-API:et med ditt eget webb-API.

• Konfigurera autentisering i ett exempel på ASP.NET Core-program
• Konfigurera autentisering i ett exempel på ensidesprogram (SPA)

Översikt

Tokenbaserad autentisering säkerställer att begäranden till ett webb-API innehåller en giltig åtkomsttoken.

Appen slutför följande steg:

1. Den autentiserar användare med Azure AD B2C.

2. Den hämtar en åtkomsttoken med nödvändiga behörigheter (omfång) för webb-API-slutpunkten.

3. Den skickar åtkomsttoken som en ägartoken i autentiseringshuvudet för HTTP-begäran med hjälp av följande format:

   Authorization: Bearer <access token>
   

Webb-API:et slutför följande steg:

1. Den läser ägartoken från auktoriseringshuvudet i HTTP-begäran.

2. Den validerar token.

3. Den verifierar behörigheterna (omfången) i token.

4. Den läser de anspråk som kodas i token (valfritt).

5. Den svarar på HTTP-begäran.

Översikt över appregistrering

För att göra det möjligt för din app att logga in med Azure AD B2C och anropa ett webb-API måste du registrera två program i Azure AD B2C-katalogen.

• Med webb-, mobil- eller SPA-programregistreringen kan din app logga in med Azure AD B2C. Appregistreringsprocessen genererar ett program-ID, även kallat klient-ID, som unikt identifierar ditt program (till exempel app-ID: 1).

• Med registreringen av webb-API :et kan din app anropa ett skyddat webb-API. Registreringen exponerar webb-API-behörigheter (omfång). Appregistreringsprocessen genererar ett program-ID som unikt identifierar ditt webb-API (till exempel app-ID: 2). Ge din app (app-ID: 1) behörighet till webb-API-omfången (app-ID: 2).

Programregistreringarna och programarkitekturen beskrivs i följande diagram:

Förbereda utvecklingsmiljön

I nästa avsnitt skapar du ett nytt webb-API-projekt. Välj programmeringsspråket ASP.NET Core eller Node.js. Kontrollera att du har en dator som kör något av följande program:

ASP.NET Core

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

Node.js

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

Steg 1: Skapa ett skyddat webb-API

Skapa ett nytt webb-API-projekt. Välj först det programmeringsspråk som du vill använda, ASP.NET Core eller Node.js.

ASP.NET Core

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.

Node.js

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 standardfilen package.json för Node.js-projektet.
4. Kör npm install express i kommandogränssnittet. Det här kommandot installerar Express-ramverket.

Steg 2: Installera beroendena

Lägg till autentiseringsbiblioteket i ditt webb-API-projekt. Autentiseringsbiblioteket parsar HTTP-autentiseringshuvudet, validerar token och extraherar anspråk. Mer information finns i dokumentationen för biblioteket.

ASP.NET Core

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

dotnet add package Microsoft.Identity.Web

Node.js

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ärandelogger för Node.js.

Steg 3: Initiera autentiseringsbiblioteket

Lägg till nödvändig kod för att initiera autentiseringsbiblioteket.

ASP.NET Core

Ö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;

ConfigureServices(IServiceCollection services) Hitta 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();
}

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

Node.js

Lägg till följande JavaScript-kod i din app.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();
});

Steg 4: Lägg till slutpunkterna

Lägg till två slutpunkter i webb-API:et:

• Anonym /public slutpunkt. Den här slutpunkten returnerar aktuellt datum och tid. Använd den för att felsöka ditt webb-API med anonyma anrop.
• Skyddad /hello slutpunkt. Den här slutpunkten returnerar värdet för anspråket name i åtkomsttoken.

Så här lägger du till den anonyma slutpunkten:

ASP.NET Core

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

Node.js

Lägg till följande JavaScript-kod i filen app.js:

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

Så här lägger du till den skyddade slutpunkten:

ASP.NET Core

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.

Node.js

Lägg till följande JavaScript-kod i filen app.js:

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

Slutpunkten /hello anropar passport.authenticate() först funktionen. 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.

Steg 5: Konfigurera webbservern

I en utvecklingsmiljö anger du att webb-API:et ska lyssna på inkommande HTTP- eller HTTPS-begärandens portnummer. I det här exemplet använder du HTTP-port 6000 och HTTPS-port 6001. Bas-URI:n för webb-API:et kommer att vara http://localhost:6000 för HTTP och https://localhost:6001 för HTTPS.

ASP.NET Core

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

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

Node.js

Lägg till följande JavaScript-kod i filen app.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);
});

Steg 6: Konfigurera webb-API:et

Lägg till konfigurationer i en konfigurationsfil. Filen innehåller information om din Azure AD B2C-identitetsprovider. Webb-API-appen använder den här informationen för att verifiera den åtkomsttoken som webbappen skickar som en ägartoken.

ASP.NET Core

Under projektrotmappen öppnar du filen appsettings.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 filen appsettings.json :

Avsnitt	Tangent	Värde
AzureAdB2C	Instans	Den första delen av ditt Azure AD B2C-klientnamn (till exempel https://contoso.b2clogin.com).
AzureAdB2C	Domain	Ditt fullständiga klientnamn för Din Azure AD B2C-klientorganisation (till exempel contoso.onmicrosoft.com).
AzureAdB2C	ClientId	Webb-API-program-ID. I föregående diagram är det programmet med app-ID: 2. Information om hur du hämtar ditt webb-API-programregistrerings-ID finns i Krav.
AzureAdB2C	SignUpSignInPolicyId	Användarflöden eller anpassad princip. Information om hur du hämtar ditt användarflöde eller din princip finns i Krav.

Node.js

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 filen config.json:

Avsnitt	Tangent	Värde
autentiseringsuppgifter	tenantName	Ditt Azure AD B2C-klientnamn /domännamn (till exempel contoso.onmicrosoft.com).
autentiseringsuppgifter	clientID	Webb-API-program-ID. I föregående diagram är det programmet med app-ID: 2. Information om hur du hämtar ditt webb-API-programregistrerings-ID finns i Krav.
autentiseringsuppgifter	Emittenten	Anspråksvärdet för token utfärdare iss . Som standard returnerar Azure AD B2C token i följande format: https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. Ersätt <your-tenant-name> med den första delen av ditt Azure AD B2C-klientnamn. Ersätt <your-tenant-ID> med ditt Azure AD B2C-klient-ID.
policies	policyName	Användarflöden eller anpassad princip. Information om hur du hämtar ditt användarflöde eller din princip finns i Krav.
resource	omfattning	Omfången för din registrering av webb-API-program. Information om hur du hämtar ditt webb-API-omfång finns i Krav.

Steg 7: Kör och testa webb-API:et

Kör slutligen webb-API:et med dina Azure AD B2C-miljöinställningar.

ASP.NET Core

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 .

Dricks

Om du vill köra dotnet run kommandot kan du också använda Felsökningsprogrammet för Visual Studio Code. Visual Studio Codes inbyggda felsökningsprogram hjälper dig att påskynda din redigerings-, kompilerings- och felsökningsloop.

Ö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.

Node.js

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 .

Dricks

Du kan också köra node app.js kommandot genom att använda Felsökningsprogrammet för Visual Studio Code. Visual Studio Codes inbyggda felsökningsprogram hjälper dig att påskynda din redigerings-, kompilerings- och felsökningsloop.

Ö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.

Steg 8: Anropa webb-API:et från din app

Försök att anropa den skyddade webb-API-slutpunkten utan en åtkomsttoken. Öppna en webbläsare och navigera till http://localhost:6000/hello. API:et returnerar ett otillåtet HTTP-felmeddelande som bekräftar att webb-API:et är skyddat med en ägartoken.

Fortsätt att konfigurera appen så att den anropar webb-API:et. Vägledning finns i avsnittet Förutsättningar .

Titta på den här videon om du vill veta mer om några metodtips när du integrerar Azure AD B2C med ett API.

Nästa steg

Hämta det fullständiga exemplet på GitHub:

ASP.NET Core

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

Node.js

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