Agregar autenticación a su aplicación de Apache CordovaAdd authentication to your Apache Cordova app

ResumenSummary

En este tutorial podrá agregar la autenticación al proyecto de inicio rápido todolist en Apache Cordova con un proveedor de identidades admitido.In this tutorial, you add authentication to the todolist quickstart project on Apache Cordova using a supported identity provider. Este tutorial está basado en el tutorial Introducción a Mobile Apps, que debe completar primero.This tutorial is based on the Get started with Mobile Apps tutorial, which you must complete first.

Registro de la aplicación para la autenticación y configuración de App ServiceRegister your app for authentication and configure the 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.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.

Visualización de un vídeo donde se muestren pasos similaresWatch a video showing similar steps

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 obtener más información, consulte Cómo: Requerir autenticación para tener acceso a 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 su sitio, consulte Cómo: Descargar el proyecto de código de inicio rápido de 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.

Ahora, puede comprobar que se deshabilitó el acceso anónimo a su back-end.Now, you can verify that anonymous access to your backend has been disabled. En Visual Studio:In Visual Studio:

  • Abra el proyecto que ha creado al completar el tutorial Introducción a Mobile Apps.Open the project that you created when you completed the tutorial Get started with Mobile Apps.
  • Ejecute la aplicación en el emulador de Google Android.Run your application in the Google Android Emulator.
  • Compruebe que se muestra un error de conexión inesperado después de iniciarse la aplicación.Verify that an Unexpected Connection Failure is shown after the app starts.

A continuación, actualice la aplicación para autenticar usuarios antes de solicitar recursos del back-end de Mobile Apps.Next, update the app to authenticate users before requesting resources from the Mobile App backend.

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

  1. Abra el proyecto en Visual Studio y, después, abra el archivo www/index.html para editarlo.Open your project in Visual Studio, then open the www/index.html file for editing.

  2. Busque la etiqueta META Content-Security-Policy en la sección de encabezado.Locate the Content-Security-Policy meta tag in the head section. Agregue el host de OAuth a la lista de orígenes permitidos.Add the OAuth host to the list of allowed sources.

    ProveedorProvider Nombre del proveedor del SDKSDK Provider Name Host de OAuthOAuth Host
    Azure Active DirectoryAzure Active Directory aadaad https://login.microsoftonline.com
    FacebookFacebook Facebookfacebook https://www.facebook.com
    GoogleGoogle Googlegoogle https://accounts.google.com
    MicrosoftMicrosoft microsoftaccountmicrosoftaccount https://login.live.com
    TwitterTwitter Twittertwitter https://api.twitter.com

    A continuación se muestra un ejemplo de Content-Security-Policy (implementado para Azure Active Directory):An example Content-Security-Policy (implemented for Azure Active Directory) is as follows:

     <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.Replace https://login.microsoftonline.com with the OAuth host from the preceding table. Para obtener más información sobre la etiqueta de metadatos de lContent-Security-Policy, consulte la documentación de Content-Security-Policy.For more information about the content-security-policy meta tag, see the Content-Security-Policy documentation.

    Algunos proveedores de autenticación no requieren cambios en Content-Security-Policy cuando se usa en dispositivos móviles adecuados.Some authentication providers do not require Content-Security-Policy changes when used on appropriate mobile devices. Por ejemplo, no se requiere ningún cambio en Content-Security-Policy cuando se usa la autenticación de Google en un dispositivo Android.For example, no Content-Security-Policy changes are required when using Google authentication on an Android device.

  3. Abra el archivo www/js/index.js para editarlo, busque el método onDeviceReady() y, en el código de creación del cliente, agregue el siguiente código:Open the www/js/index.js file for editing, locate the onDeviceReady() method, and under the client creation code add the following code:

     // 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.This code replaces the existing code that creates the table reference and refreshes the UI.

    El método login() inicia la autenticación con el proveedor.The login() method starts authentication with the provider. El método login() es una función asincrónica que devuelve una promesa de JavaScript.The login() method is an async function that returns a JavaScript Promise. 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().The rest of the initialization is placed inside the promise response so that it is not executed until the login() method completes.

  4. En el código que acaba de agregar, reemplace SDK_Provider_Name por el nombre de su proveedor de inicio de sesión.In the code that you just added, replace SDK_Provider_Name with the name of your login provider. Por ejemplo, para Azure Active Directory, use client.login('aad').For example, for Azure Active Directory, use client.login('aad').

  5. Ejecute el proyecto.Run your project. 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.When the project has finished initializing, your application shows the OAuth login page for the chosen authentication provider.

Pasos siguientesNext Steps

Obtenga información sobre cómo usar los SDK.Learn how to use the SDKs.