Compartilhar via

Adicionar autenticação ao seu aplicativo do Windows

Visão geral

Este tópico mostra como adicionar autenticação baseada em nuvem ao seu aplicativo móvel. Neste tutorial, você adicionará autenticação ao projeto de início rápido da Plataforma Universal do Windows (UWP) para Aplicativos Móveis usando um provedor de identidade compatível com o Serviço de Aplicativo do Azure. Depois de ser autenticado e autorizado com êxito pelo back-end do aplicativo móvel, o valor da ID de usuário é exibido.

Este tutorial é baseado no início rápido dos Aplicativos Móveis. Primeiro, você deve concluir o tutorial Introdução aos Aplicativos Móveis.

Registrar seu aplicativo para autenticação e configurar o Serviço de Aplicativo

Primeiro, você precisa registrar seu aplicativo no site de um provedor de identidade e, em seguida, definirá as credenciais geradas pelo provedor no back-end dos Aplicativos Móveis.

  1. Configure seu provedor de identidade preferencial seguindo as instruções específicas do provedor:

  2. Repita as etapas anteriores para cada provedor que você deseja dar suporte em seu aplicativo.

Adicionar seu aplicativo às URLs de Redirecionamento Externo Permitidas

A autenticação segura requer que você defina um novo esquema de URL para seu aplicativo. Isso permite que o sistema de autenticação redirecione de volta para seu aplicativo depois que o processo de autenticação for concluído. Neste tutorial, usamos o esquema de URL nome do aplicativo ao longo de todo o texto. No entanto, você pode usar qualquer esquema de URL escolhido. Ele deve ser exclusivo para seu aplicativo móvel. Para habilitar o redirecionamento no lado do servidor:

  1. No portal do Azure, selecione seu Serviço de Aplicativo.

  2. Clique na opção de menu Autenticação/Autorização.

  3. Na seção URLs de Redirecionamento Externo Permitidas, insira url_scheme_of_your_app://easyauth.callback. O url_scheme_of_your_app nessa cadeia de caracteres é o Esquema de URL para seu aplicativo móvel. Ele deve seguir a especificação de URL normal para um protocolo (usar somente letras e números e começar com uma letra). Você deve anotar a cadeia de caracteres escolhida, pois precisará ajustar o código do aplicativo móvel com o Esquema de URL em vários locais.

  4. Clique em Save (Salvar).

Restringir permissões a usuários autenticados

Por padrão, as APIs em um back-end dos Aplicativos Móveis podem ser invocadas anonimamente. Em seguida, você precisa restringir o acesso somente a clientes autenticados.

  • Node.js back end (por meio do portal do Azure):

    Em suas configurações de Aplicativos Móveis, clique em Tabelas Fáceis e selecione sua tabela. Clique em Alterar permissões, selecione Acesso autenticado apenas para todas as permissões e clique em Salvar.

  • Back-end .NET (C#)

    No projeto do servidor, navegue até Controllers>TodoItemController.cs. Adicione o atributo [Authorize] à classe TodoItemController, da seguinte maneira. Para restringir o acesso apenas a métodos específicos, você também pode aplicar esse atributo apenas a esses métodos em vez da classe. Publique novamente o projeto do servidor.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js backend (via código Node.js):

    Para exigir autenticação para acesso à tabela, adicione a seguinte linha ao script do servidor Node.js:

      table.access = 'authenticated';

    Para obter mais detalhes, consulte Como exigir autenticação para acesso a tabelas. Para saber como baixar o projeto de código de início rápido do seu site, consulte Como baixar o projeto de código de início rápido de back-end Node.js usando o Git.

Agora, você pode verificar se o acesso anônimo ao seu back-end foi desabilitado. Com o projeto de aplicativo UWP definido como o projeto de inicialização, implante e execute o aplicativo; verifique se uma exceção sem tratamento com um código de status 401 (não autorizado) é gerada após o início do aplicativo. Isso acontece porque o aplicativo tenta acessar o Código do Aplicativo Móvel como um usuário não autenticado, mas a tabela TodoItem agora requer autenticação.

Em seguida, você atualizará o aplicativo para autenticar usuários antes de solicitar recursos do Serviço de Aplicativo.

Adicionar autenticação ao aplicativo

  1. No arquivo de projeto do aplicativo UWP MainPage.xaml.cs e adicione o seguinte snippet de código:

     // Define a member variable for storing the signed-in user. 
 private MobileServiceUser user;

 // Define a method that performs the authentication process
 // using a Facebook sign-in. 
 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;
     try
     {
         // Change 'MobileService' to the name of your MobileServiceClient instance.
         // Sign-in using Facebook authentication.
         user = await App.MobileService
             .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         message =
             string.Format("You are now signed in - {0}", user.UserId);

         success = true;
     }
     catch (InvalidOperationException)
     {
         message = "You must log in. Login Required";
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();
     return success;
 }

    Esse código autentica o usuário com um logon no Facebook. Se você estiver usando um provedor de identidade diferente do Facebook, altere o valor de MobileServiceAuthenticationProvider acima para o valor do seu provedor.

  2. Substitua o método OnNavigatedTo() em MainPage.xaml.cs. Em seguida, você adicionará um botão Entrar ao aplicativo que dispara a autenticação.

     protected override async void OnNavigatedTo(NavigationEventArgs e)
 {
     if (e.Parameter is Uri)
     {
         App.MobileService.ResumeWithURL(e.Parameter as Uri);
     }
 }

  3. Adicione o seguinte snippet de código ao MainPage.xaml.cs:

     private async void ButtonLogin_Click(object sender, RoutedEventArgs e)
 {
     // Login the user and then load data from the mobile app.
     if (await AuthenticateAsync())
     {
         // Switch the buttons and load items from the mobile app.
         ButtonLogin.Visibility = Visibility.Collapsed;
         ButtonSave.Visibility = Visibility.Visible;
         //await InitLocalStoreAsync(); //offline sync support.
         await RefreshTodoItems();
     }
 }

  4. Abra o arquivo de projeto MainPage.xaml, localize o elemento que define o botão Salvar e substitua-o pelo seguinte código:

     <Button Name="ButtonSave" Visibility="Collapsed" Margin="0,8,8,0" 
         Click="ButtonSave_Click">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Add"/>
         <TextBlock Margin="5">Save</TextBlock>
     </StackPanel>
 </Button>
 <Button Name="ButtonLogin" Visibility="Visible" Margin="0,8,8,0" 
         Click="ButtonLogin_Click" TabIndex="0">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Permissions"/>
         <TextBlock Margin="5">Sign in</TextBlock> 
     </StackPanel>
 </Button>

  5. Adicione o seguinte snippet de código ao App.xaml.cs:

     protected override void OnActivated(IActivatedEventArgs args)
 {
     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         Frame content = Window.Current.Content as Frame;
         if (content.Content.GetType() == typeof(MainPage))
         {
             content.Navigate(typeof(MainPage), protocolArgs.Uri);
         }
     }
     Window.Current.Activate();
     base.OnActivated(args);
 }

  6. Abra o arquivo Package.appxmanifest, navegue até Declarações, na lista suspensa Declarações Disponíveis, selecione Protocolo e clique no botão Adicionar. Agora, configure as propriedades da declaração de protocolo . Em Nome de exibição, adicione o nome que você deseja exibir aos usuários do aplicativo. Em Nome, adicione {url_scheme_of_your_app}.

  7. Pressione a tecla F5 para executar o aplicativo, clique no botão Entrar e entre no aplicativo com o provedor de identidade escolhido. Depois que sua entrada for bem-sucedida, o aplicativo será executado sem erros e você poderá consultar seu back-end e fazer atualizações nos dados.

Armazenar o token de autenticação no cliente

O exemplo anterior mostrou uma entrada padrão, que exige que o cliente entre em contato com o provedor de identidade e o Serviço de Aplicativo sempre que o aplicativo for iniciado. Não só esse método é ineficiente, como você pode encontrar problemas relacionados ao uso caso muitos clientes tentem iniciar seu aplicativo ao mesmo tempo. Uma abordagem melhor é armazenar em cache o token de autorização retornado pelo Serviço de Aplicativo e tentar usá-lo primeiro antes de realizar uma autenticação via provedor.

Observação

Você pode armazenar em cache o token emitido pelos Serviços de Aplicativo independentemente de estar usando a autenticação gerenciada pelo cliente ou pelo serviço. Este tutorial usa a autenticação gerenciada pelo serviço.

  1. No arquivo de projeto MainPage.xaml.cs, adicione a seguinte usando instrução:

     using System.Linq;        
 using Windows.Security.Credentials;

  2. Substitua o método AuthenticateAsync pelo seguinte código:

     private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;

     // This sample uses the Facebook provider.
     var provider = MobileServiceAuthenticationProvider.Facebook;

     // Use the PasswordVault to securely store and access credentials.
     PasswordVault vault = new PasswordVault();
     PasswordCredential credential = null;

     try
     {
         // Try to get an existing credential from the vault.
         credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
     }
     catch (Exception)
     {
         // When there is no matching resource an error occurs, which we ignore.
     }

     if (credential != null)
     {
         // Create a user from the stored credentials.
         user = new MobileServiceUser(credential.UserName);
         credential.RetrievePassword();
         user.MobileServiceAuthenticationToken = credential.Password;

         // Set the user from the stored credentials.
         App.MobileService.CurrentUser = user;

         // Consider adding a check to determine if the token is 
         // expired, as shown in this post: https://aka.ms/jww5vp.

         success = true;
         message = string.Format("Cached credentials for user - {0}", user.UserId);
     }
     else
     {
         try
         {
             // Sign in with the identity provider.
             user = await App.MobileService
                 .LoginAsync(provider, "{url_scheme_of_your_app}");

             // Create and store the user credentials.
             credential = new PasswordCredential(provider.ToString(),
                 user.UserId, user.MobileServiceAuthenticationToken);
             vault.Add(credential);

             success = true;
             message = string.Format("You are now signed in - {0}", user.UserId);
         }
         catch (MobileServiceInvalidOperationException)
         {
             message = "You must sign in. Sign-In Required";
         }
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();

     return success;
 }

    Nesta versão do AuthenticateAsync, o aplicativo tenta usar credenciais armazenadas no PasswordVault para acessar o serviço. Um login regular também é realizado quando não há credencial armazenada.

    Observação

    Um token armazenado em cache pode ter expirado e a expiração do token também pode ocorrer após a autenticação quando o aplicativo está em uso. Para saber como determinar se um token expirou, consulte Verificar se há tokens de autenticação expirados. Para obter uma solução para lidar com erros de autorização relacionados à expiração de tokens, consulte o post Caching e tratamento de tokens expirados no SDK gerenciado dos Serviços Móveis do Azure.

  3. Reinicie o aplicativo duas vezes.

    Observe que, na primeira inicialização, o login com o provedor é novamente necessário. No entanto, na segunda reinicialização, as credenciais armazenadas em cache são usadas e o login é ignorado.

Próximas etapas

Agora que você concluiu este tutorial básico de autenticação, considere continuar em um dos seguintes tutoriais:

  • Adicionar notificações por push ao aplicativo
    Saiba como adicionar suporte a notificações por push ao seu aplicativo e configurar o back-end do Aplicativo Móvel para usar os Hubs de Notificação do Azure para enviar notificações por push.
  • Habilitar a sincronização offline para o aplicativo
    Saiba como adicionar suporte offline ao seu aplicativo usando um back-end do Aplicativo Móvel. A sincronização offline permite que os usuários finais interajam com um aplicativo móvel — exibindo, adicionando ou modificando dados — mesmo quando não há nenhuma conexão de rede.