Aktivieren der Authentifizierung in Ihrer eigenen Web-API mit Azure AD B2C

• Visual Studio Code
• C# für Visual Studio Code (neueste Version)
• .NET 5.0 SDK

• Visual Studio Code oder ein anderer Code-Editor
• Node.js-Runtime

Verwenden Sie den Befehl dotnet new. Der dotnet new-Befehl erstellt einen neuen Ordner namens TodoList mit den Web-API-Projekt-Ressourcen. Öffnen Sie das Verzeichnis und dann Visual Studio Code.

dotnet new webapi -o TodoList
cd TodoList
code . 

Wenn Sie zum „Hinzufügen der erforderlichen Ressourcen zum Projekt“ aufgefordert werden, wählen Sie Ja aus.

Verwenden Sie Express für Node.js, um eine Web-API zu erstellen. Gehen Sie folgendermaßen vor, um eine Web-API zu erstellen:

1. Erstellen Sie einen neuen Ordner mit dem Namen TodoList.
2. Erstellen Sie im Ordner TodoList eine Datei namens app.js.
3. Führen Sie in einer Befehlsshell npm init -y aus. Dieser Befehl erstellt eine Standarddatei namens package.json für Ihr Node.js-Projekt.
4. Führen Sie npm install express in der Befehlsshell aus. Dieser Befehl installiert das Express-Framework.

Um die Authentifizierungsbibliothek hinzuzufügen, installieren Sie das Paket, indem Sie den folgenden Befehl ausführen:

dotnet add package Microsoft.Identity.Web

Um die Authentifizierungsbibliothek hinzuzufügen, installieren Sie das Paket, indem Sie den folgenden Befehl ausführen:

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

Das morgan-Paket ist eine Middleware für die HTTP-Anforderungsprotokollierung für Node.js.

Öffnen Sie Startup.cs, und fügen Sie am Anfang der Klasse die folgenden using-Deklarationen hinzu:

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

Suchen Sie die Funktion ConfigureServices(IServiceCollection services). Fügen Sie dann vor der services.AddControllers();-Codezeile den folgenden Codeausschnitt hinzu:

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

Suchen Sie die Funktion Configure. Fügen Sie dann unmittelbar nach der app.UseRouting();-Codezeile den folgenden Codeausschnitt hinzu:

app.UseAuthentication();

Nach den Änderungen sollte Ihr Code wie der folgende Codeausschnitt aussehen:

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

Fügen Sie Ihrer app.js-Datei den folgenden JavaScript-Code hinzu.

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

Fügen Sie im Ordner /Controllers eine PublicController.cs-Datei hinzu, und fügen Sie sie dann dem folgenden Codeausschnitt hinzu:

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

Fügen Sie in der app.js-Datei den folgenden JavaScript-Code hinzu:

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

Fügen Sie im Ordner /Controllers eine HelloController.cs-Datei hinzu, und fügen Sie sie dann dem folgenden Code hinzu:

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

Der HelloController-Controller ist mit dem AuthorizeAttribute versehen, das den Zugriff auf authentifizierte Benutzer beschränkt.

Der Controller ist auch mit dem [RequiredScope("tasks.read")] versehen. Das RequiredScopeAttribute überprüft, ob die Web-API mit den richtigen Bereichen aufgerufen wird, tasks.read.

Fügen Sie in der app.js-Datei den folgenden JavaScript-Code hinzu:

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

Der /hello-Endpunkt ruft zunächst die passport.authenticate()-Funktion auf. Die Authentifizierungsfunktion schränkt den Zugriff auf authentifizierte Benutzer ein.

Die Authentifizierungsfunktion überprüft auch, ob die Web-API mit den richtigen Bereichen aufgerufen wird. Die zulässigen Bereiche werden in der Konfigurationsdatei aufgeführt.

Fügen Sie der Datei appsettings.json den folgenden JSON-Ausschnitt hinzu.

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

Fügen Sie der app.js-Datei den folgenden JavaScript-Code hinzu. Es ist möglich, HTTP- und HTTPS-Endpunkte für die Node-Anwendung einzurichten.

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

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

Öffnen Sie im Projektstammordner die Datei appsettings.json, und fügen Sie folgende Einstellungen hinzu:

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

Aktualisieren Sie in der Datei appsettings.json die folgenden Eigenschaften:

Erstellen Sie im Stammordner des Projekts eine config.json-Datei, und fügen Sie sie dann dem folgenden JSON-Ausschnitt hinzu:

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

Aktualisieren Sie in der config.json-Datei folgende Eigenschaften:

Starten Sie die Web-App in der Befehlsshell mit folgendem Befehl:

 dotnet run

Die folgende Ausgabe sollte angezeigt werden. Dies bedeutet, dass Ihre App ausgeführt wird und zum Empfang von Anforderungen bereit ist.

Now listening on: http://localhost:6000

Um das Programm zu beenden, wählen Sie in der Befehlsshell STRG+C aus. Sie können die App mit dem Befehl node app.js erneut ausführen.

Öffnen Sie einen Browser, und wechseln Sie zu http://localhost:6000/public. Im Browserfenster sollte der folgende Text zusammen mit dem aktuellen Datum und der aktuellen Uhrzeit angezeigt werden.

Starten Sie die Web-App in der Befehlsshell mit folgendem Befehl:

node app.js

Die folgende Ausgabe sollte angezeigt werden. Dies bedeutet, dass Ihre App ausgeführt wird und zum Empfang von Anforderungen bereit ist.

Example app listening on port 6000!

Um das Programm zu beenden, wählen Sie in der Befehlsshell STRG+C aus. Sie können die App mit dem Befehl node app.js erneut ausführen.

Öffnen Sie einen Browser, und wechseln Sie zu http://localhost:6000/public. Im Browserfenster sollte der folgende Text zusammen mit dem aktuellen Datum und der aktuellen Uhrzeit angezeigt werden.

• Rufen Sie die Web-API mit der Microsoft-Identitätsbibliothek ab.

• Rufen Sie die Web-API mit der Passport.js-Bibliothek ab.