Quickstart: Gebruikers aanmelden in een voorbeeld-desktop-app

• Voeg de volgende redirect URI's toe met behulp van de configuratie voor het platform Mobiele en desktop applicaties. Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost
• Node.js
• Visual Studio Code of een andere code-editor

• Voeg de volgende redirect URI's toe met behulp van de configuratie voor het platform Mobiele en desktop applicaties. Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: https://login.microsoftonline.com/common/oauth2/nativeclient
  • Aangepaste omleidings-URI's: ms-appx-web://microsoft.aad.brokerplugin/{client_id} waarbij {client_id} de toepassings-id (client) van uw toepassing is.
• Visual Studio- met de Universal Windows Platform-ontwikkeling workload geïnstalleerd

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• het .zip-bestand downloaden

Open in de code-editor het bestand ms-identity-javascript-nodejs-desktop-main/App/authConfig.js . Vervang de waarde als volgt:

Uw bestand moet er ongeveer als volgt uitzien:

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. Pak het zip-bestand uit in een lokale map dicht bij de hoofdmap van de schijf, bijvoorbeeld C:\Azure-Samples.

2. Open het project in Visual Studio.

3. Bewerk active-directory-wpf-msgraph-v2/App.xaml.cs en vervang de waarden van de velden ClientId en Tenant door de volgende code:

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

Waar:

• Enter_the_Application_Id_here - is de Applicatie-ID (client) voor de toepassing die u hebt geregistreerd.

  Als u de waarde van Toepassings-ID (client) IDwilt vinden, kunt u deze opzoeken op de Overzicht pagina van de app in het Microsoft Entra-beheercentrum.

• Enter_the_Tenant_Info_Here - is ingesteld op een van de volgende opties:

  • Als uw toepassing accounts in deze organisatiemapondersteunt, vervangt u deze waarde door de tenant-id of tenantnaam (bijvoorbeeld contoso.microsoft.com)

  • Als uw toepassing Accounts in een organisatiemapondersteunt, vervangt u deze waarde door organizations

  • Als uw toepassing Accounts in een organisatiemap en persoonlijke Microsoft-accountsondersteunt, vervangt u deze waarde door common.

    Als u de waarden van Directory-id (tenant) en Ondersteunde accounttypenwilt vinden, gaat u naar de pagina Overzicht van de app in het Microsoft Entra-beheercentrum.

1. U moet de afhankelijkheden van dit voorbeeld eenmaal installeren:

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

2. Voer vervolgens de toepassing uit via de opdrachtprompt of console:

   npm start
   

3. Selecteer Aanmelden om het aanmeldingsproces te starten.

   De eerste keer dat u zich aanmeldt, wordt u gevraagd uw toestemming te geven om de toepassing toe te staan u aan te melden en toegang te krijgen tot uw profiel. Nadat u bent aangemeld, wordt u teruggeleid naar de toepassing.

Voer de volgende stappen uit om de voorbeeldtoepassing te bouwen en uit te voeren in Visual Studio:

1. Selecteer het menu Foutopsporing en kies vervolgens>Start Foutopsporing, of druk op de F5-toets. De MainWindow- van uw toepassing wordt weergegeven.
2. Selecteer de knop Microsoft Graph API aanroepen.
3. Meld u aan met uw Microsoft Entra-account (werk- of schoolaccount) of met de inloggegevens van uw Microsoft-account (live.com, outlook.com).
4. Als u de toepassing voor de eerste keer uitvoert, wordt u gevraagd toestemming te geven om de toepassing toegang te geven tot uw gebruikersprofiel en u aan te melden. Nadat u toestemming hebt gegeven voor de aangevraagde machtigingen, wordt in de toepassing weergegeven dat u bent aangemeld.

U ziet enkele basistokengegevens en gebruikersgegevens die zijn verkregen uit de aanroep naar de Microsoft Graph API.

Zie de zelfstudie voor meer informatie over de ontwikkeling van Electron-desktop-apps met MSAL Node:

Probeer de Windows-bureaubladtutorial voor een stapsgewijze handleiding bij het bouwen van applicaties en nieuwe functies, inclusief een volledige uitleg van deze quickstart.

• Voeg de volgende redirect URI's toe met behulp van de configuratie voor het platform Mobiele en desktop applicaties. Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Doorverwijs-URI: http://localhost
• Node.js
• Visual Studio Code of een andere code-editor*

• Voeg de volgende redirect URI's toe met behulp van de configuratie voor het platform Mobiele en desktop applicaties. Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Omleidings-URI: msal{client_id}://auth waarbij {client_id} de toepassings-id (client) van uw toepassing is.
• .NET 7.0 SDK of hoger
• Visual Studio 2022 waarop de MAUI-werklast is geïnstalleerd:
  • -instructies voor Windows
  • Instructies voor macOS
• Uw toepassing toevoegen aan de gebruikersstroom

• Voeg de volgende redirect URI's toe met behulp van de configuratie voor het platform Mobiele en desktop applicaties. Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Aangepaste omleidings-URI: https://login.microsoftonline.com/common/oauth2/nativeclient. Dit moet handmatig worden ingevoerd.
• Visual Studio Code of een andere code-editor
• .NET 7.0 of hoger
• Uw toepassing toevoegen aan de gebruikersstroom

Als u de voorbeeldcode van de bureaublad-app wilt ophalen, downloadt het .zip-bestand of kloont u de voorbeeldwebtoepassing vanuit GitHub door de volgende opdracht uit te voeren:

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

Als u ervoor kiest om het .zip-bestand te downloaden, extraheert u het voorbeeld-app-bestand naar een map waarin de totale lengte van het pad 260 of minder tekens is.

Projectafhankelijkheden installeren

1. Open een consolevenster en ga naar de map met de Electron-voorbeeld-app:

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

2. Voer de volgende opdrachten uit om app-afhankelijkheden te installeren:

   npm install && npm update
   

Als u de voorbeeldcode van de .NET MAUI-bureaubladtoepassing wilt ophalen, download het bestand .zip of kloon de .NET MAUI-bureaubladtoepassing van GitHub door de volgende opdracht uit te voeren:

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

Als u de voorbeeldtoepassing wilt verkrijgen, kunt u deze klonen vanuit GitHub of downloaden als een .zip-bestand.

• Als u het voorbeeld wilt klonen, opent u een opdrachtprompt en navigeert u naar de locatie waar u het project wilt maken en voert u de volgende opdracht in:

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

• download het .zip bestand. Pak het uit naar een bestandspad waarbij de lengte van de naam minder dan 260 tekens is.

1. Open App\authConfig.js bestand in de code-editor.

2. Zoek de plaatsaanduiding:

   1. Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.

   2. Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leer hoe u uw tenantgegevens kunt lezen.

1. Open het bestand ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json in Visual Studio.
2. Zoek de tijdelijke aanduiding:
   1. Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leer hoe u uw tenantgegevens kunt lezen.
   2. Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.

1. Open het project in uw IDE (zoals Visual Studio of Visual Studio Code) om de code te configureren.

2. Open in de code-editor het appsettings.json-bestand in de map ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf.

3. Vervang Enter_the_Application_Id_Here door de toepassings-id (client) van de app die u eerder hebt geregistreerd.

4. Vervang Enter_the_Tenant_Subdomain_Here door het subdomein Directory (tenant). Als uw primaire domein bijvoorbeeld is contoso.onmicrosoft.com, vervangt u Enter_the_Tenant_Subdomain_Here door contoso. Als u uw primaire domein niet hebt, leert u hoe u tenantgegevenskunt lezen.

U kunt nu de voorbeeld-Electron-bureaublad-app testen. Nadat u de app hebt uitgevoerd, wordt het venster van de bureaublad-app automatisch weergegeven:

1. Voer in de terminal de volgende opdracht uit:

   npm start
   

   

2. Selecteer in het bureaubladvenster dat wordt weergegeven de knop Aanmelden of Registreren. Er wordt een browservenster geopend en u wordt gevraagd u aan te melden.

3. Typ op de aanmeldingspagina van de browser uw e-mailadres, selecteer Volgende, typ uw wachtwoorden selecteer Aanmelden. Als u geen account hebt, selecteert u Geen account? Maak één koppeling, waarmee de registratiestroom wordt gestart.

4. Als u de registratieoptie kiest, voltooit u na het invullen van uw e-mail, eenmalige wachtwoordcode, nieuw wachtwoord en meer accountgegevens de volledige aanmeldingsstroom. U ziet een pagina die vergelijkbaar is met de volgende schermopname. U ziet een vergelijkbare pagina als u de aanmeldingsoptie kiest. Op de pagina worden token-ID-claims getoond.

   

.NET MAUI-apps zijn ontworpen om te worden uitgevoerd op meerdere besturingssystemen en apparaten. U moet selecteren met welk doel u uw app wilt testen en er fouten in wilt opsporen.

Stel de Debug Target in op de werkbalk van Visual Studio op het apparaat waarmee u fouten wilt opsporen en testen. In de volgende stappen wordt het Foutopsporingsdoel ingesteld op Windows:

1. Kies de Debug Target keuzelijst.
2. Selecteer Framework
3. Selecteer net7.0-windows...

Voer de app uit door op F5 te drukken of selecteer de afspeelknop boven aan Visual Studio.

1. U kunt nu de voorbeeldtoepassing .NET MAUI desktop testen. Nadat u de toepassing hebt uitgevoerd, wordt het bureaubladtoepassingsvenster automatisch weergegeven:

   

2. Selecteer in het bureaubladvenster dat wordt weergegeven de knop Aanmelden. Er wordt een browservenster geopend en u wordt gevraagd u aan te melden.

   

   Tijdens het aanmeldingsproces wordt u gevraagd verschillende machtigingen te verlenen (zodat de toepassing toegang heeft tot uw gegevens). Wanneer u zich hebt aangemeld en toestemming hebt gegeven, wordt in het toepassingsscherm de hoofdpagina weergegeven.

   

1. Open een terminalvenster en navigeer naar de map die de WPF-bureaubladvoorbeeld-app bevat.

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

2. Voer in uw terminal de app uit door de volgende opdracht uit te voeren:

   dotnet run
   

3. Nadat u het voorbeeld hebt gestart, ziet u een venster met een aanmeldknop. Selecteer de knop Aanmelden.

   

4. Voer op de aanmeldingspagina uw e-mailadres van uw account in. Als u geen account hebt, selecteert u Geen account? Maak één, waarmee de registratiestroom wordt gestart. Volg deze stroom om een nieuw account te maken en u aan te melden.

5. Zodra u zich aanmeldt, ziet u een scherm met geslaagde aanmelding en basisinformatie over uw gebruikersaccount dat is opgeslagen in het opgehaalde token. De basisinformatie wordt weergegeven in het gedeelte Token info van het aanmeldingsscherm

• wachtwoord opnieuw instellen inschakelen.
• Het standaardmerk aanpassen.
• De voorbeeldcode van de Electron-bureaublad-app verkennen.

• Zelfstudie: Een .NET MAUI-app maken.
• wachtwoord opnieuw instellen inschakelen.
• Het standaardmerk aanpassen.

• Zelfstudie: gebruikers authenticeren voor uw WPF-bureaubladtoepassing
• wachtwoord opnieuw instellen inschakelen.
• Het standaardmerk aanpassen.