Zelfstudie: Een .NET MAUI-app maken met behulp van de Microsoft Graph SDK

Ga aan de slag met .NET MAUI door een platformoverschrijdende app te bouwen in Windows die gebruikmaakt van de Microsoft Graph SDK- om gebruikersgegevens weer te geven.

In deze zelfstudie leert u het volgende:

• Uw omgeving instellen voor .NET MAUI-ontwikkeling en een .NET MAUI-project maken
• Uw client-app registreren in Azure
• Integreren met Azure Identity en de Microsoft Graph SDK
• De gebruikersinterface bijwerken om gebruikersgegevens weer te geven uit Microsoft Graph-

Voorwaarden

• Een Azure-account met een actief abonnement. Maak gratis een account.
• De .NET MAUI installatievereisten.
• Als u nieuw bent met .NET MAUI op Windows, moet u beginnen met Uw eerste .NET MAUI-app voor Windows bouwen handleiding.

De omgeving instellen

Als u uw omgeving nog niet hebt ingesteld voor .NET MAUI-ontwikkeling, volgt u de stappen om te Aan de slag met .NET MAUI op Windows.

Het .NET MAUI-project maken

Notitie

Als u al bekend bent met het instellen van een .NET MAUI-project, kunt u doorgaan naar de sectie Uw client registreren in Azure.

Start Visual Studio en klik in het startvenster op Een nieuw project maken om een nieuw project te maken:

Selecteer in het venster Een nieuw project maken, in de vervolgkeuzelijst Alle projecttypen, MAUI. Selecteer de sjabloon .NET MAUI App en klik op de knop Volgende.

Geef in het venster Uw nieuwe project configureren een naam op voor uw project, kies een locatie voor het project en klik op de knop Volgende:

Klik in het venster Aanvullende informatie op de knop maken:

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

Druk op de werkbalk van Visual Studio op de knop Windows-machine om de app te bouwen en uit te voeren. Klik op de Klik me knop en controleer of de inhoud van de knop wordt bijgewerkt met het aantal keren dat erop is geklikt.

Nu u hebt gecontroleerd of de .NET MAUI-app op Windows werkt zoals verwacht, kunnen we de Graph SDK integreren. In de volgende sectie voegt u de pakketten toe die nodig zijn voor verificatie en aanroepen naar Microsoft Graph.

Uw client registreren in Azure

Een app-registratie in Azure met het bereik User.Read dat aan de app is verleend, is vereist voor het lezen van gebruikersgegevens uit Microsoft Graph. Voer de volgende stappen uit om uw toepassing te registreren:

Meld u aan bij de Azure Portal.

Als u toegang hebt tot meerdere tenants, gebruikt u de Mappen en abonnementen filter in het bovenste menu om over te schakelen naar de tenant waarin u de toepassing wilt registreren.

Zoek en selecteer Azure Active Directory.

Selecteer onder Beheren, App-registraties > Nieuwe registratie.

Voer een naam in voor uw toepassing, bijvoorbeeld Win-App-calling-MsGraph. Gebruikers van uw app zien deze naam mogelijk en u kunt deze later wijzigen.

Selecteer in de sectie Ondersteunde accounttypen accounts in een organisatiedirectory en persoonlijke Microsoft-accounts (bijvoorbeeld Skype, Xbox, Outlook.com).

Selecteer Registreren om de toepassing te maken.

Kopieer en sla de id van de toepassings-id (client) op en de Directory-id (tenant) waarden voor later gebruik. Deze waarden worden opgeslagen in de GraphService-klasse in de volgende sectie.

Selecteer onder Beheer, Verificatie.

Selecteer Een platform toevoegen > Mobiele en bureaubladtoepassingen.

Selecteer in de sectie Omleidings-URI'shttps://login.microsoftonline.com/common/oauth2/nativeclient en voeg in aangepaste omleidings-URI'shttp://localhosttoe.

Selecteer Configureren.

Selecteer onder Beherende API-machtigingen.

Als de machtiging User.Read van Microsoft Graph User.Read niet aanwezig is onder Geconfigureerde machtigingen, selecteert u Machtiging toevoegen. Selecteer in het scherm API-machtigingen aanvragen de optie Microsoft Graph > Toepassingsmachtigingen en zoek naar User.Read. Vouw gebruikeruit, selecteer User.Read, en klik op machtigingen toevoegen.

De Graph SDK en Azure Identity integreren

Nu u uw .NET MAUI-app in Windows hebt uitgevoerd en de app-registratie in Azure hebt geconfigureerd, gaan we een aantal NuGet-pakketten toevoegen aan het project om te integreren met Azure Identity en Microsoft Graph.

Klik met de rechtermuisknop op het project in Solution Explorer en selecteer NuGet-pakketten beheren... in het contextmenu.

Selecteer in het venster NuGet Package Manager het tabblad Bladeren en zoek naar Azure.Identity:

Voeg de meest recente stabiele versie van het pakket Azure.Identity toe aan het project door op Installerente klikken.

Zoek vervolgens naar Microsoft.Graph:

Voeg de meest recente stabiele versie van het pakket Microsoft.Graph toe aan het project door op Installerente klikken.

Sluit het venster NuGet Package Manager nadat het nieuwe pakket is geïnstalleerd.

Klik opnieuw met de rechtermuisknop op het project en selecteer Toevoegen | Klas in het contextmenu.

Geef in het venster Nieuw item toevoegen dat wordt weergegeven de klasse GraphService een naam en klik op toevoegen:

Voeg vier privéleden toe aan de klasse GraphService, waarbij u uw eigen client-id en tenant-id waarden vervangt voor de tijdelijke aanduidingstekst.

private readonly string[] _scopes = new[] { "User.Read" };
private const string TenantId = "<add your tenant id here>";
private const string ClientId = "<add your client id here>";
private GraphServiceClient _client;

Voeg een Initialize() methode toe aan GraphService, die wordt aangeroepen vanuit de constructor. De initialisatiecode wordt geverifieerd met behulp van de InteractiveBrowserCredential-klasse. Na een succesvolle authenticatie wordt het identificatietoken door de referentieklasse aan de GraphServiceClient verstrekt, samen met de aangevraagde scopes (User.Read).

public GraphService()
{
    Initialize();
}

private void Initialize()
{
    // assume Windows for this sample
    if (OperatingSystem.IsWindows())
    {
        var options = new InteractiveBrowserCredentialOptions
        {
            TenantId = TenantId,
            ClientId = ClientId,
            AuthorityHost = AzureAuthorityHosts.AzurePublicCloud,
            RedirectUri = new Uri("http://localhost"),
        };

        InteractiveBrowserCredential interactiveCredential = new(options);
        _client = new GraphServiceClient(interactiveCredential, _scopes);
    }
    else 
    {
        // TODO: Add iOS/Android support
    }
}

Notitie

De methode Initialize()ondersteunt momenteel alleen Windows. Verificatie op iOS en Android vereist een ander NuGet-pakket (Microsoft.Identity.Client) en enkele extra stappen. Zie Een systeemeigen clienttoepassing configurerenvoor meer informatie over mobiele verificatie.

Voeg een openbare asynchrone methode toe met de naam GetMyDetailsAsync() om het User-object voor de geverifieerde gebruiker te retourneren:

public async Task<User> GetMyDetailsAsync()
{
    try
    {
        return await _client.Me.GetAsync();
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error loading user details: {ex}");
        return null;
    }
}

Er zijn twee using instructies nodig om de nieuwe code te compileren die is toegevoegd aan GraphService:

using Azure.Identity;
using Microsoft.Graph;
using Microsoft.Graph.Models;

Voeg in MainPage.xaml-een x:Name toe aan de Hello, World! label:

<Label
    x:Name="HelloLabel"
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

Voeg een nieuwe knop toe aan de pagina na de bestaande CounterBtn om de gebruikersgegevens op te halen uit Graph:

<Button
    x:Name="GetUserInfoBtn"
    Text="Load User Info"
    SemanticProperties.Hint="Loads user information from Microsoft Graph"
    Clicked="GetUserInfoBtn_Clicked"
    HorizontalOptions="Center" />

Voeg in MainPage.xaml.csprivévariabelen toe aan GraphService en User:

private GraphService graphService;
private User user;

Voeg een gebeurtenis-handler toe voor de Clicked gebeurtenis die u hebt toegevoegd aan de GetUserInfoButton op MainPage.xaml-. De eventhandler maakt een exemplaar van GraphService als deze null is en roept aan om de gebruikersgegevens op te halen. De tekst van HelloLabelwordt bijgewerkt om de gebruiker te begroeten, met de eigenschap DisplayName van Microsoft Graph.

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";
}

Voer de app uit en klik op de knop Gebruikersgegevens laden:

Wanneer het venster Aanmelden bij uw account wordt weergegeven, selecteert u een bestaand account of klikt u op Een ander account gebruiken:

Als u een ander account hebt geselecteerd, voert u het e-mailadres en wachtwoord voor het account in en meldt u zich aan.

Nadat de verificatie is voltooid, ziet u de DisplayName- van uw gebruiker in de app:

De gebruikersinterface bijwerken om gebruikersgegevens weer te geven

Nu de GraphService gebruikersgegevens retourneert, gaan we de gebruikersinterface bijwerken om aanvullende gebruikersprofielgegevens weer te geven.

Begin in MainPage.xaml door de inhoud van de VerticalStackLayoutbij te werken, het bestaande welkomstlabel en Image besturingselement te verwijderen en vier nieuwe labels toe te voegen om de gebruikersgegevens weer te geven. Elk label dat wordt bijgewerkt, heeft een naam en we hebben tijdelijke aanduidingen opgegeven totdat de gegevens uit de Graph-query worden geladen. De inhoud van de VerticalStackLayout moet er nu als volgt uitzien:

<VerticalStackLayout
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center">

    <Label
        x:Name="HelloLabel"
        Text="Hello, World!"
        SemanticProperties.Description="Displays a welcome message for the user"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center" />

    <Button
        x:Name="CounterBtn"
        Text="Click me"
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="CounterBtn_Clicked"
        HorizontalOptions="Center" />

    <Button
        Text="Load User Info"
        SemanticProperties.Hint="Loads user information from Microsoft Graph"
        Clicked="GetUserInfoBtn_Clicked"
        HorizontalOptions="Center" />

    <Label
        x:Name="DisplayNameLabel"
        Text="Display name"
        SemanticProperties.Description="Displays the user's display name from Microsoft Graph."
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserFirstNameLabel"
        Text="First name"
        SemanticProperties.Description="Displays the user's first name info from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserLastNameLabel"
        Text="Last name"
        SemanticProperties.Description="Displays the user's last name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserPrincipalNameLabel"
        Text="User Principal Name"
        SemanticProperties.Description="Displays the user principal name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

</VerticalStackLayout>

Werk ten slotte in MainPage.xaml.cs de ui-elementen bij met de waarden van de nieuwe eigenschappen in de GetUserInfoBtn_Clicked gebeurtenis-handler met behulp van de eigenschappen van het Graph User-object:

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";

    DisplayNameLabel.Text = user.DisplayName;
    UserFirstNameLabel.Text = user.GivenName;
    UserLastNameLabel.Text = user.Surname;
    UserPrincipalNameLabel.Text = user.UserPrincipalName;
}

Voer de app opnieuw uit en klik op de knop Gebruikersgegevens laden. Na verificatie worden uw gebruikersgegevens weergegeven in de app:

Zie hoe u de Microsoft Graph .NET SDK kunt installeren en aan de slag kunt gaan met uw .NET MAUI-apps.

Volgende stappen

Ga naar het volgende artikel voor meer informatie over...

Een aanbevelings-app maken met .NET ADVISOR en ChatGPT-

Zie ook

Bronnen voor het leren van .NET MAUI

Overzicht van Microsoft Graph SDK

een systeemeigen clienttoepassing configureren

Overzicht van Api voor identiteits- en toegangsbeheer van Azure AD