Web-App für Benutzeranmeldungen: Codekonfiguration

Die Codeausschnitte in diesem und den folgenden Artikeln stammen aus Kapitel 1 des inkrementellen Tutorials zu ASP.NET Core-Web-Apps.

In diesem Tutorial finden Sie auch ausführliche Informationen zur Implementierung.

Die Codeausschnitte in diesem und den folgenden Artikeln stammen aus dem ASP.NET-Web-App-Beispiel.

Dieses Beispiel enthält auch ausführliche Informationen zur Implementierung.

Die Codeausschnitte in diesem und den folgenden Artikeln stammen aus dem MSAL-Java-Beispiel Java-Webanwendung für den Aufruf von Microsoft Graph.

Dieses Beispiel enthält auch ausführliche Informationen zur Implementierung.

Die Codeausschnitte in diesem und den folgenden Artikeln stammen aus dem MSAL-Node-Beispiel Node.js-Webanwendung für Anmeldung von Benutzern.

Dieses Beispiel enthält auch ausführliche Informationen zur Implementierung.

Die Codeausschnitte in diesem und den folgenden Artikeln stammen aus dem Beispiel Python-Webanwendung für den Aufruf von Microsoft Graph, in dem das Identitätspaket (ein Wrapper um MSAL-Python) verwendet wird.

Dieses Beispiel enthält auch ausführliche Informationen zur Implementierung.

In ASP.NET Core befinden sich diese Einstellungen in der Datei appsettings.json im Abschnitt „Microsoft Entra ID“.

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "[Enter the tenantId here]",

    // Client ID (application ID) obtained from the Azure portal
    "ClientId": "[Enter the Client Id here]",
    "CallbackPath": "/signin-oidc",
    "SignedOutCallbackPath": "/signout-oidc"
  }
}

In ASP.NET Core gibt es eine weitere Datei (properties\launchSettings.json), die die URL (applicationUrl) und den TLS-/SSL-Port (sslPort) für Ihre Anwendung und verschiedenen Profile enthält.

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:3110/",
      "sslPort": 44321
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "webApp": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:3110/"
    }
  }
}

Im Azure-Portal müssen die Umleitungs-URIs, die Sie auf der Seite Authentifizierung für Ihre Anwendung registrieren, mit diesen URLs übereinstimmen. Für die beiden obigen Konfigurationsdateien wäre dies https://localhost:44321/signin-oidc. Der Grund hierfür ist, dass applicationUrl zwar http://localhost:3110 ist, aber sslPort angegeben wird (44321). CallbackPath ist /signin-oidc, wie in appsettings.jsondefiniert.

Auf die gleiche Weise wird der Abmelde-URI auf https://localhost:44321/signout-oidc festgelegt.

In ASP.NET wird die Anwendung über die Zeilen 12 bis 15 der Datei appsettings.json konfiguriert.

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "[Enter the tenantId here]",
    "ClientId": "[Enter the Client Id here]",
  }
}

Im Azure-Portal müssen die Antwort-URIs, die Sie auf der Seite Authentifizierung für Ihre Anwendung registrieren, mit diesen URLs übereinstimmen. Das heißt, sie sollten https://localhost:44326/ sein.

In Java befindet sich die Konfiguration in der Datei application.properties unter src/main/resources.

aad.clientId=Enter_the_Application_Id_here
aad.authority=https://login.microsoftonline.com/Enter_the_Tenant_Info_Here/
aad.secretKey=Enter_the_Client_Secret_Here
aad.redirectUriSignin=http://localhost:8080/msal4jsample/secure/aad
aad.redirectUriGraph=http://localhost:8080/msal4jsample/graph/me

Im Azure-Portal müssen die Antwort-URIs, die Sie auf der Seite Authentifizierung für Ihre Anwendung registrieren, mit den redirectUri-Instanzen übereinstimmen, die von der Anwendung definiert werden. Das heißt, sie sollten http://localhost:8080/msal4jsample/secure/aad und http://localhost:8080/msal4jsample/graph/me sein.

Hier befinden sich die Konfigurationsparameter in .env.dev als Umgebungsvariablen:

CLOUD_INSTANCE="Enter_the_Cloud_Instance_Id_Here" # cloud instance string should end with a trailing slash
TENANT_ID="Enter_the_Tenant_Info_Here"
CLIENT_ID="Enter_the_Application_Id_Here"
CLIENT_SECRET="Enter_the_Client_Secret_Here"

REDIRECT_URI="http://localhost:3000/auth/redirect"
POST_LOGOUT_REDIRECT_URI="http://localhost:3000"

GRAPH_API_ENDPOINT="Enter_the_Graph_Endpoint_Here" # graph api endpoint string should end with a trailing slash

EXPRESS_SESSION_SECRET="Enter_the_Express_Session_Secret_Here"

Diese Parameter werden verwendet, um ein Konfigurationsobjekt in der Datei authConfig.js zu erstellen, das schließlich zum Initialisieren von MSAL Node verwendet wird:

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

require('dotenv').config({ path: '.env.dev' });

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID, // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.CLOUD_INSTANCE + process.env.TENANT_ID, // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
        clientSecret: process.env.CLIENT_SECRET // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 3,
        }
    }
}

const REDIRECT_URI = process.env.REDIRECT_URI;
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI;
const GRAPH_ME_ENDPOINT = process.env.GRAPH_API_ENDPOINT + "v1.0/me";

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    GRAPH_ME_ENDPOINT
};

Im Azure-Portal müssen die Antwort-URIs, die Sie auf der Seite „Authentifizierung“ für Ihre Anwendung registrieren, mit den redirectUri-Instanzen übereinstimmen, die von der Anwendung definiert werden (http://localhost:3000/auth/redirect).

Der Einfachheit halber wird in diesem Artikel der geheime Clientschlüssel in der Konfigurationsdatei gespeichert. Erwägen Sie in der Produktions-App die Verwendung eines Schlüsseltresors oder einer Umgebungsvariablen. Die Verwendung eines Zertifikats ist eine noch bessere Möglichkeit.

Die Konfigurationsparameter werden in der .env-Datei als Umgebungsvariablen festgelegt:

# Note: If you are using Azure App Service, go to your app's Configuration,
# and then set the following values into your app's "Application settings".

CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>

# Expects a full authority URL such as "https://login.microsoftonline.com/TENANT_GUID"
# or "https://login.microsoftonline.com/contoso.onmicrosoft.com".
# Alternatively, leave it undefined if you are building a multi-tenant app in world-wide cloud
#AUTHORITY=<authority url>

Auf diese Umgebungsvariablen wird in app_config.py verwiesen:

import os

# Application (client) ID of app registration
CLIENT_ID = os.getenv("CLIENT_ID")
# Application's generated client secret: never check this into source control!
CLIENT_SECRET = os.getenv("CLIENT_SECRET")

# You can configure your authority via environment variable
# Defaults to a multi-tenant app in world-wide cloud
AUTHORITY = os.getenv("AUTHORITY", "https://login.microsoftonline.com/common")

REDIRECT_PATH = "/getAToken"  # Used for forming an absolute URL to your redirect URI.
# The absolute URL must match the redirect URI you set
# in the app's registration in the Azure portal.

# You can find more Microsoft Graph API endpoints from Graph Explorer
# https://developer.microsoft.com/en-us/graph/graph-explorer
ENDPOINT = 'https://graph.microsoft.com/v1.0/users'  # This resource requires no admin consent

# You can find the proper permission names from this document
# https://docs.microsoft.com/en-us/graph/permissions-reference
SCOPE = ["User.ReadBasic.All"]

# Tells the Flask-session extension to store sessions in the filesystem
SESSION_TYPE = "filesystem"
# Using the file system will not work in most production systems,
# it's better to use a database-backed session store instead.

Die .env-Datei sollte nie in die Quellcodeverwaltung eingecheckt werden, da sie Geheimnisse enthält. Das Schnellstartbeispiel enthält eine .gitignore-Datei, die das Einchecken der .env-Datei verhindert.

# Environments
.env

In ASP.NET Core-Web-Apps (und Web-APIs) ist die Anwendung geschützt, da es das Attribut Authorize für die Controller bzw. Controlleraktionen gibt. Mit diesem Attribut wird geprüft, ob der Benutzer authentifiziert ist. Vor der Einführung von .NET 6 befand sich die Codeinitialisierung in der Datei Startup.cs. Neue ASP.NET Core-Projekte mit .NET 6 enthalten keine Startup.cs-Datei mehr. An ihre Stelle tritt die Datei Program.cs. Der Rest dieses Tutorials bezieht sich auf .NET 5 oder niedriger.

 services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
         .AddAzureAD(options => Configuration.Bind("AzureAd", options));

1. Fügen Sie dem Projekt die NuGet-Pakete Microsoft.Identity.Web und Microsoft.Identity.Web.UI hinzu. Entfernen Sie das NuGet-Paket Microsoft.AspNetCore.Authentication.AzureAD.UI, wenn es vorhanden ist.

2. Aktualisieren Sie den Code in ConfigureServices, sodass er die Methoden AddMicrosoftIdentityWebApp und AddMicrosoftIdentityUI verwendet.

   public class Startup
   {
    ...
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
     services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
            .AddMicrosoftIdentityWebApp(Configuration, "AzureAd");
   
     services.AddRazorPages().AddMvcOptions(options =>
     {
      var policy = new AuthorizationPolicyBuilder()
                    .RequireAuthenticatedUser()
                    .Build();
      options.Filters.Add(new AuthorizeFilter(policy));
     }).AddMicrosoftIdentityUI();
   

3. Aktivieren Sie in der Configure-Methode in der Datei Startup.cs die Authentifizierung mit einem Aufruf von app.UseAuthentication(); und app.MapControllers();.

   // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
   public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
   {
    // more code here
    app.UseAuthentication();
    app.UseAuthorization();
   
    app.MapRazorPages();
    app.MapControllers();
    // more code here
   }
   

Informationen zu diesem Code:

• Die Erweiterungsmethode AddMicrosoftIdentityWebApp ist definiert in Microsoft.Identity.Web für folgende Aufgaben:

  • Konfigurieren von Optionen zum Lesen der Konfigurationsdatei (hier aus dem Abschnitt „Microsoft Entra ID“)
  • Konfigurieren der OpenID Connect-Optionen, damit Microsoft Identity Platform die verwendete Autorität ist
  • Validieren des Ausstellers des Tokens
  • Sicherstellen der Zuordnung der dem Namen entsprechenden Ansprüche aus dem Anspruch preferred_username im ID-Token

• Neben dem Konfigurationsobjekt können Sie beim Aufruf von AddMicrosoftIdentityWebApp auch den Namen des Konfigurationsabschnitts angeben. Dieser lautet standardmäßig AzureAd.

• AddMicrosoftIdentityWebApp weist andere Parameter für erweiterte Szenarien auf. Das Verfolgen von Ereignissen der OpenID Connect-Middleware beispielsweise kann bei der Behebung von Fehlern bei Ihrer Webanwendung helfen, wenn die Authentifizierung nicht funktioniert. Wenn Sie den optionalen Parameter subscribeToOpenIdConnectMiddlewareDiagnosticsEvents auf true festlegen, können Sie sehen, wie Informationen beim Fortschritt von der HTTP-Antwort zur Identität des Benutzers in HttpContext.User von der ASP.NET Core-Middleware verarbeitet werden.

• Die AddMicrosoftIdentityUI-Erweiterungsmethode ist im Paket Microsoft.Identity.Web.UI definiert. Sie stellt einen Standardcontroller zum Behandeln der An- und Abmeldung bereit.

Weitere Informationen darüber, wie Sie mit Microsoft.Identity.Web Web-Anwendungen erstellen können, finden Sie unter Web Apps in Microsoft.Identity.Web.

Der Code für die Authentifizierung in ASP.NET-Web-Apps und -Web-APIs befindet sich in der Datei App_Start/Startup.Auth.cs.

 public void ConfigureAuth(IAppBuilder app)
 {
  app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);

  app.UseCookieAuthentication(new CookieAuthenticationOptions());

  OwinTokenAcquirerFactory factory = TokenAcquirerFactory.GetDefaultInstance<OwinTokenAcquirerFactory>();
  factory.Build();
  app.AddMicrosoftIdentityWebApi(factory);
 }

Das Java-Beispiel verwendet das Spring-Framework. Die Anwendung ist geschützt, da Sie einen Filter implementieren, der jede HTTP-Antwort abfängt. Im Schnellstart für Java-Web-Apps handelt es sich dabei um den Filter AuthFilter in src/main/java/com/microsoft/azure/msalwebsample/AuthFilter.java.

Der Filter verarbeitet den OAuth 2.0-Autorisierungscodeflow und überprüft, ob der Benutzer authentifiziert ist (isAuthenticated()-Methode). Wenn der Benutzer nicht authentifiziert ist, wird die URL der Microsoft Entra-Autorisierungsendpunkte berechnet und der Browser zu diesem URI umgeleitet.

Wenn die Antwort mit dem Autorisierungscode eingeht, wird mit MSAL für Java das Token abgerufen. Wenn das Token schließlich vom Tokenendpunkt (im Umleitungs-URI) empfangen wird, erfolgt die Benutzeranmeldung.

Weitere Informationen finden Sie unter der doFilter()-Methode in AuthFilter.java.

Unter Microsoft Identity Platform und der OAuth 2.0-Autorisierungscodeflow finden Sie Einzelheiten zu dem durch diese Methode ausgelösten Autorisierungscodeflow.

Im Knotenbeispiel wird das Express-Framework verwendet. MSAL wird im auth-Routenhandler initialisiert:

var express = require('express');

const authProvider = require('../auth/AuthProvider');
const { REDIRECT_URI, POST_LOGOUT_REDIRECT_URI } = require('../authConfig');

const router = express.Router();

router.get('/signin', authProvider.login({
    scopes: [],
    redirectUri: REDIRECT_URI,
    successRedirect: '/'

Das Python-Beispiel wird mit dem Flask-Framework erstellt, obwohl auch andere Frameworks wie Django verwendet werden können. Die Flask-App wird mit der App-Konfiguration am Anfang in app.py initialisiert:

import identity
import identity.web
import requests
from flask import Flask, redirect, render_template, request, session, url_for
from flask_session import Session

import app_config

app = Flask(__name__)
app.config.from_object(app_config)
Session(app)

Anschließend erstellt der Code mithilfe des Identitätspakets ein auth-Objekt.

auth = identity.web.Auth(
    session=session,
    authority=app.config["AUTHORITY"],
    client_id=app.config["CLIENT_ID"],
    client_credential=app.config["CLIENT_SECRET"],
)