Tutorial: Creación de una aplicación MAUI de .NET mediante el SDK de Microsoft Graph

Artículo
07/13/2023

Para empezar a trabajar con .NET MAUI, cree una aplicación multiplataforma en Windows que aproveche el SDK de Microsoft Graph para mostrar datos de usuario.

En este tutorial, aprenderá a:

Configuración del entorno para el desarrollo de .NET MAUI y creación de un proyecto de .NET MAUI
Registro de la aplicación cliente en Azure
Integración con Azure Identity y el SDK de Microsoft Graph
Actualizar la interfaz de usuario para mostrar información de usuario de Microsoft Graph

Requisitos previos

Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.
Requisitos de instalación de .NET MAUI.
Si no está familiarizado con .NET MAUI en Windows, debe empezar con el tutorial Compilación de la primera aplicación .NET MAUI para Windows .

Configuración del entorno

Si aún no ha configurado el entorno para el desarrollo de .NET MAUI, siga los pasos que se indican en Introducción a .NET MAUI en Windows.

Creación del proyecto MAUI de .NET

Nota

Si ya está familiarizado con la configuración de un proyecto maui de .NET, puede ir directamente a la sección Registro del cliente en Azure .

Inicie Visual Studio y, en la ventana de inicio, haga clic en Crear un nuevo proyecto para crear un nuevo proyecto:

Cree un nuevo proyecto.

En la ventana Crear un proyecto , seleccione MAUI en la lista desplegable Todos los tipos de proyecto, seleccione la plantilla Aplicación MAUI de .NET y haga clic en el botón Siguiente :

Plantilla de aplicación MAUI de .NET.

En la ventana Configurar el nuevo proyecto , asigne un nombre al proyecto, elija una ubicación para él y haga clic en el botón Siguiente :

Asigne al nuevo proyecto el nombre .

En la ventana Información adicional , haga clic en el botón Crear :

Cree un nuevo proyecto.

Espere a que se cree el proyecto y que se restauren sus dependencias:

Se crea el proyecto.

En la barra de herramientas de Visual Studio, presione el botón Máquina Windows para compilar y ejecutar la aplicación. Haga clic en el botón Hacer clic en mí y compruebe que el contenido del botón se actualiza con el número de clics.

Ahora que ha comprobado que la aplicación MAUI de .NET en Windows funciona según lo previsto, podemos integrar graph SDK. En la sección siguiente, agregará los paquetes necesarios para autenticar y realizar llamadas a Microsoft Graph.

Registro del cliente en Azure

Se requiere un registro de aplicación en Azure con el ámbito User.Read concedido a la aplicación para leer los datos de usuario de Microsoft Graph. Para registrar la aplicación, siga estos pasos:

Inicie sesión en Azure Portal.

Si tiene acceso a varios inquilinos, use el filtro Directorios y suscripciones en el menú superior para cambiar al inquilino en el que desea registrar la aplicación.

Busque y seleccione Azure Active Directory.

En Administrar, seleccione Registros de aplicaciones > Nuevo registro.

Escriba el Nombre de la aplicación, por ejemplo Win-App-calling-MsGraph. Los usuarios de la aplicación pueden ver este nombre, el cual se puede cambiar más tarde.

En Tipos de cuenta admitidos, seleccione Cuentas en cualquier directorio de organización y cuentas personales de Microsoft (por ejemplo, Skype, Xbox o Outlook.com) .

Seleccione Registrar para crear la aplicación.

Copie y guarde los valores del id. de aplicación (cliente) y del identificador de directorio (inquilino) para su uso posterior. Almacenaremos esos valores en la clase GraphService en la sección siguiente.

En Administrar, seleccione Autenticación.

Seleccione Agregar una plataforma > Aplicaciones móviles y de escritorio.

En la sección URI de redirección , seleccione https://login.microsoftonline.com/common/oauth2/nativeclient y, en URI de redirección personalizados , agregue https://localhost.

Seleccione Configurar.

En Administrar, seleccione Permisos de API.

Si el permiso User.Read de Microsoft Graph no está presente en Permisos configurados, seleccione Agregar permiso. En la pantalla Solicitar permisos de API, seleccione Permisos de aplicación de Microsoft Graph > y busque User.Read. Expanda Usuario, seleccione User.Read y haga clic en Agregar permisos.

Integración del SDK de Graph e Identidad de Azure

Ahora que tiene la aplicación MAUI de .NET que se ejecuta en Windows y ha configurado el registro de la aplicación en Azure, vamos a agregar un par de paquetes NuGet al proyecto para integrarse con Azure Identity y Microsoft Graph.

Haga clic con el botón derecho en el proyecto en Explorador de soluciones y seleccione Administrar paquetes NuGet... en el menú contextual.

En la ventana Administrador de paquetes NuGet , seleccione la pestaña Examinar y busque Azure.Identity:

Paquete Azure.Identity.

Para agregar la versión estable más reciente del paquete Azure.Identity al proyecto, haga clic en Instalar.

A continuación, busque Microsoft.Graph:

Paquete Microsoft.Graph.

Para agregar la versión estable más reciente del paquete Microsoft.Graph al proyecto, haga clic en Instalar.

Cierre la ventana Administrador de paquetes NuGet después de que el nuevo paquete haya terminado de instalarse.

Vuelva a hacer clic con el botón derecho en el proyecto y seleccione Agregar | Clase en el menú contextual.

En la ventana Agregar nuevo elemento que aparece, asigne un nombre a la clase GraphService y haga clic en Agregar:

Agregue la clase GraphService.

Agregue cuatro miembros privados a la GraphService clase y sustituya sus propios valores de identificador de cliente e identificador de inquilino para el texto del marcador de posición:

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;

Agregue un Initialize() método a GraphService, al que se llamará desde el constructor . El código de inicialización se autenticará mediante la InteractiveBrowserCredential clase . Tras la autenticación correcta, la clase de credencial proporcionará el token de autenticación a GraphServiceClient la clase de credencial junto con los ámbitos solicitados (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

El método "Initialize()" actualmente solo admite Windows. La autenticación en iOS y Android requiere un paquete NuGet diferente (Microsoft.Identity.Client) y algunos pasos adicionales. Para más información sobre la autenticación móvil, consulte Configuración de una aplicación cliente nativa.

Agregue un método asincrónico público denominado GetMyDetailsAsync() para devolver el User objeto para el usuario autenticado:

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

Se necesitarán dos using instrucciones para compilar el nuevo código agregado a GraphService:

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

En MainPage.xaml, agregue un x:Name a la etiqueta Hello, World!

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

Agregue un nuevo botón a la página después del existente CounterBtn para obtener la información del usuario de Graph:

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

En MainPage.xaml.cs, agregue variables privadas a para GraphService y User:

private GraphService graphService;
private User user;

Agregue un controlador de eventos para el Clicked evento que agregó a GetUserInfoButton en MainPage.xaml. El controlador de eventos creará una instancia de GraphService si es null y realizará la llamada para capturar los datos del usuario. El HelloLabeltexto del elemento se actualizará para saludar al usuario y mostrar la DisplayName propiedad de 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}!";
}

Ejecute la aplicación y haga clic en el botón Cargar información de usuario :

Iniciar la aplicación.

Cuando aparezca la ventana Iniciar sesión en su cuenta , seleccione una cuenta existente o haga clic en Usar otra cuenta:

Seleccione una cuenta.

Si seleccionó otra cuenta, escriba la dirección de correo electrónico y la contraseña de la cuenta e inicie sesión.

Una vez completada la autenticación, verá displayName del usuario en la aplicación:

La información del usuario se ha cargado en la etiqueta.

Actualizar la interfaz de usuario para mostrar información de usuario

Ahora que GraphService devuelve información de usuario, vamos a actualizar la interfaz de usuario para mostrar información adicional del perfil de usuario.

En MainPage.xaml, empiece actualizando el contenido de VerticalStackLayout, quitando la etiqueta y Image el control de bienvenida existentes y agregando cuatro nuevas etiquetas para mostrar la información del usuario. Cada etiqueta que se actualizará se denomina y hemos proporcionado texto de marcador de posición hasta que los datos se carguen desde la consulta Graph. El contenido de VerticalStackLayout debe tener ahora un aspecto similar al siguiente:

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

Por último, en MainPage.xaml.cs, actualice los elementos de la interfaz de usuario con los valores de las nuevas propiedades del GetUserInfoBtn_Clicked controlador de eventos mediante las propiedades del objeto 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;
}

Vuelva a ejecutar la aplicación y haga clic en el botón Cargar información de usuario . Debería ver la información del usuario mostrada en la aplicación después de autenticarse:

Se ha cargado información de usuario adicional en etiquetas.

Para obtener información sobre cómo instalar y empezar a trabajar con el SDK de Microsoft Graph en las aplicaciones maui de .NET, consulte Instalación del SDK de .NET de Microsoft Graph.