Adicionar autenticação ao seu aplicativo Xamarin Forms

Artigo
06/25/2019

Visão geral

Este tópico mostra como autenticar usuários de um aplicativo móvel do Serviço de Aplicativo em seu aplicativo cliente. Neste tutorial, você adiciona a autenticação ao projeto de início rápido do Xamarin.Forms usando um provedor de identidade com suporte do Serviço de Aplicativo. Depois de ser autenticado e autorizado com êxito pelo Aplicativo Móvel, o valor da ID de usuário é exibido e você poderá acessar dados da tabela restrita.

Pré-requisitos

Para obter o melhor resultado com este tutorial, é recomendável concluir primeiro o tutorial Criar um aplicativo Xamarin.Forms. Depois de concluir este tutorial, você terá um projeto Xamarin.Forms que é um aplicativo de lista de tarefas para várias plataformas.

Se você não usar o projeto baixado de início rápido do servidor, deve adicionar o pacote de extensão de autenticação ao seu projeto. Para obter mais informações sobre pacotes de extensão do servidor, confira Trabalhar com o servidor .NET back-end do SDK para Aplicativos Móveis do Azure.

Registrar seu aplicativo para a autenticação e configurar os Serviços de Aplicativos

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.

Configure o provedor de identidade preferido, seguindo as instruções específicas do provedor:
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:

No Portal do Azure, selecione seu Serviço de Aplicativo.
Clique na opção de menu Autenticação/Autorização.
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.
Clique em OK.
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.

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

Os Aplicativos Móveis usam o método de extensão LoginAsync no MobileServiceClient para que um usuário entre com a autenticação do Serviço de Aplicativo. Este exemplo usa um fluxo de autenticação gerenciado por servidor que exibe a interface de entrada do provedor no aplicativo. Para saber mais, veja Autenticação gerenciada por servidor. Para proporcionar uma melhor experiência ao usuário em seu aplicativo de produção, você deve considerar o uso da Autenticação gerenciada pelo cliente.

Para se autenticar em um projeto Xamarin.Forms, defina uma interface IAuthenticate na Biblioteca de Classes Portátil para o aplicativo. Em seguida, adicione um botão Entrar à interface de usuário definida na Biblioteca de Classes Portátil, em que você possa clicar para iniciar a autenticação. Os dados são carregados do back-end do aplicativo móvel depois da autenticação bem-sucedida.

Implemente a interface IAuthenticate para cada plataforma compatível com seu aplicativo.

em Visual Studio ou Xamarin Studio, abra o App. cs do projeto com portátil no nome, que é um projeto de biblioteca de classes portátil e, em seguida, adicione a seguinte using instrução:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
Em App.cs, adicione a definição de interface IAuthenticate a seguir imediatamente antes da definição de classe App.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Para inicializar a interface com uma implementação específica de plataforma, adicione os membros estáticos a seguir à classe App.

 ```csharp
 public static IAuthenticate Authenticator { get; private set; }

 public static void Init(IAuthenticate authenticator)
 {
     Authenticator = authenticator;
 }
 ```

Abra TodoList.xaml do projeto da Biblioteca de Classes Portátil, adicione o elemento Button a seguir ao elemento de layout buttonsPanel após o botão existente:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Esse botão dispara a autenticação gerenciada por servidor com seu back-end de aplicativo móvel.
Abra TodoList.xaml.cs do projeto da Biblioteca de Classes Portátil e adicione o seguinte campo à classe TodoList :
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

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;
     }
 }
 ```

Esse código garante que os dados só serão atualizados do serviço depois que você tiver sido autenticado.

Adicione o seguinte manipulador para o evento Clicked à classe TodoList:

 ```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);
 }
 ```

Salve suas alterações e compile o projeto de Biblioteca de Classes Portátil verificando se não há erros.

Adicionar autenticação ao aplicativo Android

Esta seção mostra como implementar a interface IAuthenticate no projeto do aplicativo Android. Ignore esta seção se não estiver dando suporte a dispositivos Android.

No Visual Studio ou no Xamarin Studio, clique com botão direito do mouse no projeto droid e em Definir como Projeto de Inicialização.
Pressione F5 para iniciar o projeto no depurador e verifique se uma exceção sem tratamento com um código de status de 401 (Não autorizado) foi gerada depois que o aplicativo foi iniciado. O código 401 é gerado porque o acesso no back-end é restrito apenas aos usuários autorizados.

Abra MainActivity.cs no projeto Android e adicione estas instruções using :

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Atualize a classe MainActivity para implementar a interface IAuthenticate da seguinte maneira:

 ```csharp
 public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
 ```

Atualize a classe MainActivity adicionando um campo MobileServiceUser e um método Authenticate, que é necessário para a interface IAuthenticate, da seguinte maneira:

 ```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 você estiver usando um provedor de identidade diferente do Facebook, escolha um valor diferente para MobileServiceAuthenticationProvider.

Atualize o arquivo AndroidManifest.xml adicionando o seguinte XML dentro de <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 {url_scheme_of_your_app} pelo seu esquema de URL.

Adicione o seguinte código ao método onCreate da classe MainActivity antes de chamar LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Esse código garante que o autenticador seja inicializado antes que o aplicativo seja carregado.
Recompile o aplicativo, execute-o, entre com o provedor de autenticação escolhido e verifique se você consegue acessar os dados como um usuário autenticado.

Solução de problemas

O aplicativo falhou com Java.Lang.NoSuchMethodError: No static method startActivity

Em alguns casos, conflitos nos pacotes de suporte são exibidos como apenas um aviso no Visual Studio, o aplicativo falha com esta exceção em runtime. Neste caso, você precisa verificar se todos os pacotes de suporte referenciados em seu projeto têm a mesma versão. O pacote NuGet de Aplicativos Móveis do Azure depende de Xamarin.Android.Support.CustomTabs para a plataforma Android e, portanto, se o projeto usar pacotes de suporte mais recentes, será necessário instalar diretamente esse pacote com a versão necessária para evitar conflitos.

Adicionar autenticação ao aplicativo do iOS

Esta seção mostra como implementar a interface IAuthenticate no projeto do aplicativo iOS. Ignore esta seção se não estiver dando suporte a dispositivos iOS.

No Visual Studio ou no Xamarin Studio, clique com o botão direito do mouse no projeto iOS e em Definir como Projeto de Inicialização.
Pressione F5 para iniciar o projeto no depurador e verifique se uma exceção sem tratamento com um código de status de 401 (Não autorizado) foi gerada depois que o aplicativo foi iniciado. A resposta 401 é gerada porque o acesso no back-end é restrito apenas aos usuários autorizados.

Abra AppDelegate.cs no projeto do iOS e adicione as seguintes instruções using :

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Atualize a classe AppDelegate para implementar a interface IAuthenticate da seguinte maneira:

 ```csharp
 public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
 ```

Atualize a classe AppDelegate adicionando um campo MobileServiceUser e um método Authenticate, que é necessário para a interface IAuthenticate, da seguinte maneira:

 ```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 você estiver usando um provedor de identidade diferente do Facebook, escolha outro valor para [MobileServiceAuthenticationProvider].

Atualize a classe AppDelegate adicionando a sobrecarga do método OpenUrl, da seguinte maneira:

 ```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);
 }
 ```

Adicione a seguinte linha de código ao método FinishedLaunching antes de chamar LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Esse código garante que o autenticador seja inicializado antes que o aplicativo seja carregado.
Abra Info.plist e adicione um Tipo de URL. Defina o Identificador como um nome de sua escolha, os esquemas de URL para o esquema de URL para o seu aplicativo e a Função como Nenhuma.
Recompile o aplicativo, execute-o, entre com o provedor de autenticação escolhido e verifique se você consegue acessar os dados como um usuário autenticado.

Adicionar autenticação a projetos de aplicativo do Windows 10 (incluindo o Phone)

Esta seção mostra como implementar a interface IAuthenticate nos projetos de aplicativo do Windows 10. As mesmas etapas se aplicam aos projetos UWP (Plataforma Universal do Windows), mas usando o projeto UWP (com alterações indicadas). Ignore esta seção se não estiver dando suporte a dispositivos Windows.

Em Visual Studio, clique com o botão direito do mouse no projeto UWP e depois em Definir como Projeto de Inicialização.
Pressione F5 para iniciar o projeto no depurador e verifique se uma exceção sem tratamento com um código de status de 401 (Não autorizado) foi gerada depois que o aplicativo foi iniciado. Essa resposta 401 é gerada porque o acesso no back-end é restrito apenas aos usuários autorizados.
Abra MainPage.xaml.cs para o projeto do aplicativo do Windows e adicione as seguintes instruções using :
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Substitua <your_Portable_Class_Library_namespace> pelo namespace para sua biblioteca de classes portátil.
Atualize a classe MainPage para implementar a interface IAuthenticate da seguinte maneira:
```
 public sealed partial class MainPage : IAuthenticate
```

Atualize a classe MainPage adicionando um campo MobileServiceUser e um método Authenticate, que é necessário para a interface IAuthenticate, da seguinte maneira:

 ```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;
 }
 ```