Share via

Schnellstart: Erste Schritte mit der Microsoft Entra External ID-Erweiterung für Visual Studio Code (Vorschau)

  • Artikel

Die Integration der Authentifizierung in Ihre kundenorientierten Anwendungen für Privat- und Geschäftskundschaft ist für die Sicherung von Ressourcen und Kundendaten unerlässlich. Mit der Microsoft Entra External ID-Erweiterung für Visual Studio Code können Sie Anwendungen schnell die Authentifizierung für Kundenidentitäts- und Zugriffsverwaltungsszenarien (Customer Identity and Access Management, CIAM) hinzufügen. Mithilfe der bereitgestellten Anwendungsbeispiele können Sie sehen, wie Sie eine angepasste, markenorientierte Anmeldeerfahrung für externe Benutzer Ihrer Anwendung einrichten, ohne die Entwicklungsumgebung verlassen zu müssen.

Screenshot mit einer Übersicht über die Erweiterung.

Diese Erweiterung bietet ein grundlegendes Setup, das automatisch einen Mandanten für Anwendungen erstellt und ihn für Benutzer vorbereitet. Außerdem optimiert sie Ihren Workflow, indem Werte wie Anwendungs-IDs automatisch in Ihre Konfigurationsdatei aufgefüllt werden, um einen reibungsloseren Setupprozess zu ermöglichen.

External ID ist ein Dienst, der einem Azure-Abonnement hinzugefügt werden kann. Wenn Sie bereits über eines verfügen, können Sie External ID ganz einfach einschließen. Richten Sie andernfalls eine kostenlose Testversion von Microsoft Entra External ID in Visual Studio Code ein, und beginnen Sie mit der Konfiguration einer Beispiel-App.

Installieren Sie die -Erweiterung.

Die Microsoft Entra External ID-Erweiterung ist im Visual Studio Code-Marketplace verfügbar.

  1. Wenn Sie Visual Studio Code noch nicht installiert haben, laden Sie Visual Studio Code herunter, und führen Sie die Installationsschritte aus.
  2. Öffnen Sie Visual Studio Code. Wählen Sie in der Aktivitätsleiste auf der linken Seite die Schaltfläche Erweiterungen aus.
  3. Suchen Sie im Marketplace-Suchfeld „Erweiterungen“ nach Microsoft Entra External ID, und wählen Sie dies aus.
  4. Wählen Sie auf der Übersicht Erste Schritte mit Microsoft Entra External ID die Schaltfläche Installieren aus.
  5. Starten Sie Visual Studio Code neu, wenn Sie dazu aufgefordert werden.

Nachdem die Erweiterung installiert wurde, können Sie über das Symbol auf der Aktivitätsleiste darauf zugreifen.

Screenshot der Optionen für die exemplarische Vorgehensweise für die offene Erweiterung.

Sie können die Erweiterung auch über die Willkommensseite von Visual Studio Code öffnen: Wählen Sie Hilfe>Willkommen und dann unter Exemplarische Vorgehensweisen die Option Erste Schritte mit Microsoft Entra External ID aus. Möglicherweise müssen Sie Weiter... auswählen, um die Liste der Erweiterungen zu erweitern.

Erste Schritte mit dem Setup Ihrer External ID

Die Microsoft Entra External ID-Erweiterung erstellt einen Mandanten in einer externen Konfiguration, die Ihre App und das Verzeichnis der externen Benutzer enthält. Sie können diesen neuen Mandanten zu Ihrem vorhandenen Azure-Abonnement hinzufügen. Oder wenn Sie kein Azure-Abonnement haben, erstellen Sie einen Testmandanten, der kein Abonnement benötigt (weitere Informationen).

  • Wählen Sie auf der Willkommensseite „Erste Schritte mit Microsoft Entra External ID“ eine Option aus:

    • Falls Sie noch nicht über ein Azure-Konto verfügen, wählen Sie Kostenlose Testversion einrichten aus.
    • Wenn Sie bereits über ein Azure-Konto verfügen, wählen Sie Azure-Abonnement verwenden aus.

Einrichten einer kostenlosen Testversion

  1. Wählen Sie Kostenlose Testversion einrichten aus.

  2. Wählen Sie in der Anmeldebestätigungsmeldung die Option Zulassen aus.

  3. Ein neues Browserfenster wird geöffnet. Melden Sie sich mit Ihrem persönlichen Konto, dem Microsoft-Konto (MSA) oder dem GitHub-Konto an. Nachdem Sie angemeldet sind, schließen Sie das Browserfenster.

  4. Kehren Sie zu Visual Studio Code zurück. Wählen Sie im Menü Wo soll sich der Mandant befinden? einen Speicherort für Ihre Mandantendaten aus. Diese Auswahl kann später nicht mehr geändert werden.

  5. Geben Sie einen Namen für den Mandanten ein.

    Screenshot: Mandantennamfeld.

  6. Die Erweiterung erstellt Ihren Testmandanten. Sie können den Fortschritt anzeigen, indem Sie das Fenster Anzeigen>Ausgabe öffnen. Nach Abschluss des Vorgangs wird Der Mandant ist erstellt angezeigt.

Verwenden Ihres Abonnements

  1. Wählen Sie Mein Abonnement verwenden aus.

  2. Wenn mehrere Mandanten mit Ihrem Konto verbunden sind, wird das Menü Verzeichnis auswählen angezeigt. Wählen Sie das Verzeichnis (den Mandanten) aus, das dem Abonnement zugeordnet ist, das Sie verwenden möchten.

    Screenshot des Verzeichnisfelds.

    Hinweis

    Wenn die Meldung Keine Abonnements verfügbar angezeigt wird, können Sie stattdessen eine kostenlose Testversion einrichten.

  3. Eine Browserseite wird geöffnet, auf der Sie sich bei Ihrem Konto anmelden können. Kehren Sie nach der Anmeldung zu Visual Studio Code zurück.

  4. Wählen Sie im Menü Abonnement hinzufügen Ihr Abonnement aus.

  5. Wählen Sie im Menü Ressourcengruppe auswählen eine Ressourcengruppe aus.

  6. Wählen Sie im Menü Wo soll sich der Mandant befinden? einen Speicherort für Ihre Mandantendaten aus. Diese Auswahl kann später nicht mehr geändert werden.

  7. Geben Sie einen Namen für den Mandanten ein, und wählen Sie dann die EINGABETASTE aus, um den Mandanten zu erstellen.

    Screenshot des Felds „Name des Testmandanten“.

    Hinweis

    Dieser Mandantenerstellungsvorgang kann bis zu 30 Minuten dauern. Nachdem der Mandant erstellt wurde, können Sie sowohl im Microsoft Entra Admin Center als auch im Azure-Portal darauf zugreifen.

Anmeldung für Ihre Benutzer einrichten

Sie können Ihre App so konfigurieren, dass Benutzer sich mit ihrer E-Mail-Adresse und einem Kennwort oder einem Einmal-Passcode anmelden können. Sie können auch das Erscheinungsbild der Benutzererfahrung entwerfen, indem Sie Ihr Firmenlogo hinzufügen, die Hintergrundfarbe ändern oder das Anmeldelayout anpassen. Diese Änderungen gelten für das Erscheinungsbild aller Apps in diesem neuen Mandanten.

  1. Wählen Sie unter Registrierung für Ihre Benutzer einrichten die Option Registrierung und Branding einrichten aus.

    Screenshot des Schritts zum Einrichten der Anmeldung und des Brandings.

  2. Sie werden aufgefordert, sich beim neuen Mandanten anzumelden. Wählen Sie Zulassen aus, und wählen Sie im daraufhin geöffneten Browserfenster das Konto aus, das Sie derzeit verwenden, und melden Sie sich an. Kehren Sie zu Visual Studio Code zurück.

  3. Wählen Sie im Menü Wie möchten Sie, dass sich Ihre Benutzer anmelden? ganz oben die Anmeldemethode aus, die Sie Ihren Benutzern zur Verfügung stellen möchten: E-Mail-Adresse und Kennwort oder E-Mail-Adresse und Einmal-Passcode.

    Screenshot mit Anmeldemethoden.

  4. Wählen Sie OK aus.

  5. Wählen Sie aus, wo die Anmeldeseite im Browserfenster angezeigt werden soll, entweder zentriert oder rechtsbündig ausgerichtet.

    Screenshot der Auswahl des Anmeldelayouts.

  6. Wählen Sie eine Hintergrundfarbe für Ihre Anmeldeseite aus.

    Screenshot: Hintergrundfarben.

  7. Als Nächstes öffnet sich ein Datei-Explorer-Fenster, damit Sie Ihr Firmenlogo hinzufügen können. Navigieren Sie zur Datei mit Ihren Firmenlogos, und wählen Sie dann Hochladen aus.

    Hinweis

    Es gelten folgende Anforderungen an das Bild:

    • Bildgröße 245 x 36 Pixel
    • Maximale Dateigröße 50 KB
    • Dateityp: Transparentes PNG oder JPEG

  8. Die Meldung Konfigurieren des Anmeldeflows wird angezeigt. Sie können den Fortschritt im Ausgabefenster anzeigen. Wenn die Konfiguration abgeschlossen ist, wird die Meldung Setup des Benutzerflows ist abgeschlossen angezeigt.

Einrichten und Ausführen einer Beispiel-App

Die Erweiterung enthält mehrere Codebeispiele, die veranschaulichen, wie die Authentifizierung in verschiedenen Anwendungstypen und Entwicklungssprachen implementiert wird. Wählen Sie ein Beispiel für eine Einzelseitenanwendung (JavaScript, React, Angular) aus der Erweiterung aus, und die Erweiterung konfiguriert die Anwendung automatisch mit Ihrer Anmeldeerfahrung.

  1. Wählen Sie unter Einrichten und Ausführen einer Beispiel-App die Schaltfläche Beispiel-App einrichten aus.

    Screenshot des Schritts zum Einrichten und Ausführen eines Beispielschritts in der App.

  2. Wählen Sie im Menü den Typ der Anwendung aus, die Sie herunterladen möchten. Wenn Sie aufgefordert werden, Ihr Konto erneut auszuwählen, wählen Sie das gleiche Konto aus, das Sie verwendet haben.

    Screenshot der Appauswahl.

  3. Ein Datei-Explorer-Fenster wird geöffnet, sodass Sie auswählen können, wo Sie das Beispielrepository speichern möchten. Wählen Sie einen Ordner und dann Repository hierher herunterladen aus.

  4. Nach Abschluss des Downloads wird ein neuer Visual Studio Code-Projektarbeitsbereich mit dem heruntergeladenen App-Ordner geöffnet, der im Explorer angezeigt wird.

  5. Öffnen Sie ein neues Terminal im Visual Studio Code-Fenster.

  6. Wählen Sie im oberen Menü Ausführen>Ausführen ohne Debugging aus. In der Debugging-Konsole wird der Fortschritt des Startskripts angezeigt. Es gibt eine kurze Verzögerung, während das Projekt eingerichtet und das Buildskript ausgeführt wird.

Wenn die Erweiterung die Anwendung herunterlädt, aktualisiert sie automatisch die MSAL (Microsoft Authentication Library)-Konfiguration, um eine Verbindung mit Ihrem neuen Mandanten herzustellen und die von Ihnen eingerichtete Erfahrung zu verwenden. Es ist keine weitere Konfiguration erforderlich. Sie können die Anwendung ausführen, sobald das Projekt erstellt wurde. Beispielsweise wird in der Datei „authConfig“ die clientId auf Ihre Anwendungs-ID festgelegt, und die Autorität wird auf die Unterdomäne für Ihren neuen Mandanten festgelegt.

Screenshot einer Authentifizierungskonfigurationsdatei.

Ausführen der Erfahrung

Testen Sie nach Abschluss des Setups die Anmeldeerfahrung, indem Sie den lokalen Host-Umleitungs-URI für die Anwendung in einem Browser eingeben. Die Umleitungs-URL ist in der Datei README.md der Anwendung verfügbar.

Verwenden der Explorer-Ansicht

Die Explorer-Ansicht zeigt die registrierten Anwendungen und Authentifizierungsbenutzerflows in Ihrem Mandanten an. Sie können Konfigurationsinformationen anzeigen oder direkt zum Microsoft Entra Admin Center navigieren, um die Ressource weiter zu konfigurieren oder zu verwalten. Um auf die Explorer-Ansicht zuzugreifen, öffnen Sie die Microsoft Entra External ID-Erweiterung, indem Sie das Symbol in der Aktivitätsleiste auswählen.

Ressourcen verwalten

Um Projektressourcen anzuzeigen, erweitern Sie die Knoten im linken Bereich unter Ressourcen verwalten.

Screenshot der Exploreransicht.

In der Explorer-Ansicht können Sie eine Ressource auswählen und direkt zum Microsoft Entra Admin Center wechseln, um sie zu verwalten oder zu konfigurieren. Klicken Sie beispielsweise mit der rechten Maustaste auf eine Anwendung, und wählen Sie Im Admin Center Öffnen aus. Sie werden aufgefordert, sich anzumelden, und dann öffnet sich das Microsoft Entra Admin Center direkt auf der App-Registrierungsseite für diese Anwendung.

Screenshot der Option „Im Admin Center öffnen“.

Aktionen für „Erste Schritte“

Im Abschnitt „Erste Schritte“ können Sie auf Dokumentationen für die kostenlose Testversion zugreifen oder direkt zur Konfigurations der Anmeldeerfahrung oder zu den Downloadseiten der Beispiel-App wechseln, ohne die exemplarische Vorgehensweise der Erweiterung zu öffnen.

Screenshot der linken Menüoption zum Starten der exemplarischen Vorgehensweise.

Nächste Schritte

Erfahren Sie mehr über kostenlose Testmandanten für External ID.