Authentifizieren von JavaScript-Apps bei Azure-Diensten während der lokalen Entwicklung mithilfe von Dienstprinzipalen

  • Artikel

Wenn Sie Cloudanwendungen erstellen, müssen Entwickler Anwendungen auf ihrer lokalen Arbeitsstation debuggen und testen. Wenn eine Anwendung während der lokalen Entwicklung auf der Arbeitsstation eines Entwicklers ausgeführt wird, muss sie sich weiterhin bei allen von der App verwendeten Azure-Diensten authentifizieren. In diesem Artikel erfahren Sie, wie Sie dedizierte Anwendungsdienstprinzipalobjekte einrichten, die während der lokalen Entwicklung verwendet werden sollen.

Ein Diagramm, das zeigt, wie eine JavaScript-App während der lokalen Entwicklung die Anmeldeinformationen des Entwicklers verwendet, um eine Verbindung mit Azure herzustellen, indem diese Anmeldeinformationen lokal installierte Entwicklungstools abgerufen werden.

Dedizierte Anwendungsdienstprinzipale für die lokale Entwicklung ermöglichen es Ihnen, das Prinzip der geringsten Rechte während der App-Entwicklung zu befolgen. Da Berechtigungen genau auf das festgelegt sind, was für die App während der Entwicklung benötigt wird, wird der App-Code daran gehindert, versehentlich auf eine Azure-Ressource zuzugreifen, die für die Verwendung durch eine andere App vorgesehen ist. Diese Methode verhindert auch, dass Fehler auftreten, wenn die App in die Produktion verschoben wird, da die App in der Entwicklungsumgebung überprivilegiert wurde.

Ein Anwendungsdienstprinzipal wird für die App eingerichtet, wenn die App in Azure registriert ist. Beim Registrieren von Apps für die lokale Entwicklung wird Folgendes empfohlen:

  • Erstellen Sie separate App-Registrierungen für jeden Entwickler, der an der App arbeitet. Diese Methode erstellt separate Anwendungsdienstprinzipale für jeden Entwickler, die während der lokalen Entwicklung verwendet werden sollen, und vermeiden, dass Entwickler Anmeldeinformationen für einen einzelnen Anwendungsdienstprinzipal freigeben müssen.
  • Erstellen Sie separate App-Registrierungen pro App. Dadurch werden die Berechtigungen der App nur auf das festgelegt, was von der App benötigt wird.

Während der lokalen Entwicklung werden Umgebungsvariablen mit der Identität des Anwendungsdienstprinzipals festgelegt. Das Azure SDK für JavaScript liest diese Umgebungsvariablen und verwendet diese Informationen, um die App bei den benötigten Azure-Ressourcen zu authentifizieren.

1 - Registrieren der Anwendung in Azure AD

Anwendungsdienstprinzipalobjekte werden mit einer App-Registrierung in Azure erstellt. Sie können Dienstprinzipale entweder mit dem Azure-Portal oder der Azure CLI erstellen.

Melden Sie sich beim Azure-Portal an, und führen Sie die folgenden Schritte aus.

Anweisungen Screenshot
Im Azure-Portal:
  1. Geben Sie auf der Suchleiste oben im Azure-Portal App Registrierungen ein.
  2. Wählen Sie im Menü, das unter der Suchleiste angezeigt wird, unter der Rubrik Dienste die Option App Registrierungen aus.
 Screenshot: Verwenden der oberen Suchleiste im Azure-Portal zum Suchen und Navigieren zur Seite „App-Registrierungen
Wählen Sie auf der Seite „App-Registrierungen“ die Option + Neue Registrierung aus. Screenshot: Position der Schaltfläche „Neue Registrierung
Füllen Sie auf der Seite Registrieren einer Anwendung das Formular wie folgt aus.
  1. Name → Geben Sie einen Namen für die App-Registrierung in Azure ein. Es wird empfohlen, dass dieser Name den App-Namen, den Benutzer, für den die App-Registrierung gilt, und einen Bezeichner wie "dev" enthalten, um anzugeben, dass diese App-Registrierung für die lokale Entwicklung verwendet werden soll.
  2. Unterstützte Kontotypen → Nur Konten in diesem Organisationsverzeichnis.
Wählen Sie Registrieren aus, um Ihre App zu registrieren und den Anwendungsdienstprinzipal zu erstellen.		 Screenshot: Ausfüllen der Seite Anwendung registrieren, indem Sie der App einen Namen geben und unterstützte Kontotypen nur als Konten in diesem Organisationsverzeichnis angeben.
Auf der App-Registrierungsseite für Ihre App:
  1. Anwendungs-ID (Client-ID ) → Dies ist die App-ID, die die App für den Zugriff auf Azure während der lokalen Entwicklung verwendet. Kopieren Sie diesen Wert an einen temporären Speicherort in einem Text-Editor, da Sie ihn in einem zukünftigen Schritt benötigen.
  2. Verzeichnis-ID (Mandanten-ID) → Dieser Wert wird auch von Ihrer App benötigt, wenn sie sich bei Azure authentifiziert. Kopieren Sie diesen Wert an einen temporären Speicherort in einem Text-Editor, da Sie ihn in einem zukünftigen Schritt benötigen.
  3. Clientanmeldeinformationen → Sie müssen die Clientanmeldeinformationen für die App festlegen, bevor Ihre App sich bei Azure authentifizieren und Azure-Dienste verwenden kann. Wählen Sie Zertifikat oder Geheimnis hinzufügen aus, um Anmeldeinformationen für Ihre App hinzuzufügen.
 Screenshot nach Abschluss der App-Registrierung mit dem Speicherort der Anwendungs-ID, Mandanten-ID.
Wählen Sie auf der Seite „Zertifikate und geheime Schlüssel“ + Neuer geheimer Clientschlüssel aus. Screenshot: Speicherort des Links, der zum Erstellen eines neuen geheimen Clientschlüssels auf der Seite „Zertifikate und Geheimnisse
Das Dialogfeld Geheimer Clientschlüssel hinzufügen wird auf der rechten Seite der Seite angezeigt. In diesem Dialog:
  1. Beschreibung → Geben Sie den Wert Current ein.
  2. Läuft aus→ Wählen Sie einen Wert von 24 Monaten aus.
Wählen Sie Hinzufügen aus, um das Geheimnis hinzuzufügen.		 Screenshot: Seite, auf der ein neuer geheimer Clientschlüssel für den Anwendungsdienstprinzipal hinzugefügt wird, der durch den App-Registrierungsprozess erstellt wird.
Auf der Seite "Zertifikate und Geheime Schlüssel " werden Sie den Wert des geheimen Clientschlüssels angezeigt.

Kopieren Sie diesen Wert an einen temporären Speicherort in einem Text-Editor, da Sie ihn in einem zukünftigen Schritt benötigen.

WICHTIG: Dies ist das einzige Mal, wenn dieser Wert angezeigt wird. Sobald Sie diese Seite verlassen oder aktualisieren, können Sie diesen Wert nicht mehr sehen. Sie können weitere geheime Clientschlüssel hinzufügen, ohne diesen geheimen Clientschlüssel ungültig zu machen, aber dieser Wert wird nicht mehr angezeigt.		 Screenshot: Seite mit dem generierten geheimen Clientschlüssel.

2 – Erstellen einer Microsoft Entra-Sicherheitsgruppe für die lokale Entwicklung

Da es in der Regel mehrere Entwickler gibt, die an einer Anwendung arbeiten, empfiehlt es sich, eine Microsoft Entra-Gruppe zu erstellen, um die Rollen (Berechtigungen) zu kapseln, die die App in der lokalen Entwicklung benötigt, anstatt die Rollen einzelnen Dienstprinzipalobjekten zuzuweisen. Dies bietet die folgenden Vorteile:

  • Jedem Entwickler wird sichergestellt, dass dieselben Rollen zugewiesen werden, da Rollen auf Gruppenebene zugewiesen werden.
  • Wenn eine neue Rolle für die App erforderlich ist, muss sie nur der Microsoft Entra-Gruppe für die App hinzugefügt werden.
  • Wenn ein neuer Entwickler dem Team beitritt, wird ein neuer Anwendungsdienstprinzipal für den Entwickler erstellt und der Gruppe hinzugefügt, um zu sorgen, dass der Entwickler über die richtigen Berechtigungen für die Arbeit an der App verfügt.
Anweisungen Screenshot
Navigieren Sie zur Microsoft Entra-ID-Seite im Azure-Portal, indem Sie Microsoft Entra-ID in das Suchfeld oben auf der Seite eingeben und dann Microsoft Entra-ID unter "Dienste" auswählen. Screenshot der Verwendung der oberen Suchleiste in der Azure-Portal zum Suchen und Navigieren zur Microsoft Entra ID-Seite.
Wählen Sie auf der Seite "Microsoft Entra-ID" im linken Menü "Gruppen"aus. Screenshot des Speicherorts des Menüelements
Wählen Sie auf der Seite Alle GruppenNeue Gruppeaus. Screenshot: Position der Schaltfläche „Neue Gruppe
Auf der Seite Neue Gruppe :
  1. Gruppentyp→ Security
  2. Gruppenname → Ein Name für die Sicherheitsgruppe, der in der Regel aus dem Anwendungsnamen erstellt wird. Es ist auch hilfreich, eine Zeichenfolge wie local-dev in den Namen der Gruppe aufzunehmen, um den Zweck der Gruppe anzugeben.
  3. Gruppenbeschreibung → Eine Beschreibung des Zwecks der Gruppe.
  4. Wählen Sie unter Mitglieder den Link Keine Mitglieder ausgewählt aus, um der Gruppe Mitglieder hinzuzufügen.
 Screenshot, der zeigt, wie Sie eine neue Microsoft Entra-Gruppe für die Anwendung erstellen.
Das Dialogfeld Mitglieder hinzufügen wird angezeigt.
  1. Verwenden Sie das Suchfeld, um die Liste der Namen der Auftraggeber in der Liste zu filtern.
  2. Wählen Sie die Anwendungsdienstprinzipale für die lokale Entwicklung für diese App aus. Wenn Objekte ausgewählt werden, werden sie ausgegraut und in die Liste Ausgewählte Objekte unten im Dialogfeld verschoben.
  3. Wenn Sie fertig sind, wählen Sie die Schaltfläche Auswählen aus.
 Screenshot des Dialogfelds Mitglieder hinzufügen, das zeigt, wie Entwicklerkonten ausgewählt werden, die in die Gruppe aufgenommen werden sollen..
Wählen Sie auf der Seite Neue Gruppe die Option Erstellen aus, um die Gruppe zu erstellen.

Die Gruppe wird erstellt, und Sie werden zur Seite Alle Gruppen zurückgeführt. Es kann bis zu 30 Sekunden dauern, bis die Gruppe angezeigt wird, und Sie müssen die Seite möglicherweise aktualisieren, da sie im Azure-Portal zwischengespeichert wird.		 Screenshot der Seite „Neue Gruppe

3 : Zuweisen von Rollen zur Anwendung

Als Nächstes müssen Sie bestimmen, welche Rollen (Berechtigungen) Ihre App für welche Ressourcen benötigt, und diese Rollen Ihrer App zuweisen. In diesem Beispiel werden die Rollen der In Schritt 2 erstellten Microsoft Entra-Gruppe zugewiesen. Rollen können in einem Ressourcen-, Ressourcengruppen- oder Abonnementbereich eine Rolle zugewiesen werden. In diesem Beispiel wird gezeigt, wie Rollen im Ressourcengruppenbereich zugewiesen werden, da die meisten Anwendungen alle ihre Azure-Ressourcen in einer einzelnen Ressourcengruppe gruppieren.

Anweisungen Screenshot
Suchen Sie die Ressourcengruppe für Ihre Anwendung, indem Sie über das Suchfeld oben im Azure-Portal nach dem Namen der Ressourcengruppe suchen.

Navigieren Sie zu Ihrer Ressourcengruppe, indem Sie den Namen der Ressourcengruppe unter der Überschrift Ressourcengruppen im Dialogfeld auswählen.		 Screenshot: Verwenden des oberen Suchfelds im Azure-Portal zum Suchen und Navigieren zu der Ressourcengruppe, denen Sie Rollen (Berechtigungen) zuweisen möchten.
Wählen Sie auf der Seite für die Ressourcengruppe im linken Menü Die Option Zugriffssteuerung (IAM) aus. Screenshot der Seite
Klicken Sie auf der Seite Zugriffssteuerungseinstellungen:
  1. Klicken Sie auf die Registerkarte Rollenzuweisungen.
  2. Wählen Sie im oberen Menü + Hinzufügen und aus dem dann angezeigten Dropdownmenü die Option Rollenzuweisung hinzufügen aus.
 Screenshot, der zeigt, wie Sie zur Registerkarte Rollenzuweisungen und zum Speicherort der Schaltfläche navigieren, die zum Hinzufügen von Rollenzuweisungen zu einer Ressourcengruppe verwendet wird.
Auf der Seite Rollenzuweisung hinzufügen werden alle Rollen aufgelistet, die der Ressourcengruppe zugewiesen werden können.
  1. Verwenden Sie das Suchfeld, um die Liste auf eine besser verwaltbare Größe zu filtern. In diesem Beispiel wird gezeigt, wie Sie nach Storage-Blobrollen filtern.
  2. Wählen Sie die Rolle aus, die Sie zuweisen möchten.
    Klicken Sie auf Weiter, um zum nächsten Bildschirm zu wechseln.
 Screenshot: Filtern und Auswählen von Rollenzuweisungen, die der Ressourcengruppe hinzugefügt werden sollen.
Auf der nächsten Seite Rollenzuweisung hinzufügen können Sie angeben, welchem Benutzer die Rolle zugewiesen werden soll.
  1. Wählen Sie unter Zugriff zuweisendie Option Benutzer, Gruppe oder Dienstprinzipal aus.
  2. Wählen Sie unter Mitglieder die Option +Mitglieder auswählen aus.
Ein Dialogfeld wird auf der rechten Seite des Azure-Portal geöffnet.		 Screenshot des Optionsfelds zum Auswählen, um einer Microsoft Entra-Gruppe eine Rolle zuzuweisen, und der Link, mit dem die Gruppe ausgewählt wird, der die Rolle zugewiesen werden soll.
Im Dialogfeld Mitglieder auswählen :
  1. Das Textfeld Auswählen kann verwendet werden, um die Liste der Benutzer und Gruppen in Ihrem Abonnement zu filtern. Geben Sie bei Bedarf die ersten Zeichen der microsoft Entra-Gruppe für die lokale Entwicklung ein, die Sie für die App erstellt haben.
  2. Wählen Sie die lokale Entwicklungsgruppe Microsoft Entra aus, die Ihrer Anwendung zugeordnet ist.
Wählen Sie unten im Dialogfeld Auswählen aus, um den Vorgang fortzusetzen.		 Screenshot, der zeigt, wie Die Microsoft Entra-Gruppe für die Anwendung im Dialogfeld
Die Microsoft Entra-Gruppe wird auf dem Bildschirm "Rollenzuweisung hinzufügen" als ausgewählt angezeigt.

Wählen Sie Überprüfen und zuweisen aus, um zur letzten Seite zu gelangen, und wählen Sie erneut Überprüfen und zuweisen aus, um den Vorgang abzuschließen.		 Screenshot der abgeschlossenen Seite

4 – Festlegen lokaler Entwicklungsumgebungsvariablen

Das DefaultAzureCredential Objekt sucht zur Laufzeit nach den Dienstprinzipalinformationen in einer Gruppe von Umgebungsvariablen. Da die meisten Entwickler an mehreren Anwendungen arbeiten, empfiehlt es sich, ein Paket wie Dotenv für den Zugriff auf die Umgebung aus einer .env Datei zu verwenden, die während der Entwicklung im Verzeichnis der Anwendung gespeichert ist. Dadurch werden die Umgebungsvariablen verwendet, um die Anwendung bei Azure zu authentifizieren, sodass sie nur von dieser Anwendung verwendet werden können.

Die .env Datei wird nie in die Quellcodeverwaltung eingecheckt, da sie den geheimen Anwendungsschlüssel für Azure enthält. Die standardmäßige GITIGnore-Datei für JavaScript schließt die .env Datei automatisch aus dem Einchecken aus.

Um das dotenv Paket zu verwenden, installieren Sie zuerst das Paket in Ihrer Anwendung.

npm install dotenv

Erstellen Sie dann eine .env Datei in Ihrem Anwendungsstammverzeichnis. Legen Sie die Umgebungsvariablenwerte mit Werten fest, die aus dem App-Registrierungsprozess wie folgt abgerufen werden:

  • AZURE_CLIENT_ID → Der App-ID-Wert.
  • AZURE_TENANT_ID → Der Wert der Mandanten-ID.
  • AZURE_CLIENT_SECRET → Das für die App generierte Kennwort/Anmeldeinformationen.
AZURE_CLIENT_ID=00000000-0000-0000-0000-000000000000
AZURE_TENANT_ID=11111111-1111-1111-1111-111111111111
AZURE_CLIENT_SECRET=abcdefghijklmnopqrstuvwxyz

Verwenden Sie schließlich im Startcode für Ihre Anwendung die dotenv Bibliothek, um die Umgebungsvariablen aus der .env Datei beim Start zu lesen.

import 'dotenv/config'

5 - Implementieren von DefaultAzureCredential in Ihrer Anwendung

Um Azure SDK-Clientobjekte für Azure zu authentifizieren, sollte Ihre Anwendung die DefaultAzureCredential Klasse aus dem @azure/identity Paket verwenden. In diesem Szenario werden die Umgebungsvariablen AZURE_TENANT_IDAZURE_CLIENT_IDerkannt und diese Variablen festgelegt und AZURE_CLIENT_SECRET gelesen, DefaultAzureCredential um die Dienstprinzipalinformationen für die Verbindung mit Azure abzurufen.

Fügen Sie zunächst das @azure-/Identitätspaket zu Ihrer Anwendung hinzu.

npm install @azure/identity

Als Nächstes sollten Sie für jeden JavaScript-Code, der ein Azure SDK-Clientobjekt in Ihrer App erstellt, Folgendes ausführen:

  1. Importieren Sie die DefaultAzureCredential Klasse aus dem @azure/identity Modul.
  2. Erstellen eines DefaultAzureCredential-Objekts
  3. Übergeben Sie das DefaultAzureCredential Objekt an den Azure SDK-Clientobjektkonstruktor.

Ein Beispiel dafür wird im folgenden Codeausschnitt gezeigt.

// Azure authentication dependency
import { DefaultAzureCredential } from '@azure/identity';

// Azure resource management dependency
import { SubscriptionClient } from "@azure/arm-subscriptions";

// Acquire credential
const tokenCredential = new DefaultAzureCredential();

async function listSubscriptions() {
  try {

    // use credential to authenticate with Azure SDKs
    const client = new SubscriptionClient(tokenCredential);

    // get details of each subscription
    for await (const item of client.subscriptions.list()) {
      const subscriptionDetails = await client.subscriptions.get(
        item.subscriptionId
      );
      /* 
        Each item looks like:
      
        {
          id: '/subscriptions/123456',
          subscriptionId: '123456',
          displayName: 'YOUR-SUBSCRIPTION-NAME',
          state: 'Enabled',
          subscriptionPolicies: {
            locationPlacementId: 'Internal_2014-09-01',
            quotaId: 'Internal_2014-09-01',
            spendingLimit: 'Off'
          },
          authorizationSource: 'RoleBased'
        },
    */
      console.log(subscriptionDetails);
    }
  } catch (err) {
    console.error(JSON.stringify(err));
  }
}

listSubscriptions()
  .then(() => {
    console.log("done");
  })
  .catch((ex) => {
    console.log(ex);
  });

DefaultAzureCredential erkennt automatisch den für die App konfigurierten Authentifizierungsmechanismus und ruft die erforderlichen Token ab, um die App bei Azure zu authentifizieren. Wenn eine Anwendung mehrere SDK-Clients verwendet, kann dasselbe Anmeldeinformationsobjekt mit jedem SDK-Clientobjekt verwendet werden.