Zelfstudie: Een .NET MAUI Shell-app maken

Van toepassing op: Externe tenants (meer informatie)

Deze zelfstudie is deel 1 van een reeks die laat zien hoe u een shell-app voor .NET Multi-Platform App UI (.NET MAUI) maakt en voorbereidt op verificatie met behulp van het Microsoft Entra-beheercentrum. In deze zelfstudie voegt u een aangepaste clienthelper voor de Microsoft Authentication Library (MSAL) toe om de MSAL SDK te initialiseren, vereiste bibliotheken te installeren en een afbeeldingsbron op te nemen.

In deze handleiding leert u:

• Maak een .NET MAUI-shell-app.
• Voeg MSAL SDK-ondersteuning toe met behulp van MSAL-helperklassen.
• Vereiste pakketten installeren.
• Afbeeldingsresource toevoegen.

Voorwaarden

• Registreer een nieuwe clientweb-app in het Microsoft Entra-beheercentrum, geconfigureerd voor accounts in elke organisatiedirectory en persoonlijke Microsoft-accounts. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
  • Applicatie (client) ID
  • Directory-id (huurder)
• Voeg de volgende omleidings-URI's toe met behulp van de platformconfiguratie voor mobiele toepassingen en desktoptoepassingen . Raadpleeg Hoe u een omleidings-URI in uw applicatie kunt toevoegen voor meer details.
  • Omleidings-URI: msal{client_id}://auth waar {client_id} is de toepassings-id (client) van uw app.
• .NET SDK
• Visual Studio 2022- met de MAUI-werklading geïnstalleerd:
  • instructies voor het instellen van Visual Studio

Een .NET MAUI-shellapp maken

1. Selecteer in het startvenster van Visual Studio 2022 Een nieuw project maken.
2. Selecteer in het venster Maak een nieuw projectMAUI in de vervolgkeuzelijst Alle projecttypen, selecteer de sjabloon .NET MAUI App, en selecteer Volgende.
3. In het venster Uw nieuwe project configureren, moet Projectnaam zijn ingesteld op SignInMaui. Werk de naam van de solution bij om aanmeldings-in- en selecteer Volgende.
4. Kies in het venster Aanvullende informatie de meest recente .NET SDK en selecteer maken.

Wacht totdat het project is gemaakt en de bijbehorende afhankelijkheden zijn hersteld.

MSAL SDK-ondersteuning toevoegen met behulp van MSAL-helperklassen

MET MSAL-client kunnen ontwikkelaars beveiligingstokens verkrijgen van een externe tenant om beveiligde web-API's te verifiëren en te openen. In deze sectie downloadt u bestanden waaruit MSALClient bestaat.

Download de volgende bestanden in een map op uw computer:

• AzureAdConfig.cs: dit bestand haalt de unieke id's van de Microsoft Entra-app op uit uw app-configuratiebestand.
• DownStreamApiConfig.cs: Dit bestand stelt de scopes voor de Microsoft Graph-aanroep in en haalt deze op.
• DownstreamApiHelper.cs: dit bestand verwerkt de uitzonderingen die optreden bij het aanroepen van de downstream-API.
• Exception.cs - Dit bestand biedt een paar extensiemethode met betrekking tot het genereren en verwerken van uitzonderingen.
• IdentityLogger.cs : in dit bestand wordt beschreven hoe u MSAL.NET logboekregistratie gebruikt.
• MSALClientHelper.cs: dit bestand bevat methoden voor het initialiseren van MSAL SDK.
• PlatformConfig.cs: dit bestand bevat methoden voor het afhandelen van een specifiek platform. Bijvoorbeeld Windows.
• PublicClientSingleton.cs : dit bestand bevat een singleton-implementatie om de MSALClient en de bijbehorende klassen te verpakken ter ondersteuning van het statische initialisatiemodel voor platforms.
• WindowsHelper.cs: dit bestand bevat methoden om de venstergreep op te halen.

Belangrijk

Sla het downloaden van de MSALClient-bestanden niet over. Ze zijn vereist om deze zelfstudie te voltooien.

De MSALClient-bestanden verplaatsen met Visual Studio

1. Klik in het deelvenster Solution Explorer met de rechtermuisknop op het project SignInMaui en selecteer >Nieuwe map toevoegen. Geef de map MSALClienteen naam.
2. Klik met de rechtermuisknop op map MSALClient en selecteer Toevoegen>bestaand item....
3. Navigeer naar de map met de gedownloade MSALClient-bestanden die u eerder hebt gedownload.
4. Selecteer alle MSALClient-bestanden die u hebt gedownload en selecteer vervolgens Toevoegen

Vereiste pakketten installeren

U moet de volgende pakketten installeren:

• Microsoft.Identity.Client: dit pakket bevat de binaire bestanden van de Microsoft Authentication Library voor .NET (MSAL.NET).
• Microsoft.Extensions.Configuration.Json-: dit pakket bevat de implementatie van de JSON-configuratieprovider voor Microsoft.Extensions.Configuration.
• Microsoft.Extensions.Configuration.Binder: dit pakket bevat functionaliteit om een object te binden aan gegevens in configuratieproviders voor Microsoft.Extensions.Configuration.
• Microsoft.Extensions.Configuration.Abstractions : dit pakket bevat abstracties van configuratie op basis van sleutel-waardeparen.
• Microsoft.Identity.Client.Extensions.Msal: dit pakket bevat extensies voor Microsoft Authentication Library voor .NET (MSAL.NET).

NuGet Pakketbeheerder

Als u de NuGet Package Manager- wilt gebruiken om het pakket Microsoft.Identity.Client in Visual Studio te installeren, voert u de volgende stappen uit:

1. Selecteer Tools>NuGet Package Manager>NuGet-pakketten voor oplossing beheren....
2. Vanuit het tabblad Bladeren, zoek naar Microsoft.Identity.Client.
3. Selecteer Microsoft.Identity.Client in de lijst.
4. Selecteer SignInMaui- in het deelvenster Project lijst.
5. Selecteer installeren.
6. Als u wordt gevraagd om de installatie te controleren, selecteert u OK-.

Herhaal het proces om de resterende vereiste pakketten te installeren.

Afbeeldingsresource toevoegen

In deze sectie downloadt u een afbeelding die u in uw app gebruikt om de interactie tussen gebruikers te verbeteren.

Download de volgende afbeelding:

• -pictogram: Microsoft Entra ID - Deze afbeelding wordt gebruikt als pictogram op de hoofdpagina.

De afbeelding verplaatsen met Visual Studio

1. Vouw in het deelvenster Solution Explorer van Visual Studio de map Resources uit, waarin de map Afbeeldingen wordt weergegeven.
2. Klik met de rechtermuisknop op Afbeeldingen en selecteer Bestaand item toevoegen>....
3. Navigeer naar de map met de gedownloade afbeeldingen.
4. Wijzig het filter in bestandstype-filter naar Afbeeldingsbestanden.
5. Selecteer de afbeelding die u hebt gedownload.
6. Selecteer toevoegen.

Volgende stap

Deel 3: Zelfstudie: Gebruikers inloggen in de .NET MAUI Shell-app met behulp van een externe tenant