Tutorial: Criar um aplicativo .NET MAUI usando o SDK do Microsoft Graph

Artigo
07/13/2023

Obtenha a prática com o .NET MAUI criando um aplicativo multiplataforma no Windows que aproveita o SDK do Microsoft Graph para exibir dados do usuário.

Neste tutorial, você aprenderá como:

Configurar seu ambiente para desenvolvimento do .NET MAUI e criar um projeto .NET MAUI
Registrar seu aplicativo cliente no Azure
Integrar-se ao Azure Identity e ao SDK do Microsoft Graph
Atualizar a interface do usuário para exibir informações do usuário do Microsoft Graph

Pré-requisitos

Uma conta do Azure com uma assinatura ativa. Crie uma conta gratuitamente.
Os requisitos de instalação do .NET MAUI.
Se você não estiver familiarizado com o .NET MAUI no Windows, comece com o tutorial Criar seu primeiro aplicativo .NET MAUI para Windows .

Configurando o ambiente

Se você ainda não configurou seu ambiente para desenvolvimento do .NET MAUI, siga as etapas para Introdução ao MAUI do .NET no Windows.

Criando o projeto .NET MAUI

Observação

Se você já estiver familiarizado com a configuração de um projeto .NET MAUI, poderá pular para a seção Registrar seu cliente no Azure .

Inicie o Visual Studio e, na janela inicial, clique em Criar um novo projeto para criar um novo projeto:

Crie um novo projeto.

Na janela Criar um novo projeto , selecione MAUI na lista suspensa Todos os tipos de projeto, selecione o modelo aplicativo .NET MAUI e clique no botão Avançar :

Modelo de aplicativo .NET MAUI.

Na janela Configurar seu novo projeto , dê um nome ao projeto, escolha um local para ele e clique no botão Avançar :

Nomeie o novo projeto.

Na janela Informações adicionais , clique no botão Criar :

Crie um novo projeto.

Aguarde até que o projeto seja criado e para que suas dependências sejam restauradas:

O projeto é criado.

Na barra de ferramentas do Visual Studio, pressione o botão Computador Windows para compilar e executar o aplicativo. Clique no botão Clique em mim e verifique se o conteúdo do botão é atualizado com o número de cliques.

Agora que você verificou que o aplicativo .NET MAUI no Windows está funcionando conforme o esperado, podemos integrar o SDK do Graph. Na próxima seção, você adicionará os pacotes necessários para autenticar e fazer chamadas ao Microsoft Graph.

Registrar seu cliente no Azure

Um registro de aplicativo no Azure com o escopo User.Read concedido ao aplicativo é necessário para ler dados do usuário do Microsoft Graph. Para registrar seu aplicativo, siga estas etapas:

Entre no portal do Azure.

Se você tiver acesso a vários locatários, use o filtro Diretórios + assinaturas no menu superior para alternar para o locatário no qual deseja registrar o aplicativo.

Pesquise Azure Active Directory e selecione-o.

Em Gerenciar, selecione Registros de aplicativo >Novo registro.

Insira um Nome para seu aplicativo, por exemplo, Win-App-calling-MsGraph. Os usuários do seu aplicativo podem ver esse nome e você pode alterá-lo mais tarde.

Na seção Tipos de conta com suporte, selecione Contas em qualquer diretório organizacional e contas pessoais da Microsoft (por exemplo, Skype, Xbox, Outlook.com) .

Selecione Registrar para criar o aplicativo.

Copie e salve os valores da ID do aplicativo (cliente) e da ID do diretório (locatário) para uso posterior. Armazenaremos esses valores na classe GraphService na próxima seção.

Em Gerenciar, selecione Autenticação.

Selecione Adicionar uma plataforma > Aplicativos móveis e de área de trabalho.

Na seção URIs de Redirecionamento , selecione https://login.microsoftonline.com/common/oauth2/nativeclient e, em URIs de redirecionamento personalizados , adicione https://localhost.

Selecione Configurar.

Em Gerenciar, selecione Permissões de API.

Se a permissão User.Read do Microsoft Graph não estiver presente em Permissões configuradas, selecione Adicionar permissão. Na tela Solicitar permissões de API, selecione Permissões de aplicativo do Microsoft Graph > e pesquise User.Read. Expanda Usuário, selecione User.Read e clique em Adicionar permissões.

Integrar o SDK do Graph e o Azure Identity

Agora que você tem seu aplicativo .NET MAUI em execução no Windows e configurou o registro do aplicativo no Azure, vamos adicionar alguns pacotes NuGet ao projeto para integração com a Identidade do Azure e o Microsoft Graph.

Clique com o botão direito do mouse no projeto no Gerenciador de Soluções e selecione Gerenciar Pacotes NuGet... no menu de contexto.

Na janela Gerenciador de Pacotes NuGet , selecione a guia Procurar e pesquise por Azure.Identity:

Pacote Azure.Identity.

Adicione a versão estável mais recente do pacote Azure.Identity ao projeto clicando em Instalar.

Em seguida, pesquise Microsoft.Graph:

Pacote Microsoft.Graph.

Adicione a versão estável mais recente do pacote Microsoft.Graph ao projeto clicando em Instalar.

Feche a janela Gerenciador de Pacotes NuGet após a instalação do novo pacote.

Clique com o botão direito do mouse no projeto novamente e selecione Adicionar | Classe no menu de contexto.

Na janela Adicionar Novo Item exibida, nomeie a classe GraphService e clique em Adicionar:

Adicione a classe GraphService.

Adicione quatro membros privados à GraphService classe , substituindo seus próprios valores de ID de cliente e ID de locatário pelo texto do espaço reservado:

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;

Adicione um Initialize() método a GraphService, que será chamado do construtor . O código de inicialização será autenticado usando a InteractiveBrowserCredential classe . Após a autenticação bem-sucedida, o token de autenticação será fornecido ao GraphServiceClient pela classe de credencial junto com os escopos 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
    }
}

Observação

Atualmente, o método 'Initialize()' dá suporte apenas ao Windows. A autenticação no iOS e no Android requer um pacote NuGet diferente (Microsoft.Identity.Client) e algumas etapas adicionais. Para ler mais sobre autenticação móvel, consulte Configurar um aplicativo cliente nativo.

Adicione um método assíncrono público chamado GetMyDetailsAsync() para retornar o User objeto para o usuário autenticado:

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

Duas using instruções serão necessárias para compilar o novo código adicionado a GraphService:

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

Em MainPage.xaml, adicione um x:Name ao rótulo Olá, Mundo! :

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

Adicione um novo botão à página após o existente CounterBtn para obter as informações do usuário do Graph:

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

Em MainPage.xaml.cs, adicione variáveis privadas a para GraphService e User:

private GraphService graphService;
private User user;

Adicione um manipulador de eventos para o Clicked evento que você adicionou ao GetUserInfoButton em MainPage.xaml. O manipulador de eventos criará uma instância de GraphService se ela for nula e fará a chamada para buscar os dados do usuário. O HelloLabeltexto do será atualizado para dizer olá ao usuário, exibindo a DisplayName propriedade do 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}!";
}

Execute o aplicativo e clique no botão Carregar Informações do Usuário :

Iniciar o aplicativo.

Quando a janela Entrar em sua conta for exibida, selecione uma conta existente ou clique em Usar outra conta:

Selecione uma conta.

Se você selecionou uma conta diferente, insira o endereço de email e a senha da conta e entre.

Após a conclusão da autenticação, você verá o DisplayName do usuário no aplicativo:

As informações do usuário foram carregadas no rótulo.

Atualizar a interface do usuário para exibir informações do usuário

Agora que o GraphService está retornando informações do usuário, vamos atualizar a interface do usuário para exibir algumas informações adicionais do perfil do usuário.

Em MainPage.xaml, comece atualizando o conteúdo do VerticalStackLayout, removendo o rótulo e Image o controle de boas-vindas existentes e adicionando quatro novos rótulos para exibir as informações do usuário. Cada rótulo que será atualizado é nomeado e fornecemos algum texto de espaço reservado até que os dados sejam carregados da consulta do Graph. O conteúdo do VerticalStackLayout agora deve ter esta aparência:

<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 fim, em MainPage.xaml.cs, atualize os elementos da interface do usuário com os valores das novas propriedades no GetUserInfoBtn_Clicked manipulador de eventos usando as propriedades do objeto Usuário do 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}!";

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

Execute o aplicativo novamente e clique no botão Carregar Informações do Usuário . Você deverá ver as informações do usuário exibidas no aplicativo após a autenticação:

Informações adicionais do usuário foram carregadas em rótulos.