Tutorial: creazione di un'app MAUI .NET con Microsoft Graph SDK

Articolo
04/03/2024

È possibile usare .NET MAUI creando un'app multipiattaforma in Windows che sfrutta Microsoft Graph SDK per visualizzare i dati utente.

In questa esercitazione apprenderai a:

Configurare l'ambiente per lo sviluppo MAUI .NET e creare un progetto MAUI .NET
Registrare l'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. Creare un account gratuitamente.
I requisiti di installazione .NET MAUI
Se non si ha una versione di .NET MAUI in Windows, è consigliabile iniziare con il tutorial Creazione della prima app MAUI .NET per Windows.

Impostazione dell'ambiente

Se non è già stato configurato l'ambiente per lo sviluppo MAUI .NET, seguire la procedura per Introduzione a .NET MAUI in Windows.

Creazione del progetto .NET MAUI

Nota

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

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

Create a new project.

Dalla finestra Crea un nuovo progetto selezionare MAUI nell'elenco a discesa Tipo di progetto, selezionare il modello App .NET MAUI, quindi fare clic sul pulsante Avanti:

.NET MAUI App template.

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

Name the new project.

Nella finestra Informazioni aggiuntive fare clic sul pulsante Crea:

Create new project.

Attendere la creazione del progetto e il ripristino delle relative dipendenze:

Project is created.

Nella barra degli strumenti di Visual Studio premere il pulsante Computer Windows per compilare ed eseguire l'app. Selezionare Fai clic 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.

Registra l'app client in Azure

Per leggere i dati utente da Microsoft Graph, è necessaria una registrazione app in Azure con l'ambito User.Read concesso all'app. Eseguire questi passaggi per registrare l'applicazione:

Accedi al portale di Azure.

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

Cerca e seleziona Azure Active Directory.

Alla voce Gestisci, selezionare Registrazioni app > Nuova registrazione.

In Nome immettere un nome per l'applicazione, ad esempio Win-App-calling-MsGraph. Tale nome, che potrebbe essere visualizzato dagli utenti dell'app, può essere modificato 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 di ID applicazione (client) e ID directory (tenant) e registrarli per usarli successivamente. 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 https://localhost.

Seleziona Configura.

In Gestisci selezionare Autorizzazioni API.

Se nell'autorizzazione di Microsoft Graph User.Read non è presente alla voce Autorizzazioni configurate, selezionare Aggiungi autorizzazione. Nella schermata Richiedi autorizzazioni API, selezionare Microsoft Graph > Autorizzazioni applicazione e cercare User.Read. Espandere Utente, selezionare User.Read e fare 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 su Esplora soluzioni e selezionare Gestisci pacchetti NuGet... dal menu di scelta rapida.

Nella finestra Gestisci pacchetti NuGet selezionare Sfoglia e cercare Azure.Identity.

Azure.Identity package.

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

Fatto questo, cercare Microsoft.Graph:

Microsoft.Graph package.

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

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

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

Una volta visualizzata la finestra Aggiungi nuovo elemento assegnare alla classe il nome GraphService e fare clic su Aggiungi:

Add GraphService class.

Aggiungere quattro membri privati alla GraphService classe, sostituendo i propri valori ID client e ID tenant per il 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 Initialize() metodo a GraphService, che verrà richiesto dal costruttore . Il codice di inizializzazione eseguirà l'autenticazione usando la classe InteractiveBrowserCredential. Al termine dell'autenticazione, il token di autenticazione verrà fornito a 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("https://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 Configura 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;
    }
}

Saranno necessarie due using istruzioni per compilare il nuovo codice aggiunto a GraphService:

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

In MainPage.xaml aggiungere un elemento 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 l'esistente CounterBtn 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.cs aggiungere variabili private per GraphService e User:

private GraphService graphService;
private User user;

Aggiungere un gestore eventi per l'evento aggiunto Clicked a GetUserInfoButton in MainPage.xaml. Il gestore eventi creerà un'istanza di GraphService se è Null e eseguirà la chiamata per recuperare i dati utente. Il testo di HelloLabel verrà aggiornato per inviare un messaggio di benvenuto all'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:

Launch the app.

Quando viene visualizzata la finestra Accedi all'account , selezionare un account esistente o fare clic su Usa un altro account:

Select an 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 DisplayName nell'app:

User info has loaded in label.

Aggiornare l'interfaccia utente per visualizzare le informazioni utente

Una volta che GraphService restituisce informazioni utente, aggiornare l'interfaccia utente per visualizzare alcune informazioni aggiuntive sul profilo utente.

In MainPage.xaml, iniziare aggiornando i contenuti di VerticalStackLayout, rimuovendo l'etichetta di benvenuto e il controllo Image già esistenti e aggiungendo quattro nuove etichette per visualizzare le informazioni 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 file VerticalStackLayout dovrebbe essere simile a questo:

<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 GetUserInfoBtn_Clicked gestore eventi 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 l'app e fare clic sul pulsante Carica informazioni utente. Le informazioni utente verranno visualizzate nell'app dopo l'autenticazione:

Additional user info has been loaded in labels.