Schnellstart: Anmelden von Benutzern in einer Desktop-Beispiel-App

• Fügen Sie die folgenden Umleitungs-URIs mithilfe der Plattformkonfiguration für Mobile- und Desktopanwendungen hinzu . Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
  • Umleitungs-URI: http://localhost
• Node.js
• Visual Studio Code oder ein anderer Code-Editor

• Fügen Sie die folgenden Umleitungs-URIs mithilfe der Plattformkonfiguration für Mobile- und Desktopanwendungen hinzu . Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
  • Umleitungs-URI: https://login.microsoftonline.com/common/oauth2/nativeclient
  • Benutzerdefinierte Umleitungs-URIs: ms-appx-web://microsoft.aad.brokerplugin/{client_id} Dabei ist {client_id} die Anwendungs-ID (Client-ID) Ihrer Anwendung.
• Visual Studio mit installierter Arbeitsauslastung für die Entwicklung der universellen Windows-Plattform

• Um das Beispiel zu klonen, öffnen Sie eine Eingabeaufforderung, und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten, und geben Sie den folgenden Befehl ein:

  git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git
  

• Laden Sie die datei .zip herunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

• Um das Beispiel zu klonen, öffnen Sie eine Eingabeaufforderung, und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten, und geben Sie den folgenden Befehl ein:

  git clone https://github.com/Azure-Samples/active-directory-dotnet-desktop-msgraph-v2.git
  

• Herunterladen der .zip-Datei

Öffnen Sie im Code-Editor die Datei "ms-identity-javascript-nodejs-desktop-main/App/authConfig.js ". Ersetzen Sie den Wert wie folgt:

Ihre Datei sollte wie folgt aussehen:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

1. Extrahieren Sie die ZIP-Datei in einen lokalen Ordner in der Nähe des Stammordners des Datenträgers, z. B. C:\Azure-Samples.

2. Öffnen Sie das Projekt in Visual Studio.

3. Bearbeiten Sie active-directory-wpf-msgraph-v2/App.xaml.cs , und ersetzen Sie die Werte der Felder ClientId und Tenant durch den folgenden Code:

   private static string ClientId = "Enter_the_Application_Id_here";
   private static string Tenant = "Enter_the_Tenant_Info_Here";
   

Ort:

• Enter_the_Application_Id_here - ist die Anwendungs-ID (Client) für die Anwendung, die Sie registriert haben.

  Um den Wert der Anwendungs-ID (Client-ID) zu finden, wechseln Sie zur Seite "Übersicht" der App im Microsoft Entra Admin Center.

• Enter_the_Tenant_Info_Here - ist auf eine der folgenden Optionen festgelegt:

  • Wenn Ihre Anwendung Konten in diesem Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch die Mandanten-ID oder den Mandantennamen (z. B. contoso.microsoft.com)

  • Wenn Ihre Anwendung Konten in einem beliebigen Organisationsverzeichnis unterstützt, ersetzen Sie diesen Wert durch organizations

  • Wenn Ihre Anwendung Konten in einem Organisationsverzeichnis und persönlichen Microsoft-Konten unterstützt, ersetzen Sie diesen Wert durch common.

    Um die Werte der Verzeichnis-ID (Mandanten-ID) und der unterstützten Kontotypen zu finden, wechseln Sie zur Seite "Übersicht " der App im Microsoft Entra Admin Center.

1. Sie müssen einmalig die Abhängigkeiten dieses Beispiels installieren:

   cd ms-identity-javascript-nodejs-desktop-main
   npm install
   

2. Führen Sie dann die Anwendung über die Eingabeaufforderung oder über die Konsole aus:

   npm start
   

3. Wählen Sie "Anmelden" aus, um den Anmeldevorgang zu starten.

   Wenn Sie sich zum ersten Mal anmelden, werden Sie aufgefordert, Ihre Zustimmung zu geben, damit sich die Anwendung anmelden und auf Ihr Profil zugreifen kann. Nachdem Sie sich erfolgreich angemeldet haben, werden Sie zurück zur Anwendung umgeleitet.

Führen Sie die folgenden Schritte aus, um die Beispielanwendung in Visual Studio zu erstellen und auszuführen:

1. Wählen Sie das Menü ">Debuggen starten" aus, oder drücken Sie F5. Die MainWindow Ihres Anwendungsprogramms wird angezeigt.
2. Wählen Sie die Schaltfläche "Microsoft Graph-API aufrufen " aus.
3. Melden Sie sich mit Ihrem Microsoft Entra-Konto (Geschäfts-, Schul- oder Unikonto) oder Microsoft-Kontoanmeldeinformationen (live.com, outlook.com) an.
4. Wenn Sie die Anwendung zum ersten Mal ausführen, werden Sie aufgefordert, die Zustimmung zu erteilen, damit die Anwendung auf Ihr Benutzerprofil zugreifen und Sie anmelden kann. Nachdem Sie den angeforderten Berechtigungen zugestimmt haben, zeigt die Anwendung an, dass Sie sich erfolgreich angemeldet haben.

Im Aufruf der Microsoft Graph-API sollten einige grundlegende Tokeninformationen und Benutzerdaten angezeigt werden.

Weitere Informationen zur Entwicklung von Electron-Desktop-Apps mit MSAL Node finden Sie im folgenden Tutorial:

Probieren Sie das Windows-Desktop-Lernprogramm aus, um eine vollständige schrittweise Anleitung zum Erstellen von Anwendungen und neuen Features zu erhalten, einschließlich einer vollständigen Erläuterung dieser Schnellstartanleitung.

• Fügen Sie die folgenden Umleitungs-URIs mithilfe der Plattformkonfiguration für Mobile- und Desktopanwendungen hinzu . Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
  • Umleitungs-URI: http://localhost
• Node.js
• Visual Studio Code oder ein anderer Code-Editor*

• Fügen Sie die folgenden Umleitungs-URIs mithilfe der Plattformkonfiguration für Mobile- und Desktopanwendungen hinzu . Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
  • Umleitungs-URI: msal{client_id}://auth Dabei ist {client_id} die Anwendungs-ID (Client-ID) Ihrer Anwendung.
• .NET 7.0 SDK oder höher
• Visual Studio 2022 mit installierter MAUI-Workload:
  • Anweisungen für Windows
  • Anweisungen für macOS
• Hinzufügen Ihrer Anwendung zum Benutzerablauf

• Fügen Sie die folgenden Umleitungs-URIs mithilfe der Plattformkonfiguration für Mobile- und Desktopanwendungen hinzu . Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
  • Benutzerdefinierter Umleitungs-URI: https://login.microsoftonline.com/common/oauth2/nativeclient. Dies muss manuell eingegeben werden.
• Visual Studio Code oder ein anderer Code-Editor
• .NET 7.0 oder höher
• Hinzufügen Ihrer Anwendung zum Benutzerablauf

Um den Desktop-App-Beispielcode abzurufen, laden Sie die .zip-Datei herunter , oder klonen Sie die Beispielwebanwendung von GitHub, 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 Beispiel-App-Datei in einen Ordner, in dem die Gesamtlänge des Pfads 260 oder weniger Zeichen beträgt.

Installieren von Projektabhängigkeiten

1. Öffnen Sie ein Konsolenfenster, und wechseln Sie zu dem Verzeichnis, das die Electron-Beispiel-App enthält:

   cd 1-Authentication\3-sign-in-electron\App
   

2. Führen Sie die folgenden Befehle aus, um App-Abhängigkeiten zu installieren:

   npm install && npm update
   

Um den .NET MAUI-Desktopanwendungsbeispielcode abzurufen, laden Sie die .zip-Datei herunter , oder klonen Sie die .NET MAUI-Desktopanwendung von GitHub, indem Sie den folgenden Befehl ausführen:

git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git

Um die Beispielanwendung zu erhalten, können Sie sie entweder von GitHub klonen oder als .zip Datei herunterladen.

• Um das Beispiel zu klonen, öffnen Sie eine Eingabeaufforderung, und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten, und geben Sie den folgenden Befehl ein:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
  

• Laden Sie die datei .zip herunter. Extrahieren Sie ihn in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

1. Öffnen Sie die App\authConfig.js-Datei in Ihrem Code-Editor.

2. Suchen Sie den Platzhalter:

   1. Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.

   2. Enter_the_Tenant_Subdomain_Here und ersetzen Sie es durch die Verzeichnis-(Mandanten-)Unterdomäne. Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, finden Sie weitere Informationen unter Auslesen der Details Ihres Mandanten.

1. Öffnen Sie in Visual Studio ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json Datei.
2. Suchen Sie den Platzhalter:
   1. Enter_the_Tenant_Subdomain_Here und ersetzen Sie es durch die Verzeichnis-(Mandanten-)Unterdomäne. Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, finden Sie weitere Informationen unter Auslesen der Details Ihres Mandanten.
   2. Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.

1. Öffnen Sie das Projekt in Ihrer IDE (z. B. Visual Studio oder Visual Studio Code), um den Code zu konfigurieren.

2. Öffnen Sie in Ihrem Code-Editor die appsettings.json Datei im Ordner "ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf ".

3. Ersetzen Sie Enter_the_Application_Id_Here durch die Anwendungs-(Client)-ID der zuvor von Ihnen registrierten Anwendung.

4. Ersetzen Sie Enter_the_Tenant_Subdomain_Here durch die Unterdomäne des Verzeichnisses (des Mandanten). Wenn Ihre primäre Domäne beispielsweise contoso.onmicrosoft.com ist, ersetzen Sie Enter_the_Tenant_Subdomain_Heresie durch contoso. Wenn Sie nicht über Ihre primäre Domäne verfügen, erfahren Sie, wie Sie Mandantendetails lesen.

Sie können jetzt die Beispiel-Electron-Desktop-App testen. Nachdem Sie die App ausgeführt haben, wird das Desktop-App-Fenster automatisch angezeigt:

1. Führen Sie in Ihrem Terminal den folgenden Befehl aus:

   npm start
   

   

2. 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.

3. 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.

4. 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.

   

.NET MAUI-Apps sind für die Ausführung auf mehreren Betriebssystemen und Geräten konzipiert. Sie müssen auswählen, mit welchem Ziel Sie Ihre App testen und debuggen möchten.

Legen Sie das Debugziel in der Visual Studio-Symbolleiste auf das Gerät fest, mit dem Sie debuggen und testen möchten. Die folgenden Schritte veranschaulichen das Festlegen des Debugziels auf Windows:

1. Wählen Sie die Dropdownliste "Debugziel " aus.
2. Framework auswählen
3. net7.0-windows... auswählen

Führen Sie die App aus, indem Sie F5 drücken oder die Wiedergabeschaltfläche oben in Visual Studio auswählen.

1. Sie können jetzt die .NET MAUI-Beispieldesktopanwendung testen. Nachdem Sie die Anwendung ausgeführt haben, wird automatisch das Fenster der Desktopanwendung angezeigt:

   

2. Wählen Sie im daraufhin angezeigten Desktopfenster die Schaltfläche Anmelden aus. Daraufhin wird ein Browserfenster geöffnet, in dem Sie aufgefordert werden, sich anzumelden.

   

   Während des Anmeldevorgangs werden Sie aufgefordert, verschiedene Berechtigungen zu erteilen (damit die Anwendung auf Ihre Daten zugreifen kann). Nach erfolgreicher Anmeldung und Zustimmung wird auf dem Anwendungsbildschirm die Hauptseite angezeigt.

   

1. Öffnen Sie ein Konsolenfenster, und wechseln Sie zu dem Verzeichnis, das die WPF-Desktopbeispiel-App enthält:

   cd 1-Authentication\5-sign-in-dotnet-wpf
   

2. Führen Sie in Ihrem Terminal die App aus, indem Sie den folgenden Befehl ausführen:

   dotnet run
   

3. Nachdem Sie das Beispiel gestartet haben, sollte ein Fenster mit der Schaltfläche Anmelden angezeigt werden. Wählen Sie die Schaltfläche Anmelden aus.

   

4. Geben Sie auf der Anmeldeseite die E-Mail-Adresse Ihres Kontos ein. Wenn Sie kein Konto haben, wählen Sie den Link Kein Konto? Erstellen Sie eins aus, um den Registrierungsflow zu starten. Führen Sie diesen Flow aus, um ein neues Konto zu erstellen und sich anzumelden.

5. Nach der Anmeldung wird ein Bildschirm angezeigt, auf dem die erfolgreiche Anmeldung und grundlegende Informationen zu Ihrem Benutzerkonto angezeigt werden, die im abgerufenen Token gespeichert sind. Die grundlegenden Informationen werden im Abschnitt "Tokeninformationen " des Anmeldebildschirms angezeigt.

• Aktivieren der Kennwortzurücksetzung.
• Anpassen des Standardbrandings
• Erkunden Sie den Beispielcode der Electron-Desktop-App.

• Lernprogramm: Erstellen einer .NET MAUI-App.
• Aktivieren der Kennwortzurücksetzung.
• Anpassen des Standardbrandings

• Lernprogramm: Authentifizieren von Benutzern bei Ihrer WPF-Desktopanwendung
• Aktivieren der Kennwortzurücksetzung.
• Anpassen des Standardbrandings