Agregar autenticación a su aplicación de Apache Cordova

Artículo
06/25/2019

Resumen

En este tutorial podrá agregar la autenticación al proyecto de inicio rápido todolist en Apache Cordova con un proveedor de identidades admitido. Este tutorial está basado en el tutorial Introducción a Mobile Apps, que debe completar primero.

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.

Visualización de un vídeo donde se muestren pasos similares

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. En Visual Studio:

Abra el proyecto que ha creado al completar el tutorial Introducción a Mobile Apps.
Ejecute la aplicación en el emulador de Google Android.
Compruebe que se muestra un error de conexión inesperado después de iniciarse la aplicación.

A continuación, actualice la aplicación para autenticar usuarios antes de solicitar recursos del back-end de Mobile Apps.

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

Abra el proyecto en Visual Studio y, después, abra el archivo www/index.html para editarlo.

Busque la etiqueta META Content-Security-Policy en la sección de encabezado. Agregue el host de OAuth a la lista de orígenes permitidos.

Proveedor	Nombre del proveedor del SDK	Host de OAuth
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	Twitter	https://api.twitter.com

A continuación se muestra un ejemplo de Content-Security-Policy (implementado para Azure Active Directory):

 <meta http-equiv="Content-Security-Policy" content="default-src 'self'
     data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">

Reemplace https://login.microsoftonline.com por el host de OAuth de la tabla anterior. Para obtener más información sobre la etiqueta de metadatos de lContent-Security-Policy, consulte la documentación de Content-Security-Policy.

Algunos proveedores de autenticación no requieren cambios en Content-Security-Policy cuando se usa en dispositivos móviles adecuados. Por ejemplo, no se requiere ningún cambio en Content-Security-Policy cuando se usa la autenticación de Google en un dispositivo Android.

Abra el www/js/index.js archivo para editarlo, busque el método onDeviceReady() y, en el código de creación del cliente, agregue el código siguiente:
```
 // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);
```
Este código reemplaza el código existente que crea la referencia de tabla y actualiza la interfaz de usuario.

El método login() inicia la autenticación con el proveedor. El método login() es una función asincrónica que devuelve una promesa de JavaScript. El resto de la inicialización se coloca dentro de la respuesta de la promesa para que no se ejecute hasta que se complete el método login().
En el código que acaba de agregar, reemplace SDK_Provider_Name por el nombre de su proveedor de inicio de sesión. Por ejemplo, para Azure Active Directory, use client.login('aad').
Ejecute el proyecto. Cuando el proyecto acabe de inicializarse, la aplicación mostrará la página de inicio de sesión de OAuth del proveedor de autenticación seleccionado.

Pasos siguientes

Obtenga más información sobre la autenticación con Azure App Service.
Prosiga el tutorial agregando notificaciones push a la aplicación de Apache Cordova.

Obtenga información sobre cómo usar los SDK.

Compartir a través de