Adicione autenticação à sua aplicação Xamarin Forms

Descrição Geral

Este tópico mostra-lhe como autenticar os utilizadores de uma Aplicação Móvel Serviço de Aplicações a partir da aplicação do seu cliente. Neste tutorial, adiciona-se autenticação ao projeto Quickstart formas Xamarin utilizando um fornecedor de identidade que é suportado por Serviço de Aplicações. Depois de ter sido autenticado e autorizado com sucesso pela sua Aplicação Móvel, o valor de ID do utilizador é apresentado e poderá aceder a dados restritos da tabela.

Pré-requisitos

Para obter o melhor resultado com este tutorial, recomendamos que complete primeiro o tutorial da aplicação Create a Xamarin Forms . Depois de completar este tutorial, terá um projeto Xamarin Forms que é uma aplicação multiplataforma TodoList.

Se não utilizar o projeto do servidor de arranque rápido descarregado, tem de adicionar o pacote de extensão de autenticação ao seu projeto. Para obter mais informações sobre pacotes de extensão do servidor, consulte Work with the .NET backend server SDK for Azure Mobile Apps.

Registe a sua aplicação para autenticação e configuração de Serviços 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 OK.

  5. 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.

Adicionar autenticação à biblioteca de classe portátil

As Aplicações Móveis utilizam o método de extensão LoginAsync no MobileServiceClient para iniciar sessão num utilizador com Serviço de Aplicações autenticação. Esta amostra utiliza um fluxo de autenticação gerido pelo servidor que exibe a interface de entrada do fornecedor na aplicação. Para obter mais informações, consulte a autenticação gerida pelo Server. Para proporcionar uma melhor experiência ao utilizador na sua aplicação de produção, deve considerar a utilização da autenticação gerida pelo Cliente.

Para autenticar com um projeto Xamarin Forms, defina uma interface IAuthenticate na Biblioteca de Classe Portátil para a aplicação. Em seguida, adicione um botão de início de súbs à interface do utilizador definida na Biblioteca classe portátil, que clica para iniciar a autenticação. Os dados são carregados a partir do backend da aplicação móvel após a autenticação bem sucedida.

Implemente a interface IAuthenticate para cada plataforma suportada pela sua aplicação.

  1. No Visual Studio ou Xamarin Studio, abra a App.cs do projeto com Portable no nome, que é projeto Portable Class Library, em seguida, adicione a seguinte using declaração:

     ```csharp
     using System.Threading.Tasks;
     ```
    
  2. Na app.cs, adicione a seguinte IAuthenticate definição de interface imediatamente antes da definição de App classe.

     ```csharp
     public interface IAuthenticate
     {
         Task<bool> Authenticate();
     }
     ```
    
  3. Para inicializar a interface com uma implementação específica da plataforma, adicione os seguintes membros estáticos à classe App .

     ```csharp
     public static IAuthenticate Authenticator { get; private set; }
    
     public static void Init(IAuthenticate authenticator)
     {
         Authenticator = authenticator;
     }
     ```
    
  4. Abra todoList.xaml do projeto Portátil Class Library, adicione o seguinte elemento botão no elemento layout do buttonsPanel , após o botão existente:

     ```xml
       <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
         Clicked="loginButton_Clicked"/>
     ```
    

    Este botão ativa a autenticação gerida pelo servidor com o backend da aplicação móvel.

  5. Open TodoList.xaml.cs do projeto Portable Class Library e, em seguida, adicione o seguinte campo à TodoList classe:

     ```csharp
     // Track whether the user has authenticated.
     bool authenticated = false;
     ```
    
  6. Substitua o método OnAppearing pelo seguinte código:

     ```csharp
     protected override async void OnAppearing()
     {
         base.OnAppearing();
    
         // Refresh items only when authenticated.
         if (authenticated == true)
         {
             // Set syncItems to true in order to synchronize the data
             // on startup when running in offline mode.
             await RefreshItems(true, syncItems: false);
    
             // Hide the Sign-in button.
             this.loginButton.IsVisible = false;
         }
     }
     ```
    

    Este código garante que os dados só são atualizados a partir do serviço depois de ter sido autenticado.

  7. Adicione o seguinte manipulador para o evento Clicked à classe TodaList :

     ```csharp
     async void loginButton_Clicked(object sender, EventArgs e)
     {
         if (App.Authenticator != null)
             authenticated = await App.Authenticator.Authenticate();
    
         // Set syncItems to true to synchronize the data on startup when offline is enabled.
         if (authenticated == true)
             await RefreshItems(true, syncItems: false);
     }
     ```
    
  8. Guarde as suas alterações e reconstrua o projeto da Biblioteca de Classes Portáteis, não verificando erros.

Adicionar autenticação à aplicação Android

Esta secção mostra como implementar a interface IAuthenticate no projeto de aplicações Android. Ignore esta secção se não estiver a suportar dispositivos Android.

  1. Em Visual Studio ou Xamarin Studio, clique com o botão direito no projeto dróide e, em seguida, set como StartUp Project.

  2. Pressione F5 para iniciar o projeto no depurar e, em seguida, 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. O código 401 é produzido porque o acesso no backend é restrito apenas aos utilizadores autorizados.

  3. Open MainActivity.cs no projeto Android e adicione as seguintes using declarações:

     ```csharp
     using Microsoft.WindowsAzure.MobileServices;
     using System.Threading.Tasks;
     ```
    
  4. Atualizar a classe MainActivity para implementar a interface IAuthenticate , da seguinte forma:

     ```csharp
     public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
     ```
    
  5. Atualize a classe MainActivity adicionando um campo MobileServiceUser e um método Authenticate , que é exigido pela interface IAuthenticate , da seguinte forma:

     ```csharp
     // Define an authenticated user.
     private MobileServiceUser user;
    
     public async Task<bool> Authenticate()
     {
         var success = false;
         var message = string.Empty;
         try
         {
             // Sign in with Facebook login using a server-managed flow.
             user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this, 
                 MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 message = string.Format("you are now signed-in as {0}.",
                     user.UserId);
                 success = true;
             }
         }
         catch (Exception ex)
         {
             message = ex.Message;
         }
    
         // Display the success or failure message.
         AlertDialog.Builder builder = new AlertDialog.Builder(this);
         builder.SetMessage(message);
         builder.SetTitle("Sign-in result");
         builder.Create().Show();
    
         return success;
     }
    
     public override void OnResume()
     {
         base.OnResume();
         Xamarin.Essentials.Platform.OnResume();
     }
     ```
    

    Se estiver a utilizar um fornecedor de identidade diferente do Facebook, escolha um valor diferente para MobileServiceAuthenticationProvider.

  6. Atualize o ficheiro AndroidManifest.xml adicionando o seguinte XML dentro do <application> elemento:

    <activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
      </intent-filter>
    </activity>
    

    Substitua-o pelo {url_scheme_of_your_app} seu esquema de URL.

  7. Adicione o seguinte código ao método OnCreate da classe MainActivity antes da chamada para LoadApplication():

     ```csharp
     // Initialize the authenticator before loading the app.
     App.Init((IAuthenticate)this);
     ```
    

    Este código garante que o autenticador é inicializado antes da carga da aplicação.

  8. Reconstruir a app, executá-la e, em seguida, iniciar sedutação com o fornecedor de autenticação que escolheu e verificar se consegue aceder aos dados como um utilizador autenticado.

Resolução de problemas

A aplicação despenhou-se com Java.Lang.NoSuchMethodError: No static method startActivity

Em alguns casos, os conflitos nos pacotes de suporte apresentados como apenas um aviso no estúdio Visual, mas a aplicação falha com esta exceção em tempo de execução. Neste caso, tem de se certificar de que todos os pacotes de suporte referenciados no seu projeto têm a mesma versão. O pacote NuGet de Aplicações Móveis do Azure tem dependência Xamarin.Android.Support.CustomTabs para a plataforma Android. Portanto, se o seu projeto utilizar os pacotes de suporte mais recentes, precisará de instalar diretamente este pacote com a versão necessária para evitar conflitos.

Adicionar autenticação à aplicação iOS

Esta secção mostra como implementar a interface IAuthenticate no projeto da aplicação iOS. Ignore esta secção se não estiver a suportar dispositivos iOS.

  1. Em Visual Studio ou Xamarin Studio, clique com o botão direito no projeto iOS e, em seguida, set como StartUp Project.

  2. Pressione F5 para iniciar o projeto no depurar e, em seguida, 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. A resposta 401 é produzida porque o acesso no backend é restrito apenas aos utilizadores autorizados.

  3. Open AppDeegate.cs no projeto iOS e adicione as seguintes using declarações:

     ```csharp
     using Microsoft.WindowsAzure.MobileServices;
     using System.Threading.Tasks;
     ```
    
  4. Atualize a classe AppDeegate para implementar a interface IAuthenticate , da seguinte forma:

     ```csharp
     public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
     ```
    
  5. Atualize a classe AppDeegate adicionando um campo MobileServiceUser e um método Authenticate , que é exigido pela interface IAuthenticate , da seguinte forma:

     ```csharp
     // Define an authenticated user.
     private MobileServiceUser user;
    
     public async Task<bool> Authenticate()
     {
         var success = false;
         var message = string.Empty;
         try
         {
             // Sign in with Facebook login using a server-managed flow.
             if (user == null)
             {
                 user = await TodoItemManager.DefaultManager.CurrentClient
                     .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                     MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
                 if (user != null)
                 {
                     message = string.Format("You are now signed-in as {0}.", user.UserId);
                     success = true;
                 }
             }
         }
         catch (Exception ex)
         {
            message = ex.Message;
         }
    
         // Display the success or failure message.
         UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
         avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
         UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);
    
         return success;
     }
     ```
    

    Se estiver a utilizar um fornecedor de identidade diferente do Facebook, escolha um valor diferente para [MobileServiceAuthenticationProvider].

  6. Atualize a classe AppDeegate adicionando a sobrecarga do método OpenUrl , da seguinte forma:

     ```csharp
     public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
     {
         if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
             return true;
         return base.OpenUrl(app, url, options);
     }
     ```
    
  7. Adicione a seguinte linha de código ao método de Acabamentos de Acesso antes da chamada para LoadApplication():

     ```csharp
     App.Init(this);
     ```
    

    Este código garante que o autenticador é inicializado antes de a aplicação ser carregada.

  8. Abra info.plist e adicione um URL Type. Desaprova o Identificador como um nome à sua escolha, os esquemas url para o esquema URL da sua aplicação, e o Papel a Nenhum.

  9. Reconstruir a app, executá-la e, em seguida, iniciar sedutação com o fornecedor de autenticação que escolheu e verificar se consegue aceder aos dados como um utilizador autenticado.

Adicionar autenticação a projetos de aplicações Windows 10 (incluindo Telefone)

Esta secção mostra como implementar a interface IAuthenticate nos projetos de aplicações Windows 10. Os mesmos passos aplicam-se a projetos Plataforma Universal do Windows (UWP), mas utilizando o projeto UWP (com alterações notadas). Salte esta secção se não estiver a suportar Windows dispositivos.

  1. Em Visual Studio, clique com o botão direito no projeto UWP e, em seguida, set como StartUp Project.

  2. Pressione F5 para iniciar o projeto no depurar e, em seguida, 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. A resposta 401 acontece porque o acesso no backend é restrito apenas aos utilizadores autorizados.

  3. Abra o MainPage.xaml.cs para o projeto de aplicação Windows e adicione as seguintes using declarações:

     ```csharp
     using Microsoft.WindowsAzure.MobileServices;
     using System.Threading.Tasks;
     using Windows.UI.Popups;
     using <your_Portable_Class_Library_namespace>;
     ```
    

    Substitua-o <your_Portable_Class_Library_namespace> pelo espaço de nomes da sua biblioteca de classes portáteis.

  4. Atualize a classe MainPage para implementar a interface IAuthenticate , da seguinte forma:

     public sealed partial class MainPage : IAuthenticate
    
  5. Atualize a classe MainPage adicionando um campo MobileServiceUser e um método Authenticate , que é exigido pela interface IAuthenticate , da seguinte forma:

     ```csharp
     // Define an authenticated user.
     private MobileServiceUser user;
    
     public async Task<bool> Authenticate()
     {
         string message = string.Empty;
         var success = false;
    
         try
         {
             // Sign in with Facebook login using a server-managed flow.
             if (user == null)
             {
                 user = await TodoItemManager.DefaultManager.CurrentClient
                     .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
                 if (user != null)
                 {
                     success = true;
                     message = string.Format("You are now signed-in as {0}.", user.UserId);
                 }
             }
    
         }
         catch (Exception ex)
         {
             message = string.Format("Authentication Failed: {0}", ex.Message);
         }
    
         // Display the success or failure message.
         await new MessageDialog(message, "Sign-in result").ShowAsync();
    
         return success;
     }
     ```
    

    Se estiver a utilizar um fornecedor de identidade diferente do Facebook, escolha um valor diferente para MobileServiceAuthenticationProvider.

  6. Adicione a seguinte linha de código no construtor para a classe MainPage antes da chamada para LoadApplication():

     ```csharp
     // Initialize the authenticator before loading the app.
     <your_Portable_Class_Library_namespace>.App.Init(this);
     ```
    

    Substitua-o <your_Portable_Class_Library_namespace> pelo espaço de nomes da sua biblioteca de classes portáteis.

  7. Se estiver a utilizar o UWP, adicione o seguinte sobreposição do método OnActivated à classe App :

     ```csharp
     protected override void OnActivated(IActivatedEventArgs args)
     {
        base.OnActivated(args);
    
         if (args.Kind == ActivationKind.Protocol)
         {
             ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
             MobileServiceClientExtensions.ResumeWithURL(TodoItemManager.DefaultManager.CurrentClient,protocolArgs.Uri);
         }
     }
     ```
    
  8. Open Package.appxmanifest e adicione uma declaração de protocolo . Desaprova o nome Do Visor num nome à sua escolha e o Nome para o esquema DE URL para a sua aplicação.

  9. Reconstruir a app, executá-la e, em seguida, iniciar sedutação com o fornecedor de autenticação que escolheu e verificar se consegue aceder aos dados como um utilizador autenticado.

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. O sync 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 existe ligação à rede.