Compartilhar via

Adicionar autenticação ao seu aplicativo do Windows

  • Artigo

Visão geral

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

Este tutorial baseia-se no início rápido dos Aplicativos Móveis. Você deve primeiro concluir o tutorial Introdução aos Aplicativos Móveis.

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

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

  1. Configure o provedor de identidade preferido, seguindo as instruções específicas do provedor:

  2. Repita as etapas anteriores para cada provedor ao qual você desejar dar suporte em seu aplicativo.

Adicionar seu aplicativo às URLs de redirecionamento externo permitidas

A autenticação segura exige que você defina um novo esquema de URL para seu aplicativo. Isso permite que o sistema de autenticação redirecione para seu aplicativo após a conclusão do processo de autenticação. Neste tutorial, usamos sempre o esquema de URL appname. No entanto, você pode usar o esquema de URL que quiser. 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. Em URLs de Redirecionamento Externo Permitidas, insira url_scheme_of_your_app://easyauth.callback. O esquema_de_URL_do_seu_aplicativo nessa cadeia de caracteres é o esquema de URL do seu aplicativo móvel. Ele deve seguir as especificações de URL normal para um protocolo (use somente letras e números e inicie com uma letra). Você deve anotar a cadeia de caracteres escolhida, já que precisará ajustar o código do aplicativo móvel com o esquema de URL em vários lugares.

  4. Clique em Save (Salvar).

Restringir permissões a usuários autenticados

Por padrão, APIs em um back-end de Aplicativos Móveis podem ser chamadas de forma anônima. Em seguida, você precisa restringir o acesso somente aos clientes autenticados.

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

    Nas configurações de seus Aplicativos Móveis, clique em Tabelas Fáceis e selecione a tabela. Clique em Alterar permissões, selecione Apenas acesso autenticado para todas as permissões e clique em Salvar.

  • Back-end do .NET (C#):

    No projeto do servidor, navegue até controladores>TodoItemController. cs. Adicione o atributo [Authorize] à classe TodoItemController , como a seguir. Para restringir o acesso somente aos métodos específicos, você também pode aplicar esse atributo apenas aos métodos, em vez de à classe. Republicar o projeto de servidor.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Back-end do Node.js (por meio de código Node.js) :

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

      table.access = 'authenticated';

    Para obter mais detalhes, veja Como exigir autenticação para acesso às 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 do Node.js usando Git.

Agora, é possível verificar se o acesso anônimo para o back-end foi desabilitado. Com o projeto de aplicativo da UWP configurado como 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 depois que o aplicativo é iniciado. 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 exige autenticação.

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

Adicionar autenticação ao aplicativo

  1. No arquivo de projeto de aplicativo da UWP MainPage.xaml.cs, 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 do Facebook. Se você estiver usando um provedor de identidade além do Facebook, altere o valor MobileServiceAuthenticationProvider acima para o valor de 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 à classe 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 código a seguir:

     <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 do Protocolo. Em Nome de exibição, adicione o nome que você deseja exibir aos usuários do aplicativo. Em Nome, adicione o {esquema_de_URL_do_seu_aplicativo}.

  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 o seu logon for bem-sucedido, o aplicativo será executado sem erros, e você poderá consultar o 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 requer que o cliente contate o provedor de identidade e o Serviço de Aplicativo sempre que o aplicativo for iniciado. Além de esse método ser ineficiente, você pode se deparar com problemas relacionados ao uso caso muitos consumidores tentem iniciar o 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 antes de usar um logon baseado em provedor.

Observação

Você pode armazenar em cache o token emitido pelos Serviços de Aplicativos usando tanto a autenticação gerenciada pelo cliente quanto a autenticação gerenciada pelo serviço. Este tutorial usa a autenticação gerenciada pelo serviço.

  1. No arquivo de projeto MainPage.xaml.cs e adicione as seguintes instruções using :

     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 as credenciais armazenadas no PasswordVault para acessar o serviço. Também é realizado um registro normal quando não há uma credencial armazenada.

    Observação

    Um token armazenado em cache pode estar expirado e a expiração do token pode ocorrer após a autenticação quando o aplicativo estiver em uso. Para saber como determinar se um token está expirado, consulte Procurar tokens de autenticação expirados. Para solucionar como lidar com erros de autorização relacionados a tokens expirados, consulte a postagem Armazenagem em cache e manipulação de tokens expirados no SDK gerenciado pelos Serviços Móveis do Azure.

  3. Reiniciar o aplicativo.

    Observe que na primeira inicialização, o registro com o provedor é requerido novamente. Porém, na segunda inicialização são usadas as credenciais armazenadas em cache e o registro é desviado.

Próximas etapas

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

  • Adicionar notificações por push ao seu aplicativo
    Saiba como adicionar suporte a notificações por push ao 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 sincronização offline para seu aplicativo
    Saiba como adicionar suporte offline em 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á conexão de rede.