Anmelden von Benutzer*innen in einer Electron-Beispieldesktopanwendung
In dieser Anleitung wird eine Electron-Beispieldesktopanwendung verwendet, um zu zeigen, wie Sie eine Authentifizierung zu einer Desktopanwendung hinzufügen. Mit der Beispielanwendung können sich Benutzer anmelden und abmelden. Die Beispielwebanwendung verwendet die Microsoft Authentication Library (MSAL) für Node.js, um die Authentifizierung zu verarbeiten.
In diesem Artikel führen Sie die folgenden Aufgaben aus:
Registrieren einer Desktopanwendung im Microsoft Entra Admin Center.
Erstellen eines Benutzerflows zum Anmelden und Abmelden im Microsoft Entra Admin Center.
Zuordnen der Webanwendung zum Benutzerflow.
Aktualisieren Sie eine Electron-Beispieldesktopanwendung mit Ihren eigenen Details für externe Mandanten.
Ausführen und Testen der Beispieldesktopanwendung.
Voraussetzungen
Visual Studio Code oder ein anderer Code-Editor
Ein externer Mandant. Falls Sie noch nicht über die Anwendung verfügen, können Sie sich für eine kostenlose Testversion registrieren.
Registrieren der Desktop-App
Damit Ihre Anwendung Benutzer mit Microsoft Entra anmelden kann, muss Microsoft Entra External ID auf die von Ihnen erstellte Anwendung aufmerksam gemacht werden. Durch die App-Registrierung wird eine Vertrauensstellung zwischen der Anwendung und Microsoft Entra eingerichtet. Wenn Sie eine Anwendung registrieren, generiert External ID einen eindeutigen Bezeichner, die Anwendungs-ID (Client). Dieser Wert wird zum Identifizieren Ihrer Anwendung beim Erstellen von Authentifizierungsanforderungen verwendet.
Die folgenden Schritte veranschaulichen, wie Sie Ihre Anwendung im Microsoft Entra Admin Center registrieren:
Melden Sie sich beim Microsoft Entra Admin Center mindestens mit der Rolle Anwendungsentwickler an.
Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie das Einstellungen-Symbol
im oberen Menü, um über das Menü Verzeichnisse + Abonnements zu Ihrem externen Mandanten zu wechseln.Navigieren Sie zu Identität>Anwendungen>App-Registrierungen.
Wählen Sie + Neue Registrierung aus.
Auf der Seite Anwendung registrieren die angezeigt wird.
- Geben Sie im Abschnitt Name einen aussagekräftigen Anwendungsnamen ein, der den Benutzern der Anwendung angezeigt wird (z. B. ciam-client-app).
- Wählen Sie unter Unterstützte Kontotypen die Option Nur Konten in diesem Organisationsverzeichnis aus.
Wählen Sie Registrieren.
Der Bereich Übersicht der Anwendung wird bei erfolgreicher Registrierung angezeigt. Notieren Sie sich die Anwendungs-ID (Client), die im Quellcode Ihrer Anwendung verwendet werden sollen.
Führen Sie die folgenden Schritte aus, um den Anwendungstyp für Ihre Anwendungsregistrierung anzugeben:
- Wählen Sie unter Verwalten die Option Authentifizierung aus.
- Wählen Sie auf der Seite Plattformkonfigurationendie Option Plattform hinzufügen und dann die Option Mobilgerät- und Desktopanwendungen aus.
- Geben Sie für Benutzerdefinierte Umleitungs-URIs den Wert
http://localhostein, und wählen Sie dann Konfigurieren aus. - Wählen Sie Konfigurieren aus, um Ihre Änderungen zu speichern.
Gewähren von API-Berechtigungen
Wählen Sie auf der Seite App-Registrierungen die von Ihnen erstellte Anwendung (z. B. ciam-client-app) aus, um ihre Seite Übersicht zu öffnen.
Wählen Sie unter Verwalten die Option API-Berechtigungen.
Wählen Sie unter Konfigurierte Berechtigungen die Option Berechtigung hinzufügen aus.
Wählen Sie die Registerkarte Microsoft-APIs aus.
Wählen Sie unter Häufig verwendete Microsoft-APIs die Option Microsoft Graph aus.
Wählen Sie Delegierte Berechtigungen aus.
Suchen Sie im Abschnitt Berechtigungen auswählen die Berechtigungen openid und offline_access, und wählen Sie beide aus.
Wählen Sie die Schaltfläche Berechtigungen hinzufügen aus.
An diesem Punkt haben Sie die Berechtigungen ordnungsgemäß zugewiesen. Da der Mandant jedoch der Mandant eines Kunden ist, können die Consumer-Benutzer selbst diesen Berechtigungen nicht zustimmen. Als Administrator müssen Sie im Namen aller Benutzer im Mandanten diesen Berechtigungen zustimmen:
- Wählen Sie Administratorzustimmung für <Name Ihres Mandanten> erteilen und dann Ja aus.
- Wählen Sie Aktualisieren aus, und vergewissern Sie sich, dass für beide Bereiche unter Status der Status Gewährt für <Name Ihres Mandanten> angezeigt wird.
Konfigurieren optionaler Ansprüche
Wählen Sie unter Verwalten die Tokenkonfiguration aus.
Wählen Sie Optionalen Anspruch hinzufügen aus.
Wählen Sie die Option optionaler Anspruchstyp und dann ID aus.
Wählen Sie den optionalen Anspruch login_hint aus.
Klicken Sie auf Hinzufügen, um die Änderungen zu speichern.
Erstellen eines Benutzerflows
Führen Sie die folgenden Schritte aus, um einen Benutzerflow zu erstellen, den ein Kunde zum Anmelden oder Registrieren für eine Anwendung verwenden kann.
Melden Sie sich beim Microsoft Entra Admin Center mindestens mit der Rolle Administrator für Benutzerflows mit externer ID an.
Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie das Einstellungen-Symbol
im oberen Menü, um über das Menü Verzeichnisse + Abonnements zu Ihrem externen Mandanten zu wechseln.Browsen Sie zu Identität>External Identities>Benutzerflows.
Wählen Sie + Neuer Benutzerflow aus.
Gehen Sie auf der Seite Erstellen folgendermaßen vor:
Geben Sie einen Namen für den Benutzerflow ein, z. B. SignInSignUpSample.
Wählen Sie in der Liste Identitätsanbieter die Option Email-Konten aus. Dieser Identitätsanbieter bietet Benutzern die Möglichkeit, sich mit ihrer Email-Adresse anzumelden oder zu registrieren.
Unter Email-Konten können Sie eine der beiden Optionen auswählen. Wählen Sie für dieses Tutorial Email mit Kennwort aus.
- Email mit Kennwort: Ermöglicht es neuen Benutzern, sich mit einer E-Mail-Adresse als Anmeldenamen und einem Kennwort als ersten Faktor der Anmeldeinformationen zu registrieren und anzumelden.
- Email mit Einmal-Passcode: Ermöglicht es neuen Benutzern, sich mit einer E-Mail-Adresse als Anmeldenamen und einem Einmal-Passcode als ersten Faktor der Anmeldeinformationen zu registrieren und anzumelden. Email mit Einmal-Passcode muss auf Mandantenebene (Alle Identitätsanbieter>Email mit Einmal-Passcode) aktiviert sein, damit diese Option auf Benutzerflowebene verfügbar ist.
Wählen Sie unter Benutzerattribute die Attribute aus, die Sie vom Benutzer bei der Registrierung erfassen möchten. Wenn Sie Mehr anzeigen auswählen, können Sie Attribute und Ansprüche für Land/Region, Anzeigename und Postleitzahl auswählen. Klicken Sie auf OK. (Benutzer werden nur zur Eingabe von Attributen aufgefordert, wenn sie sich zum ersten Mal registrieren.)
Klicken Sie auf Erstellen. Der neue Benutzerflow wird in der Liste Benutzerflows angezeigt. Aktualisieren Sie die Seite bei Bedarf.
Führen Sie die Schritte im Artikel Aktivieren der Self-Service-Kennwortzurücksetzung aus, um die Self-Service-Kennwortzurücksetzung zu aktivieren.
Zuordnen der Webanwendung zum Benutzerflow
Obwohl ihrem Benutzerflow viele Anwendungen zugeordnet werden können, kann eine einzelne Anwendung nur einem Benutzerflow zugeordnet werden. Ein Benutzerflow ermöglicht die Konfiguration der Benutzeroberfläche für bestimmte Anwendungen. Sie können beispielsweise einen Benutzerflow konfigurieren, bei dem sich Benutzer und Benutzerinnen mit einer E-Mail-Adresse anmelden oder registrieren müssen.
Wählen Sie im Menü der Seitenleiste die Option Identität aus.
Wählen Sie External Identities und dann Benutzerflows aus.
Wählen Sie auf der Seite Benutzerflows den zuvor erstellten Benutzerflownamen aus, z. B. SignInSignUpSample.
Wählen Sie unter Verwenden die Option Anwendungen aus.
Wählen Sie Anwendung hinzufügen aus.
Wählen Sie die Anwendung in der Liste aus, z. B. ciam-client-app, oder verwenden Sie das Suchfeld, um die Anwendung zu suchen, und wählen Sie dann die Anwendung aus.
Klicken Sie auf Auswählen.
Klonen oder Herunterladen der Beispielwebanwendung
Um den Beispielcode der Desktopanwendung abzurufen, können Sie die ZIP-Datei herunterladen oder die Beispielwebanwendung von GitHub klonen, indem Sie den folgenden Befehl ausführen:
git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
Wenn Sie die .zip-Datei herunterladen möchten, extrahieren Sie die Beispielanwendungsdatei in einen Ordner, in dem die Gesamtlänge des Pfads höchstens 260 Zeichen beträgt.
Installieren von Projektabhängigkeiten
Öffnen Sie ein Konsolenfenster, und wechseln Sie in das Verzeichnis, das die Electron-Beispielanwendung enthält:
cd 1-Authentication\3-sign-in-electron\AppFühren Sie die folgenden Befehle aus, um App-Abhängigkeiten zu installieren:
npm install && npm update
Konfigurieren der Beispielwebanwendung
Öffnen Sie die
App\authConfig.js-Datei in Ihrem Code-Editor.Suchen Sie den folgenden Platzhalter:
Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.Enter_the_Tenant_Subdomain_Here, und ersetzen Sie ihn durch die Unterdomäne des Verzeichnisses (des Mandanten). Wenn Ihre primäre Mandantendomäne beispielsweisecontoso.onmicrosoft.comlautet, verwenden Siecontoso. Wenn Sie ihren Mandantennamen nicht kennen, können Sie Ihre Mandantendetails auslesen.
Ausführen und Testen der Beispielwebanwendung
Sie können jetzt die Electron-Beispieldesktopanwendung testen. Nachdem Sie die Anwendung ausgeführt haben, wird das Fenster der Desktopanwendung automatisch angezeigt:
Führen Sie in Ihrem Terminal den folgenden Befehl aus:
npm start
Wählen Sie im angezeigten Desktopfenster die Schaltfläche Anmelden oder Registrieren aus. Daraufhin wird ein Browserfenster geöffnet, in dem Sie aufgefordert werden, sich anzumelden.
Geben Sie auf der Anmeldeseite des Browsers Ihre E-Mail-Adresse ein, wählen Sie Weiter aus, geben Sie Ihr Kennwort ein, und wählen Sie dann Anmelden aus. Wenn Sie kein Konto besitzen, wählen Sie den Link Kein Konto? Erstellen Sie eins aus, um den Registrierungsflow zu starten.
Wenn Sie die Registrierungsoption auswählen, schließen Sie den gesamten Registrierungsflow ab, nachdem Sie E-Mail-Adresse, Einmal-Passcode, das neue Kennwort und weitere Kontodetails eingegeben haben. Die daraufhin angezeigte Seite sieht in etwa wie im folgenden Screenshot aus. Wenn Sie die Anmeldeoption auswählen, wird eine ähnliche Seite angezeigt. Auf der Seite werden Token-ID-Ansprüche angezeigt.
