Partilhar via

Adicione autenticação à sua aplicação Windows

  • Artigo

Descrição Geral

Este tópico mostra-lhe como adicionar autenticação baseada na nuvem à sua aplicação móvel. Neste tutorial, adiciona-se a autenticação ao projeto de arranque rápido Plataforma Universal do Windows (UWP) para Aplicações Móveis utilizando um fornecedor de identidade que é suportado por Serviço de Aplicações do Azure. Depois de ter sido autenticado com sucesso e autorizado pelo seu backend da Aplicação Móvel, é apresentado o valor de ID do utilizador.

Este tutorial baseia-se no arranque rápido das Aplicações Móveis. Primeiro tem de completar o tutorial Introdução com aplicações móveis.

Registe o seu aplicativo para autenticação e configuure o Serviço de Aplicações

Primeiro, precisa de registar a sua aplicação no site de um fornecedor de identidade, e depois vai definir as credenciais geradas pelo fornecedor nas Aplicações Móveis.

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

  2. Repita os passos anteriores para cada fornecedor que pretende suportar na sua aplicação.

Adicione a sua aplicação aos URLs de redirecionamento externo permitidos

A autenticação segura requer que defina um novo esquema de URL para a sua aplicação. Isto permite que o sistema de autenticação redirecione de volta para a sua aplicação uma vez que o processo de autenticação esteja concluído. Neste tutorial, usamos o appname do esquema URL em toda a parte. No entanto, pode utilizar qualquer esquema de URL que escolha. Deve ser exclusivo da sua aplicação móvel. Para ativar a reorientação no lado do servidor:

  1. Na portal do Azure, selecione o seu Serviço de Aplicações.

  2. Clique na opção menu autenticação/autorização .

  3. Nos URLs de redirecionamento externo permitidos, insiraurl_scheme_of_your_app://easyauth.callback . O url_scheme_of_your_app nesta cadeia é o URL Scheme para a sua aplicação móvel. Deve seguir a especificação normal de URL para um protocolo (use apenas letras e números, e comece com uma letra). Deve tomar nota da cadeia que escolher, pois terá de ajustar o seu código de aplicação móvel com o Url Scheme em vários locais.

  4. Clique em Guardar.

Restringir permissões a utilizadores autenticados

Por padrão, as APIs numa parte traseira de Aplicações Móveis podem ser invocadas de forma anónima. Em seguida, tem de restringir o acesso apenas a clientes autenticados.

  • Node.js parte de trás (através do portal do Azure) :

    Nas definições de Aplicações Móveis, clique em Tabelas Fáceis e selecione a sua tabela. Clique em Alterar permissões, selecione acesso autenticado apenas para todas as permissões e, em seguida, clique em Guardar.

  • .NET back end (C#):

    No projeto do servidor, navegue para ControllersTodoItemController>.cs. Adicione o [Authorize] atributo à classe TodoItemController , da seguinte forma. Para restringir o acesso apenas a métodos específicos, também pode aplicar este atributo apenas a esses métodos em vez da classe. Republicar o projeto do servidor.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js backend (através do código Node.js) :

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

      table.access = 'authenticated';

    Para mais detalhes, consulte Como: Requera autenticação para acesso às tabelas. Para aprender a descarregar o projeto de código quickstart do seu site, consulte Como: Descarregue o projeto de código de arranque rápido de backend Node.js usando Git.

Agora, pode verificar se o acesso anónimo ao seu backend foi desativado. Com o projeto de aplicação UWP definido como o projeto de arranque, implementar e executar a app; verifique se uma exceção não manipulada com um código de estado de 401 (não autorizado) é levantada após o início da aplicação. Isto acontece porque a aplicação tenta aceder ao seu Código de Aplicação Móvel como um utilizador não autenticado, mas a tabela TodoItem agora requer autenticação.

Em seguida, irá atualizar a aplicação para autenticar os utilizadores antes de solicitar recursos da sua Serviço de Aplicações.

Adicionar autenticação à app

  1. No ficheiro de projeto de aplicação UWP MainPage.xaml.cs e adicionar o seguinte corte 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;
 }

    Este código autentica o utilizador com um login no Facebook. Se estiver a utilizar um fornecedor de identidade diferente do Facebook, altere o valor do MobileServiceAuthenticationProvider acima para o valor para o seu fornecedor.

  2. Substitua o método OnNavigatedTo() em MainPage.xaml.cs. Em seguida, irá adicionar um botão De sinal no botão à aplicação que aciona 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 corte 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 ficheiro de projeto MainPage.xaml, localize o elemento que define o botão Guardar 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 corte de código à 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. Abrir ficheiro Pacote.appxmanifest, navegar para Declarações, na lista de declarações disponíveis , selecionar Protocolo e clicar no botão Adicionar . Agora configure as propriedades da declaração do Protocolo . No nome Display, adicione o nome que pretende apresentar aos utilizadores da sua aplicação. Em Nome, adicione o seu {url_scheme_of_your_app}.

  7. Prima a tecla F5 para executar a aplicação, clique no botão 'Assinar' e inscreva-se na aplicação com o seu fornecedor de identidade escolhido. Depois de o seu sismo ter sido bem sucedido, a aplicação funciona sem erros e é capaz de consultar o seu backend e fazer atualizações aos dados.

Guarde o símbolo de autenticação no cliente

O exemplo anterior mostrou um login padrão, o que requer que o cliente contacte tanto o fornecedor de identidade como o Serviço de Aplicações sempre que a aplicação começa. Este método não só é ineficiente, como pode encontrar problemas relacionados com o uso caso muitos clientes tentem iniciar a sua aplicação ao mesmo tempo. Uma melhor abordagem é cache o sinal de autorização devolvido pelo seu Serviço de Aplicações e tentar usá-lo primeiro antes de usar um início de s indicado pelo fornecedor.

Nota

Pode cache o token emitido pelos Serviços de Aplicação, independentemente de estar a utilizar a autenticação gerida pelo cliente ou gerida pelo serviço. Este tutorial utiliza a autenticação gerida pelo serviço.

  1. No ficheiro de projeto MainPage.xaml.cs, adicione as seguintes declarações:

     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, a aplicação tenta utilizar credenciais armazenadas no PasswordVault para aceder ao serviço. Uma inscrição regular também é realizada quando não existe credencial armazenada.

    Nota

    Um token em cache pode ser expirado, e a expiração simbólica também pode ocorrer após a autenticação quando a aplicação está em uso. Para saber como determinar se um token está expirado, consulte verificar se há fichas de autenticação expiradas. Para obter uma solução para lidar com erros de autorização relacionados com fichas caducadas, consulte o post Colocação em Cache e manuseamento de fichas expiradas em Azure Serviços Móveis gerido SDK.

  3. Reinicie a aplicação duas vezes.

    Note que no primeiro arranque, é novamente necessário iniciar sedução com o fornecedor. No entanto, no segundo recomeço são utilizadas as credenciais em cache e o início de sedus é contornado.

Passos seguintes

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

  • Adicionar notificações push à aplicação
    Saiba como adicionar suporte de notificações push à aplicação e configurar o back-end da Aplicação Móvel para utilizar Notification Hubs do Azure para enviar notificações push.
  • Permitir sincronização offline para a sua aplicação
    Saiba como adicionar suporte offline à aplicação utilizando um back-end de Aplicação Móvel. A sincronização offline permite que os utilizadores finais interajam com uma aplicação móvel — visualização, adição ou modificação de dados — mesmo quando não há ligação à rede.