Adición de la autenticación a la aplicación Xamarin.iOSAdd authentication to your Xamarin.iOS 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 de App Service desde la aplicación cliente.This topic shows you how to authenticate users of an App Service Mobile App from your client application. En este tutorial podrá agregar la autenticación al proyecto de inicio rápido Xamarin.iOS mediante un proveedor de identidades compatible con App Service.In this tutorial, you add authentication to the Xamarin.iOS quickstart project using an identity provider that is supported by App Service. Una vez que la aplicación móvil haya realizado la autenticación y autorización correctamente, se mostrará el valor de identificador de usuario y podrá tener acceso a datos de tabla restringida.After being successfully authenticated and authorized by your Mobile App, the user ID value is displayed and you will be able to access restricted table data.

Primero debe completar el tutorial Creación de una aplicación Xamarin.iOS.You must first complete the tutorial Create a Xamarin.iOS 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 Azure Mobile Apps.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 App ServicesRegister 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 el servicio 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. El error se registra en la consola del depurador.The failure is logged to the console of the debugger. De esta forma, en Visual Studio, debería ver el error en la ventana de salida.So in Visual Studio, you should see the failure in the output window.

    Este error no autorizado se produce porque la aplicación intenta acceder al back-end de la aplicación móvil como usuario no autenticado.This unauthorized failure 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

En esta sección, modificará la aplicación para mostrar una pantalla de inicio de sesión antes de mostrar los datos.In this section, you will modify the app to display a login screen before displaying data. Cuando se inicie la aplicación, no se conectará a App Service y no mostrará datos.When the app starts, it will not connect to your App Service and will not display any data. Después de que el usuario intente actualizar una vez, aparecerá la pantalla de inicio y, una vez que haya iniciado sesión, se mostrará la lista de tareas pendientes.After the first time that the user performs the refresh gesture, the login screen will appear; after successful login the list of todo items will be displayed.

  1. En el proyecto de cliente, abra el archivo QSTodoService.cs y agregue la siguiente instrucción using y MobileServiceUser, con descriptor de acceso a la clase QSTodoService:In the client project, open the file QSTodoService.cs and add the following using statement and MobileServiceUser with accessor to the QSTodoService class:

    using UIKit;
    
    // Logged in user
    private MobileServiceUser user;
    public MobileServiceUser User { get { return user; } }
    
  2. Agregue un nuevo método denominado Authenticate a QSTodoService con la siguiente definición:Add new method named Authenticate to QSTodoService with the following definition:

    public async Task Authenticate(UIViewController view)
    {
        try
        {
            AppDelegate.ResumeWithURL = url => url.Scheme == "{url_scheme_of_your_app}" && client.ResumeWithURL(url);
            user = await client.LoginAsync(view, MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine (@"ERROR - AUTHENTICATION FAILED {0}", ex.Message);
        }
    }
    

    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 a Facebook, change the value passed to LoginAsync above to one of the following: MicrosoftAccount, Twitter, Google, or WindowsAzureActiveDirectory.

  3. Abra QSTodoListViewController.cs.Open QSTodoListViewController.cs. Modifique la definición del método de ViewDidLoad, para lo que debe quitar la llamada a RefreshAsync() cerca del final:Modify the method definition of ViewDidLoad removing the call to RefreshAsync() near the end:

    public override async void ViewDidLoad ()
    {
        base.ViewDidLoad ();
    
        todoService = QSTodoService.DefaultService;
        await todoService.InitializeStoreAsync();
    
        RefreshControl.ValueChanged += async (sender, e) => {
            await RefreshAsync();
        }
    
        // Comment out the call to RefreshAsync
        // await RefreshAsync();
    }
    
  4. Modifique el método RefreshAsync para autenticar si el valor de la propiedad User es null.Modify the method RefreshAsync to authenticate if the User property is null. Agregue el siguiente código al principio de la definición del método:Add the following code at the top of the method definition:

    // start of RefreshAsync method
    if (todoService.User == null) {
        await QSTodoService.DefaultService.Authenticate(this);
        if (todoService.User == null) {
            Console.WriteLine("couldn't login!!");
            return;
        }
    }
    // rest of RefreshAsync method
    
  5. Abra AppDelegate.cs y agregue el siguiente método:Open AppDelegate.cs, add the following method:

    public static Func<NSUrl, bool> ResumeWithURL;
    
    public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
    {
        return ResumeWithURL != null && ResumeWithURL(url);
    }
    
  6. Abra el archivo Info.plist, vaya a Tipos de URL en la sección Opciones avanzadas.Open Info.plist file, navigate to URL Types in the Advanced section. Ahora, configure el Identificador y los Esquemas de URL de su tipo de dirección URL y haga clic en Agregar tipo de dirección URL.Now configure the Identifier and the URL Schemes of your URL Type and click Add URL Type. El valor de Esquemas de URL debe ser el mismo que el de {url_scheme_of_your_app}.URL Schemes should be the same as your {url_scheme_of_your_app}.

  7. En Visual Studio, conectado a su host de Mac, o Visual Studio para Mac, ejecute el proyecto de cliente destinado a un dispositivo o un emulador.In Visual Studio, connected to your Mac Host or Visual Studio for Mac, run the client project targeting a device or emulator. Compruebe que la aplicación no muestra ningún dato.Verify that the app displays no data.

    Despliegue la lista de tareas para actualizar la pantalla, lo que dará lugar a que aparezca la pantalla de inicio de sesión.Perform the refresh gesture by pulling down the list of items, which will cause the login screen to appear. Una vez que haya proporcionado credenciales válidas, la aplicación mostrará la lista de tareas pendientes y podrá actualizar los datos.Once you have successfully entered valid credentials, the app will display the list of todo items, and you can make updates to the data.