Esercitazione: Creare un'app MAUI .NET con Microsoft Graph SDK

Articolo
01/31/2025

Per ottenere informazioni dettagliate su .NET MAUI, creare un'app multipiattaforma in Windows che sfrutta i Microsoft Graph SDK per visualizzare i dati utente.

In questa esercitazione si apprenderà come:

Configurare l'ambiente per lo sviluppo MAUI .NET e creare un progetto MAUI .NET
Registrare la tua app client in Azure
Eseguire l'integrazione con Azure Identity e Microsoft Graph SDK
Aggiornare l'interfaccia utente per visualizzare le informazioni utente da Microsoft Graph

Prerequisiti

Un account Azure con una sottoscrizione attiva. Crea un account gratis.
I requisiti di installazione di .NET MAUI .
Se sei nuovo a .NET MAUI su Windows, dovresti iniziare con l'esercitazione Crea la tua prima app .NET MAUI per Windows.

Configurazione dell'ambiente

Se non hai già configurato l'ambiente per lo sviluppo di .NET MAUI, segui i passaggi per iniziare con .NET MAUI su Windows.

Creazione del progetto MAUI .NET

Nota

Se si ha già familiarità con la configurazione di un progetto MAUI .NET, è possibile passare alla sezione Registrare il client in Azure.

Avviare Visual Studio e nella finestra iniziale fare clic su Crea un nuovo progetto per creare un nuovo progetto:

Creare un nuovo progetto.

Nella finestra Crea un nuovo progetto, selezionare MAUI nell'elenco a discesa Tutti i tipi di progetto, selezionare il modello .NET MAUI App e fare clic sul pulsante Avanti:

modello di app MAUI .NET.

Nella finestra Configura il nuovo progetto assegnare un nome al progetto, scegliere un percorso e fare clic sul pulsante Avanti:

Assegnare un nome al nuovo progetto.

Nella finestra Informazioni aggiuntive fare clic sul pulsante Crea:

Crea nuovo progetto.

Attendere che il progetto venga creato e che le relative dipendenze vengano ripristinate:

Il progetto viene creato.

Nella barra degli strumenti di Visual Studio premere il pulsante Computer Windows per compilare ed eseguire l'app. Fare clic sul pulsante Clicca su di me e verificare che il contenuto del pulsante si aggiorni con il numero di clic.

Dopo aver verificato che l'app MAUI .NET in Windows funzioni come previsto, è possibile integrare Graph SDK. Nella sezione successiva verranno aggiunti i pacchetti necessari per l'autenticazione e l'esecuzione di chiamate a Microsoft Graph.

Registrare il client in Azure

Per leggere i dati utente da Microsoft Graph, è necessario un di registrazione dell'app in Azure con l'ambito User.Read concesso all'app. Per registrare l'applicazione, seguire questa procedura:

Accedere al portale di Azure .

Se si ha accesso a più tenant, usare il filtro "Directory e sottoscrizioni" nel menu in alto per passare al tenant in cui si vuole registrare l'applicazione.

Cerca e seleziona Azure Active Directory.

In Gestisciselezionare Registrazioni app > Nuova registrazione.

Immettere un Nome per l'applicazione, ad esempio Win-App-calling-MsGraph. Gli utenti dell'app potrebbero visualizzare questo nome ed è possibile modificarlo in un secondo momento.

Nella sezione Tipi di account supportati selezionare Account in qualsiasi directory organizzativa e account Microsoft personali (ad esempio Skype, Xbox, Outlook.com).

Selezionare Registra per creare l'applicazione.

Copiare e salvare i valori dell'ID di applicazione (client) e dell'ID di Directory (tenant) per un uso successivo. Questi valori verranno archiviati nella classe GraphService nella sezione successiva.

In Gestisci, selezionare Autenticazione.

Selezionare Aggiungi una piattaforma > Applicazioni per dispositivi mobili e desktop.

Nella sezione URI di reindirizzamento selezionare https://login.microsoftonline.com/common/oauth2/nativeclient e in URI di reindirizzamento personalizzati aggiungere http://localhost.

Selezionare Configura.

In Gestisci, selezionare autorizzazioni API .

Se l'autorizzazione User.Read di Microsoft Graph non è presente in Autorizzazioni configurate, selezionare Aggiungi autorizzazione. Nella schermata Richiedi autorizzazioni API selezionare Microsoft Graph > autorizzazioni dell'applicazione e cercare User.Read. Espandi User, seleziona User.Reade fai clic su Aggiungi autorizzazioni.

Integrare Graph SDK e Azure Identity

Dopo aver creato l'app MAUI .NET in esecuzione in Windows e aver configurato la registrazione dell'app in Azure, aggiungere un paio di pacchetti NuGet al progetto per l'integrazione con Azure Identity e Microsoft Graph.

Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Gestisci pacchetti NuGet... dal menu di scelta rapida.

Nella finestra Gestione pacchetti NuGet, selezionare la scheda Sfoglia e cercare Azure.Identity:

pacchetto Azure.Identity.

Aggiungi al progetto la versione stabile più recente del pacchetto Azure.Identity facendo clic su Installa.

Cercare quindi Microsoft.Graph:

pacchetto Microsoft.Graph.

Aggiungere la versione stabile più recente del pacchetto di Microsoft.Graph al progetto facendo clic su Installa.

Chiudere la finestra di Gestione pacchetti NuGet al termine dell'installazione del nuovo pacchetto.

Fare di nuovo clic con il pulsante destro del mouse sul progetto e selezionare Aggiungi | Classe dal menu di scelta rapida.

Nella finestra Aggiungi nuovo elemento visualizzato assegnare alla classe il nome GraphService e fare clic su Aggiungi:

Aggiungi la classe GraphService.

Aggiungere quattro membri privati alla classe GraphService, sostituendo i propri valori di ID client e ID tenant al testo segnaposto:

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;

Aggiungere un metodo Initialize() a GraphService, che verrà chiamato dal costruttore . Il codice di inizializzazione eseguirà l'autenticazione usando la classe InteractiveBrowserCredential. Al termine dell'autenticazione, il token di autenticazione verrà fornito al GraphServiceClient dalla classe delle credenziali insieme agli ambiti richiesti (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
    }
}

Nota

Il metodo 'Initialize()' supporta attualmente solo Windows. L'autenticazione in iOS e Android richiede un pacchetto NuGet diverso (Microsoft.Identity.Client) e alcuni passaggi aggiuntivi. Per altre informazioni sull'autenticazione per dispositivi mobili, vedere Configurare un'applicazione client nativa.

Aggiungere un metodo asincrono pubblico denominato GetMyDetailsAsync() per restituire l'oggetto User per l'utente autenticato:

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

Per compilare il nuovo codice aggiunto a GraphServicesaranno necessarie due istruzioni using :

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

In MainPage.xaml aggiungi un x:Name all'etichetta Hello, World!:

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

Aggiungere un nuovo pulsante alla pagina dopo il CounterBtn esistente per ottenere le informazioni utente da Graph:

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

In MainPage.xaml.csaggiungere variabili private a per GraphService e User:

private GraphService graphService;
private User user;

Aggiungere un gestore eventi per l'evento Clicked che è stato aggiunto al GetUserInfoButton su MainPage.xaml. Il gestore eventi creerà un'istanza di GraphService se è Null e eseguirà la chiamata per recuperare i dati utente. Il testo del HelloLabelverrà aggiornato per salutare l'utente, visualizzando la proprietà DisplayName da 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}!";
}

Eseguire l'app e fare clic sul pulsante Carica informazioni utente:

Avviare l'app.

Quando viene visualizzata la finestra Accedi al tuo account, selezionare un account esistente oppure fare clic su Usa un altro account:

Selezionare un account.

Se è stato selezionato un account diverso, immettere l'indirizzo di posta elettronica e la password per l'account e accedere.

Al termine dell'autenticazione, nell'app verrà visualizzato il DisplayName dell'utente:

Le informazioni utente sono state caricate nell'etichetta.

Aggiornare l'interfaccia utente per visualizzare le informazioni utente

Ora che il GraphService restituisce informazioni sull'utente, aggiornare l'interfaccia utente per visualizzare alcune informazioni aggiuntive sul profilo utente.

In MainPage.xaml, iniziare aggiornando il contenuto del VerticalStackLayout, rimuovendo l'etichetta di benvenuto esistente e il controllo Image e aggiungendo quattro nuove etichette per visualizzare le informazioni dell'utente. Ogni etichetta che verrà aggiornata viene denominata e viene fornito un testo segnaposto fino a quando i dati non vengono caricati dalla query Graph. Il contenuto del VerticalStackLayout dovrebbe ora essere simile al seguente:

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

Infine, in MainPage.xaml.cs aggiornare gli elementi dell'interfaccia utente con i valori delle nuove proprietà nel gestore eventi GetUserInfoBtn_Clicked usando le proprietà dell'oggetto Graph User:

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;
}

Eseguire di nuovo l'app e fare clic sul pulsante Carica informazioni utente. Le informazioni utente verranno visualizzate nell'app dopo l'autenticazione:

Altre informazioni utente sono state caricate nelle etichette.