Compartir a través de

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

  • Artículo

Para empezar a trabajar con .NET MAUI, cree una aplicación multiplataforma en Windows que aproveche el SDK de Microsoft Graph para mostrar los 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 MAUI de .NET
  • Registro de la aplicación cliente en Azure
  • Integración con Azure Identity y el SDK de Microsoft Graph
  • Actualización de la interfaz de usuario para mostrar información de usuario de Microsoft Graph

Requisitos previos

Configuración del entorno

Si aún no ha configurado el entorno para el desarrollo de MAUI de .NET, siga los pasos para Empezar a trabajar con .NET MAUI en Windows.

Creación del proyecto MAUI de .NET

Nota:

Si ya está familiarizado con la configuración de un proyecto de .NET MAUI, 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 nuevo proyecto, seleccione MAUI en la lista desplegable Todos los tipos de proyecto, seleccione la plantilla Aplicación MAUI .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 para que se restauren sus dependencias:

Se crea el proyecto.

En la barra de herramientas de Visual Studio, presione el botón Máquina de 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 autenticarse 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 identificador 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 Add a platform Mobile and desktop applications (Agregar una plataforma > móvil y aplicaciones 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 aplicaciones 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 el 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 de Administrador de paquetes nuGet una vez 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 credenciales proporcionará el token de autenticación junto GraphServiceClient 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:

Actualmente, el método "Initialize()" solo admite Windows. La autenticación en iOS y Android requiere un paquete NuGet diferente (Microsoft.Identity.Client) y algunos pasos adicionales. Para obtener 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 elemento 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 archivo 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 la 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á el displayName del usuario en en la aplicación:

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

Actualización de la interfaz de usuario para mostrar la información del 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 el control de bienvenida existentes y Image agregando cuatro etiquetas nuevas 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 de Graph. El contenido de VerticalStackLayout debería 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 que se muestra 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.

Pasos siguientes

Avance al siguiente artículo para obtener información sobre...

Creación de una aplicación de recomendación con .NET MAUI y ChatGPT

Consulte también

Recursos para aprender .NET MAUI

Introducción al SDK de Microsoft Graph

Configuración de una aplicación cliente nativa

Introducción a la API de administración de identidades y acceso de Azure AD