Agregue autenticación a su aplicación de Xamarin Forms

Artículo
06/25/2019

Información general

En este tema se muestra cómo autenticar usuarios de una Aplicación móvil de App Service desde la aplicación cliente. En este tutorial se agrega autenticación al proyecto de inicio rápido de Xamarin Forms mediante un proveedor de identidades compatible con App Service. Una vez que la aplicación móvil haya realizado la autenticación y la autorización correctamente, se mostrará el valor de identificador de usuario y podrá acceder a datos de tabla restringida.

Prerrequisitos

Para obtener el mejor resultado con este tutorial, se recomienda completar primero el tutorial Creación de una aplicación Xamarin Forms. Después de completar este tutorial, tendrá un proyecto de Xamarin Forms que es una aplicación TodoList multiplataforma.

Si no usa el proyecto de servidor de inicio rápido descargado, debe agregar el paquete de extensión de autenticación al proyecto. Para obtener más información acerca de los paquetes de extensión de servidor, consulte Trabajar con el SDK del servidor back-end de .NET para Aplicaciones móviles de Azure.

Registro de la aplicación para la autenticación y configuración de App Services

En primer lugar, debe registrar la aplicación en el sitio del proveedor de identidades y, a continuación, establecerá las credenciales generadas por el proveedor en el back-end de Mobile Apps.

Configure el proveedor de identidades preferido siguiendo las instrucciones específicas del proveedor:
Repita los pasos anteriores para cada proveedor que desee admitir en su aplicación.

Adición de la aplicación a las direcciones URL de redirección externa permitidas

La autenticación segura requiere que se defina un nuevo esquema de dirección URL para la aplicación. Esto permite que el sistema de autenticación se redirija a la aplicación una vez completado el proceso de autenticación. En este tutorial, se usará el esquema de dirección URL appname. Sin embargo, puede utilizar cualquier otro esquema de dirección URL que elija. Debe ser único para la aplicación móvil. Para habilitar la redirección en el lado de servidor:

En Azure Portal, seleccione el servicio App Service.
Haga clic en la opción de menú Autenticación/autorización.
En URL de redirección externas permitidas, introduzca url_scheme_of_your_app://easyauth.callback. El valor de esquema_de_dirección_URL_de_la_aplicación de esta cadena es el esquema de dirección URL para la aplicación móvil. Debe seguir la especificación normal de las direcciones URL para un protocolo (usar únicamente letras y números, y comenzar por una letra). Debe tomar nota de la cadena que elija ya que necesitará ajustar el código de la aplicación móvil con el esquema de direcciones URL en varios sitios.
Haga clic en OK.
Haga clic en Save(Guardar).

Restricción de los permisos para los usuarios autenticados

De forma predeterminada, se pueden invocar las API en un back-end de Mobile Apps de forma anónima. A continuación, deberá restringir el acceso a solo los clientes autenticados.

Back-end de Node.js (a través de Azure Portal):

En la configuración Mobile Apps, haga clic en Tablas fáciles y seleccione la tabla. Haga clic en Cambiar permisos, seleccione Solo acceso autenticado para todos los permisos y luego haga clic en Guardar.
Back-end de .NET (C#):

En el proyecto de servidor, vaya aControllersTodoItemController.cs>. Agregue el atributo [Authorize] a la clase TodoItemController , como sigue. Para restringir el acceso solo a determinados métodos, también puede aplicar este atributo solo a esos métodos en lugar de la clase. Vuelva a publicar el proyecto de servidor.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Back-end de Node.js (a través del código de Node.js) :

Para pedir autenticación para acceder a las tablas, agregue la siguiente línea al script del servidor de Node.js:
```
  table.access = 'authenticated';
```
Para más información, consulte Autenticación necesaria para el acceso a las tablas. Para obtener información sobre cómo descargar el proyecto de código de inicio rápido desde su sitio, consulte Cómo: descargar el proyecto de código de inicio rápido de back-end de Node.js con Git.

Agregar autenticación a la biblioteca de clases portables

Mobile Apps usa el método de extensión LoginAsync en MobileServiceClient para iniciar una sesión de usuario con autenticación de App Service. Este ejemplo usa un flujo de autenticación administrado por servidor que muestra la interfaz de inicio de sesión del proveedor en la aplicación. Para más información, consulte Autenticación administrada por el servidor. Para proporcionar una mejor experiencia del usuario en la aplicación de producción, se recomienda usar la autenticación administrada por el cliente.

Para realizar la autenticación con un proyecto de Xamarin Forms, defina en la biblioteca de clases portable una interfaz IAuthenticate para la aplicación. Luego, agregue un botón Inicio de sesión a la interfaz de usuario definida en la biblioteca de clases portable, en el que se haga clic para iniciar la autenticación. Tras una autenticación correcta, los datos se cargan desde el back-end de la aplicación móvil.

Implemente la interfaz IAuthenticate en cada plataforma que admitida la aplicación.

En Visual Studio o Xamarin Studio, abra App.cs desde el proyecto con Portable en el nombre, que es el proyecto Biblioteca de clases portable y agregue la siguiente using instrucción:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
En el archivo App.cs, agregue la siguiente definición de interfaz IAuthenticate inmediatamente antes de la definición de la clase App.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Para inicializar la interfaz con una implementación específica de la plataforma, agregue los siguientes miembros estáticos a la clase App.

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

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

Abra TodoList.xaml desde el proyecto de biblioteca de clases portable y agregue el siguiente elemento Button en el elemento de diseño buttonsPanel , después del botón existente:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Este botón desencadena una autenticación administrada por el servidor con el back-end de aplicación móvil.
Abra TodoList.xaml.cs desde el proyecto de biblioteca de clases portable y agregue el siguiente campo a la clase TodoList :
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Reemplace el método OnAppearing por el código siguiente:

 ```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 garantiza que los datos solo se actualizan desde el servicio una vez que se haya realizado la autenticación.

Agregue el siguiente controlador para el evento Clicked a la clase 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);
 }
 ```

Guarde los cambios, vuelva a compilar el proyecto de biblioteca de clases portable y compruebe que no haya errores.

Agregar autenticación a la aplicación de Android

En esta sección se muestra cómo implementar la interfaz IAuthenticate en el proyecto de aplicación de Android. Omita esta sección si no ofrece compatibilidad con dispositivos Android.

En Visual Studio o Xamarin Studio, haga clic con el botón derecho en el proyecto droid y luego en Establecer como proyecto de inicio.
Presione F5 para iniciar el proyecto en el depurador y después compruebe que, después de iniciarse la aplicación, se genera una excepción no controlada con el código de estado 401 (No autorizado). El código 401 aparece porque el acceso en el back-end está restringido únicamente a usuarios autorizados.

Abra MainActivity.cs en el proyecto de Android y agregue las siguientes instrucciones using:

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

Actualice la clase MainActivity para implementar la interfaz IAuthenticate, como sigue:

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

Actualice la clase MainActivity, para lo que debe agregar un campo MobileServiceUser y un método Authenticate, lo que necesita la interfaz IAuthenticate, como se indica a continuación:

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

Si usa un proveedor de identidades que no sea Facebook, elija un valor diferente para MobileServiceAuthenticationProvider.

Para actualizar el archivo AndroidManifest.xml, agregue el siguiente código XML dentro del elemento <application>:

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

Reemplace {url_scheme_of_your_app} por el esquema de dirección URL.

Agregue el siguiente código al método onCreate de la clase MainActivity antes de la llamada a LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Este código garantiza que el autenticador se inicializa antes de que se cargue la aplicación.
Vuelva a compilar la aplicación, ejecútela, inicie sesión con el proveedor de autenticación que elija y compruebe que pueda acceder a los datos como usuario autenticado.

Solución de problemas

La aplicación se ha bloqueado con Java.Lang.NoSuchMethodError: No static method startActivity

En algunos casos, los conflictos en los paquetes de soporte aparecen como simples advertencias en Visual Studio, pero la aplicación se bloquea con esta excepción en tiempo de ejecución. En este caso tiene que asegurarse de que todos los paquetes de soporte a los que se hace referencia en el proyecto tengan la misma versión. El paquete NuGet de Azure Mobile Apps tiene la dependencia Xamarin.Android.Support.CustomTabs para la plataforma Android, por lo que si el proyecto usa paquetes de soporte más recientes, tiene que instalar este paquete con la versión necesaria directamente para evitar conflictos.

Agregar autenticación a la aplicación de iOS

En esta sección se muestra cómo implementar la interfaz IAuthenticate en el proyecto de aplicación de iOS. Omita esta sección si no ofrece compatibilidad con dispositivos iOS.

En Visual Studio o Xamarin Studio, haga clic con el botón derecho en el proyecto iOS y luego en Establecer como proyecto de inicio.
Presione F5 para iniciar el proyecto en el depurador y después compruebe que, después de iniciarse la aplicación, se genera una excepción no controlada con el código de estado 401 (No autorizado). La respuesta 401 aparece porque el acceso en el back-end está restringido únicamente a usuarios autorizados.
Abra el archivo AppDelegate.cs en el proyecto de iOS y agregue las siguientes instrucciones using:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```
```

Actualice la clase AppDelegate para implementar la interfaz IAuthenticate como se indica a continuación:

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

Actualice la clase AppDelegate, para lo que debe agregar un campo MobileServiceUser y un método Authenticate, lo que necesita la interfaz IAuthenticate, como se indica a continuación:

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

Si usa un proveedor de identidades que no sea Facebook, elija otro valor para [MobileServiceAuthenticationProvider].

Para actualizar la clase AppDelegate, agregue la sobrecarga del método OpenUrl, como se indica a continuación:

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

Agregue la siguiente línea de código al método FinishedLaunching antes de la llamada a LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Este código garantiza que el autenticador se inicializa antes de que se cargue la aplicación.
Abra Info.plist y agregue un Tipo de dirección URL. Establezca Identificador en un nombre de su elección, Esquemas de dirección URL en el esquema de dirección URL de la aplicación y Rol en None.
Vuelva a compilar la aplicación, ejecútela, inicie sesión con el proveedor de autenticación que elija y compruebe que pueda acceder a los datos como usuario autenticado.

Adición de autenticación a proyectos de aplicaciones de Windows 10 (incluyendo Phone)

En esta sección se muestra cómo implementar la interfaz IAuthenticate en proyectos de aplicaciones de Windows 10. Los mismos pasos se aplican a los proyectos de plataforma universal de Windows (UWP), pero se usa el proyecto UWP (con cambios anotados). Omita esta sección si no ofrece compatibilidad con dispositivos Windows.

En Visual Studio, haga clic con el botón derecho en el proyecto UWP y, luego, en Establecer como proyecto de inicio.
Presione F5 para iniciar el proyecto en el depurador y después compruebe que, después de iniciarse la aplicación, se genera una excepción no controlada con el código de estado 401 (No autorizado). La respuesta 401 de produce porque el acceso en el back-end está restringido únicamente a usuarios autorizados.
Abra el archivo MainPage.xaml.cs en el proyecto de aplicación de Windows y agregue las siguientes instrucciones using :
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Reemplace <your_Portable_Class_Library_namespace> por el espacio de nombres de la biblioteca de clases portable.
Actualice la clase MainPage para implementar la interfaz IAuthenticate como se indica a continuación:
```
 public sealed partial class MainPage : IAuthenticate
```

Actualice la clase MainPage, para lo que debe agregar un campo MobileServiceUser y un método Authenticate, lo que necesita la interfaz IAuthenticate, como se indica a continuación:

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