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

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.

Introdução

Neste tutorial, você aprenderá a criar um aplicativo .NET MAUI para Windows no Visual Studio 2022 (17.3 ou posterior) que carrega alguns dados do usuário do Microsoft Graph. Autenticaremos uma conta da Microsoft com a Identidade do Azure. As informações de identidade, na forma de um token MSAL, serão usadas para autorizar a chamada do SDK do Graph e obter o nome de exibição para o usuário autenticado.

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:

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 :

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

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

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

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, selecioneRegistros 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:

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

Em seguida, pesquise 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 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 :

Quando a janela Entrar em sua conta for exibida, selecione uma conta existente ou clique em Usar outra 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:

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.

Comece adicionando algumas novas propriedades observáveis à MainViewModel classe para armazenar os DisplayNamecampos , SurnameGivenName, e UserPrincipalName da resposta API do Graph:

[ObservableProperty]
private string userName = "";

[ObservableProperty]
private string userGivenName = "";

[ObservableProperty]
private string userSurname = "";

[ObservableProperty]
private string userPrincipalName = "";

Em MainPage.xaml.cs, defina os valores das novas propriedades no GetUserInfoBtn_Clicked manipulador de eventos com propriedades do objeto Usuário do Graph:

[RelayCommand]
private async Task LoadUserInformation()
{
    var service = new GraphService();
    Microsoft.Graph.Models.User user = await service.GetMyDetailsAsync();
    helloMessage = $"Hello, {user.DisplayName}";

    UserName = user.DisplayName;
    UserGivenName = user.GivenName;
    UserSurname = user.Surname;
    UserPrincipalName = user.UserPrincipalName;
}

Por fim, em MainPage.xaml, atualize 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. O conteúdo do VerticalStackLayout agora deve ter esta aparência:

<VerticalStackLayout
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center">
    <Label
        Text="{Binding Path=HelloMessage, Mode=OneWay}"
        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"
        Command="{Binding Path=IncrementCounterCommand}"
        HorizontalOptions="Center" />
    <Button
        Text="Load User Info"
        SemanticProperties.Hint="Loads user information from Microsoft Graph"
        Command="{Binding Path=LoadUserInformationCommand}"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserName, Mode=OneWay}"
        SemanticProperties.Description="Displays the user's display name from Microsoft Graph."
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserGivenName, Mode=OneWay}"
        SemanticProperties.Description="Displays the user's first name info from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserSurname, Mode=OneWay}"
        SemanticProperties.Description="Displays the user's last name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserPrincipalName, Mode=OneWay}"
        SemanticProperties.Description="Displays the user principal name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
</VerticalStackLayout>

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:

Para saber como instalar e começar a usar o SDK do Microsoft Graph em seus aplicativos .NET MAUI, confira Instalar o SDK do .NET do Microsoft Graph.

Tópicos relacionados

Recursos para aprendizado do .NET MAUI

Visão geral do SDK do Microsoft Graph

Configurar um aplicativo de cliente nativo

visão geral da API de gerenciamento de identidades e acesso do Azure AD