Adición de la autenticación a la aplicación Xamarin.AndroidAdd authentication to your Xamarin.Android app

Nota

Visual Studio App Center admite servicios integrados de un extremo a otro fundamentales para el desarrollo de aplicaciones móviles.Visual Studio App Center supports end to end and integrated services central to mobile app development. Los desarrolladores pueden usar los servicios de compilación, prueba y distribución para configurar la canalización de integración y entrega continuas.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Una vez que se ha implementado la aplicación, los desarrolladores pueden supervisar el estado y el uso de su aplicación con los servicios de análisis y diagnóstico, e interactuar con los usuarios que utilizan el servicio de Push (inserción).Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Además, los desarrolladores pueden aprovechar Auth para autenticar a los usuarios y el servicio de datos para almacenar y sincronizar los datos de la aplicación en la nube.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

Si está pensando en integrar servicios en la nube en su aplicación para dispositivos móviles, regístrese en App Center hoy mismo.If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

Información generalOverview

En este tema se muestra cómo autenticar usuarios de una aplicación móvil desde la aplicación cliente.This topic shows you how to authenticate users of a Mobile App from your client application. En este tutorial podrá agregar la autenticación al proyecto de inicio rápido mediante un proveedor de identidades compatible con Azure Mobile Apps.In this tutorial, you add authentication to the quickstart project using an identity provider that is supported by Azure Mobile Apps. Una vez que la aplicación móvil finalice la autenticación y autorización correctamente, se mostrará el valor del identificador de usuario.After being successfully authenticated and authorized in the Mobile App, the user ID value is displayed.

Este tutorial se basa en el inicio rápido de aplicaciones móviles.This tutorial is based on the Mobile App quickstart. Primero debe completar el tutorial Creación de una aplicación Xamarin.Android.You must also first complete the tutorial Create a Xamarin.Android app. Si no usa el proyecto de servidor de inicio rápido descargado, debe agregar el paquete de extensión de autenticación al proyecto.If you do not use the downloaded quick start server project, you must add the authentication extension package to your project. 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.For more information about server extension packages, see Work with the .NET backend server SDK for Azure Mobile Apps.

Registro de la aplicación para la autenticación y configuración de Servicios de aplicacionesRegister your app for authentication and configure 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.First, you need to register your app at an identity provider's site, and then you will set the provider-generated credentials in the Mobile Apps back end.

  1. Configure el proveedor de identidades preferido siguiendo las instrucciones específicas del proveedor:Configure your preferred identity provider by following the provider-specific instructions:

  2. Repita los pasos anteriores para cada proveedor que desee admitir en su aplicación.Repeat the previous steps for each provider you want to support in your app.

Adición de la aplicación a las direcciones URL de redirección externa permitidasAdd your app to the Allowed External Redirect URLs

La autenticación segura requiere que se defina un nuevo esquema de dirección URL para la aplicación.Secure authentication requires that you define a new URL scheme for your app. Esto permite que el sistema de autenticación se redirija a la aplicación una vez completado el proceso de autenticación.This allows the authentication system to redirect back to your app once the authentication process is complete. En este tutorial, se usará el esquema de dirección URL appname.In this tutorial, we use the URL scheme appname throughout. Sin embargo, puede utilizar cualquier otro esquema de dirección URL que elija.However, you can use any URL scheme you choose. Debe ser único para la aplicación móvil.It should be unique to your mobile application. Para habilitar la redirección en el lado de servidor:To enable the redirection on the server side:

  1. En [Azure Portal], seleccione App Service.In the [Azure portal], select your App Service.

  2. Haga clic en la opción de menú Autenticación/autorización.Click the Authentication / Authorization menu option.

  3. En URL de redirección externas permitidas, introduzca url_scheme_of_your_app://easyauth.callback.In the Allowed External Redirect URLs, enter 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.The url_scheme_of_your_app in this string is the URL Scheme for your mobile application. Debe seguir la especificación normal de las direcciones URL para un protocolo (usar únicamente letras y números, y comenzar por una letra).It should follow normal URL specification for a protocol (use letters and numbers only, and start with a letter). 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.You should make a note of the string that you choose as you will need to adjust your mobile application code with the URL Scheme in several places.

  4. Haga clic en OK.Click OK.

  5. Haga clic en Save(Guardar).Click Save.

Restricción de los permisos para los usuarios autenticadosRestrict permissions to authenticated users

De forma predeterminada, se pueden invocar las API en un back-end de Mobile Apps de forma anónima.By default, APIs in a Mobile Apps back end can be invoked anonymously. A continuación, deberá restringir el acceso a solo los clientes autenticados.Next, you need to restrict access to only authenticated clients.

  • Back-end de Node.js (a través de Azure Portal) :Node.js back end (via the Azure portal) :

    En la configuración de Mobile Apps, haga clic en Tablas fáciles y seleccione la tabla.In your Mobile Apps settings, click Easy Tables and select your table. Haga clic en Cambiar permisos, seleccione Solo acceso autenticado para todos los permisos y luego haga clic en Guardar.Click Change permissions, select Authenticated access only for all permissions, and then click Save.

  • Back-end de .NET (C#) :.NET back end (C#):

    En el proyecto de servidor, vaya a Controladores > TodoItemController.cs.In the server project, navigate to Controllers > TodoItemController.cs. Agregue el atributo [Authorize] a la clase TodoItemController , como sigue.Add the [Authorize] attribute to the TodoItemController class, as follows. 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.To restrict access only to specific methods, you can also apply this attribute just to those methods instead of the class. Vuelva a publicar el proyecto de servidor.Republish the server project.

      [Authorize]
      public class TodoItemController : TableController<TodoItem>
    
  • Back-end de Node.js (a través del código de Node.js) :Node.js backend (via Node.js code) :

    Para pedir autenticación para acceder a las tablas, agregue la siguiente línea al script del servidor de Node.js:To require authentication for table access, add the following line to the Node.js server script:

      table.access = 'authenticated';
    

    Para más información, vea Procedimientos para requerir autenticación para acceder a las tablas.For more details, see How to: Require authentication for access to tables. Para obtener información sobre cómo descargar el proyecto de código de inicio rápido desde el sitio, vea Procedimientos para descargar el proyecto de código de inicio rápido de un back-end de Node.js mediante Git.To learn how to download the quickstart code project from your site, see How to: Download the Node.js backend quickstart code project using Git.

En Visual Studio o Xamarin Studio, ejecute el proyecto de cliente en un dispositivo o emulador.In Visual Studio or Xamarin Studio, run the client project on a device or emulator. Compruebe que se produce una excepción no controlada con el código de estado 401 (No autorizado) después de iniciarse la aplicación.Verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts. Esto sucede porque la aplicación intenta obtener acceso al back-end de la aplicación móvil como usuario sin autenticar.This happens because the app attempts to access your Mobile App backend as an unauthenticated user. La tabla TodoItem ahora requiere autenticación.The TodoItem table now requires authentication.

Luego, actualizará la aplicación cliente para solicitar recursos del back-end de la aplicación móvil con un usuario autenticado.Next, you will update the client app to request resources from the Mobile App backend with an authenticated user.

Incorporación de autenticación a la aplicaciónAdd authentication to the app

La aplicación se actualiza para requerir a los usuarios que pulsen el botón Iniciar sesión y que se autentiquen para que se muestren los datos.The app is updated to require users to tap the Sign in button and authenticate before data is displayed.

  1. Agregue el siguiente código a la clase TodoActivity :Add the following code to the TodoActivity class:

     // Define an authenticated user.
     private MobileServiceUser user;
     private async Task<bool> Authenticate()
     {
             var success = false;
             try
             {
                 // Sign in with Facebook login using a server-managed flow.
                 user = await client.LoginAsync(this,
                     MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
                 CreateAndShowDialog(string.Format("you are now logged in - {0}",
                     user.UserId), "Logged in!");
    
                 success = true;
             }
             catch (Exception ex)
             {
                 CreateAndShowDialog(ex, "Authentication failed");
             }
             return success;
     }
    
     [Java.Interop.Export()]
     public async void LoginUser(View view)
     {
         // Load data only after authentication succeeds.
         if (await Authenticate())
         {
             //Hide the button after authentication succeeds.
             FindViewById<Button>(Resource.Id.buttonLoginUser).Visibility = ViewStates.Gone;
    
             // Load the data.
             OnRefreshItemsSelected();
         }
     }
    

    Esto crea un método nuevo para autenticar un usuario y un controlador de método para un nuevo botón Iniciar sesión .This creates a new method to authenticate a user and a method handler for a new Sign in button. El usuario del código de ejemplo anterior se autentica mediante el inicio de sesión en Facebook.The user in the example code above is authenticated by using a Facebook login. Se usa un cuadro de diálogo para mostrar el identificador de usuario una vez autenticado.A dialog is used to display the user ID once authenticated.

    Nota

    Si usa un proveedor de identidades que no sea una cuenta de Facebook, cambie el valor que usó con LoginAsync por uno de los siguientes: MicrosoftAccount, Twitter, Google o WindowsAzureActiveDirectory.If you are using an identity provider other than Facebook, change the value passed to LoginAsync above to one of the following: MicrosoftAccount, Twitter, Google, or WindowsAzureActiveDirectory.

  2. En el método OnCreate , elimine o convierta en comentario la siguiente línea de código:In the OnCreate method, delete or comment-out the following line of code:

     OnRefreshItemsSelected ();
    
  3. En el archivo Activity_To_Do.axml, agregue la siguiente definición del botón LoginUser antes del botón AddItem existente:In the Activity_To_Do.axml file, add the following LoginUser button definition before the existing AddItem button:

       <Button
         android:id="@+id/buttonLoginUser"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:onClick="LoginUser"
         android:text="@string/login_button_text" />
    
  4. Agregue el siguiente elemento al archivo de recursos Strings.xml:Add the following element to the Strings.xml resources file:

     <string name="login_button_text">Sign in</string>
    
  5. Abra el archivo AndroidManifest.xml, agregue el código siguiente dentro del elemento XML <application>:Open the AndroidManifest.xml file, add the following code inside <application> XML element:

     <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>
    
  6. En Visual Studio o Xamarin Studio, ejecute el proyecto de cliente en un dispositivo o emulador, e inicie sesión con el proveedor de identidades elegido.In Visual Studio or Xamarin Studio, run the client project on a device or emulator and sign in with your chosen identity provider. Una vez iniciada la sesión correctamente, la aplicación mostrará el identificador de inicio de sesión y la lista de tareas pendientes, y podrá realizar actualizaciones en los datos.When you are successfully logged-in, the app will display your login ID and the list of todo items, and you can make updates to the data.

solución de problemasTroubleshooting

La aplicación se ha bloqueado con Java.Lang.NoSuchMethodError: No static method startActivityThe application crashed with 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.In some cases, conflicts in the support packages displayed as just a warning in the Visual studio, but the application crashes with this exception at runtime. 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.In this case you need to make sure that all the support packages referenced in your project have the same version. 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.The Azure Mobile Apps NuGet package has Xamarin.Android.Support.CustomTabs dependency for Android platform, so if your project uses newer support packages you need to install this package with required version directly to avoid conflicts.