Incorporación de la autenticación a la aplicación de Windows

Artículo
06/25/2019

Información general

En este tema se muestra cómo agregar la autenticación basada en la nube a su aplicación móvil. En este tutorial podrá agregar la autenticación al proyecto de inicio rápido de la Plataforma universal de Windows (UWP) para Mobile Apps mediante un proveedor de identidades compatible con Azure App Service. Una vez que el back-end de la aplicación móvil haya realizado la autenticación y autorización correctamente, se mostrará el valor de identificador de usuario.

Este tutorial se basa en el inicio rápido de Mobile Apps. Primero debe completar el tutorial Introducción a Mobile Apps.

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

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

Ahora, puede comprobar que se deshabilitó el acceso anónimo a su back-end. Con el proyecto de aplicación para UWP configurado como proyecto de inicio, implemente y ejecute la aplicación; compruebe que, cuando esta se inicia, se genera una excepción no controlada con el código de estado 401 (No autorizado). Esto se produce porque la aplicación intenta obtener acceso a su Código de aplicación móvil como usuario sin autenticar, pero la tabla TodoItem requiere ahora autenticación.

A continuación, actualizará la aplicación para autenticar usuarios antes de solicitar recursos de App Service.

Incorporación de autenticación a la aplicación

En el archivo de proyecto de aplicación para UWP MainPage.xaml.cs, agregue el siguiente fragmento de código:

 // Define a member variable for storing the signed-in user. 
 private MobileServiceUser user;

 // Define a method that performs the authentication process
 // using a Facebook sign-in. 
 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;
     try
     {
         // Change 'MobileService' to the name of your MobileServiceClient instance.
         // Sign-in using Facebook authentication.
         user = await App.MobileService
             .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         message =
             string.Format("You are now signed in - {0}", user.UserId);

         success = true;
     }
     catch (InvalidOperationException)
     {
         message = "You must log in. Login Required";
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();
     return success;
 }

Este código autentica al usuario con un inicio de sesión de Facebook. Si está usando un proveedor de identidades diferente al de Facebook, cambie el valor de MobileServiceAuthenticationProvider anterior por el valor de su proveedor.

Reemplace el método OnNavigatedTo() en MainPage.xaml.cs. A continuación, agregará un botón Iniciar sesión a la aplicación que desencadena la autenticación.

 protected override async void OnNavigatedTo(NavigationEventArgs e)
 {
     if (e.Parameter is Uri)
     {
         App.MobileService.ResumeWithURL(e.Parameter as Uri);
     }
 }

Agregue el siguiente fragmento de código a MainPage.xaml.cs:

 private async void ButtonLogin_Click(object sender, RoutedEventArgs e)
 {
     // Login the user and then load data from the mobile app.
     if (await AuthenticateAsync())
     {
         // Switch the buttons and load items from the mobile app.
         ButtonLogin.Visibility = Visibility.Collapsed;
         ButtonSave.Visibility = Visibility.Visible;
         //await InitLocalStoreAsync(); //offline sync support.
         await RefreshTodoItems();
     }
 }

Abra el archivo de proyecto MainPage.xaml, busque el elemento que define el botón Guardar y reemplácelo por el código siguiente:

 <Button Name="ButtonSave" Visibility="Collapsed" Margin="0,8,8,0" 
         Click="ButtonSave_Click">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Add"/>
         <TextBlock Margin="5">Save</TextBlock>
     </StackPanel>
 </Button>
 <Button Name="ButtonLogin" Visibility="Visible" Margin="0,8,8,0" 
         Click="ButtonLogin_Click" TabIndex="0">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Permissions"/>
         <TextBlock Margin="5">Sign in</TextBlock> 
     </StackPanel>
 </Button>

Agregue el siguiente fragmento de código a App.xaml.cs:

 protected override void OnActivated(IActivatedEventArgs args)
 {
     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         Frame content = Window.Current.Content as Frame;
         if (content.Content.GetType() == typeof(MainPage))
         {
             content.Navigate(typeof(MainPage), protocolArgs.Uri);
         }
     }
     Window.Current.Activate();
     base.OnActivated(args);
 }

Abra el archivo Package.appxmanifest, vaya a Declaraciones, en la lista desplegable Declaraciones disponibles seleccione Protocolo y haga clic en el botón Agregar. Configure ahora las Propiedades de la declaración Protocolo. En Nombre para mostrar, agregue el nombre que quiere mostrar a los usuarios de la aplicación. En Nombre, agregue el {esquema_de_dirección_URL_de_la_aplicación}.
Presione la tecla F5 para ejecutar la aplicación, haga clic en el botón Iniciar sesión e inicie sesión en la aplicación con el proveedor de identidad que haya elegido. Una vez iniciada la sesión correctamente, la aplicación se ejecutará sin errores y podrá consultar al back-end y realizar actualizaciones de datos.

Almacenamiento del token de autorización en el cliente

En el ejemplo anterior se mostró un inicio de sesión estándar, que requiere que el cliente se ponga en contacto con el proveedor de identidades y con el servicio de la aplicación cada vez que se inicia la aplicación. Este método no solo es ineficaz, sino que también puede enfrentarse a problemas relacionados con el uso si varios clientes inician la aplicación al mismo tiempo. Un método mejor es almacenar en caché el token de autorización devuelto por su servicio de aplicación e intentar usarlo primero antes de utilizar un inicio de sesión basado en proveedores.

Nota

Puede almacenar en caché el token emitido por los servicios de aplicaciones con independencia de si es una autenticación administrada por el cliente o por el servicio. Este tutorial utiliza la autenticación administrada por el servicio.

En el archivo de proyecto MainPage.xaml.cs, agregue las siguientes instrucciones using :
```
 using System.Linq;        
 using Windows.Security.Credentials;
```

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

 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;

     // This sample uses the Facebook provider.
     var provider = MobileServiceAuthenticationProvider.Facebook;

     // Use the PasswordVault to securely store and access credentials.
     PasswordVault vault = new PasswordVault();
     PasswordCredential credential = null;

     try
     {
         // Try to get an existing credential from the vault.
         credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
     }
     catch (Exception)
     {
         // When there is no matching resource an error occurs, which we ignore.
     }

     if (credential != null)
     {
         // Create a user from the stored credentials.
         user = new MobileServiceUser(credential.UserName);
         credential.RetrievePassword();
         user.MobileServiceAuthenticationToken = credential.Password;

         // Set the user from the stored credentials.
         App.MobileService.CurrentUser = user;

         // Consider adding a check to determine if the token is 
         // expired, as shown in this post: https://aka.ms/jww5vp.

         success = true;
         message = string.Format("Cached credentials for user - {0}", user.UserId);
     }
     else
     {
         try
         {
             // Sign in with the identity provider.
             user = await App.MobileService
                 .LoginAsync(provider, "{url_scheme_of_your_app}");

             // Create and store the user credentials.
             credential = new PasswordCredential(provider.ToString(),
                 user.UserId, user.MobileServiceAuthenticationToken);
             vault.Add(credential);

             success = true;
             message = string.Format("You are now signed in - {0}", user.UserId);
         }
         catch (MobileServiceInvalidOperationException)
         {
             message = "You must sign in. Sign-In Required";
         }
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();

     return success;
 }

En esta versión de AuthenticateAsync, la aplicación intenta usar las credenciales almacenadas en PasswordVault para acceder al servicio. También se realiza un inicio de sesión normal cuando no hay ninguna credencial almacenada.

Nota

Es posible que un token almacenado en la memoria caché haya expirado, y la expiración del token también puede ocurrir después de la autenticación cuando la aplicación está en uso. Para obtener información sobre cómo determinar si un token ha caducado, consulte Buscar tokens de autenticación expirados. Para obtener una solución a los errores de gestión de autorizaciones relativas a la expiración de tokens, vea la publicación Almacenamiento en caché y gestión de los tokens expirados en el SDK administrado de Azure Mobile Services).

Reinicie la aplicación dos veces.

Tenga en cuenta que cuando se inicia la primera vez, se requiere de nuevo un inicio de sesión con el proveedor. Sin embargo, la segunda vez se usan las credenciales almacenadas en caché y se omite el inicio de sesión.

Pasos siguientes

Ahora que ha completado este tutorial de autenticación básica, considere la posibilidad de continuar con uno de los siguientes tutoriales:

Agregar notificaciones push a la aplicación
: aprenda a agregar a la aplicación compatibilidad con notificaciones push y a configurar su back-end de aplicación móvil para usar Azure Notification Hubs para enviar notificaciones push.
Habilitación de la sincronización sin conexión para su aplicación
(Habilitación de la sincronización sin conexión para su aplicación): aprenda a agregar compatibilidad sin conexión a su aplicación con un back-end de aplicación móvil. La sincronización sin conexión permite a los usuarios finales interactuar con una aplicación móvil (ver, agregar o modificar datos), incluso cuando no hay conexión de red.

Share via