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

Artículo
11/08/2023

En este tutorial, agregará la autenticación de Microsoft al proyecto de inicio rápido mediante el identificador de Microsoft Entra. Antes de completar este tutorial, asegúrese de que ha creado el proyecto y ha habilitado la sincronización sin conexión.

Configuración del servidor back-end para la autenticación

Para configurar el servidor back-end para la autenticación, debe hacer lo siguiente:

Crear un registro de aplicación.
Configurar la autenticación y autorización de Azure App Service.
Agregar la aplicación a las direcciones URL de redirección externas permitidas.

Durante este tutorial, configuraremos la aplicación para usar la autenticación de Microsoft. Un inquilino de Microsoft Entra se ha configurado automáticamente en la suscripción de Azure. Puede usar el identificador de Entra de Microsoft para configurar la autenticación de Microsoft.

Necesita la dirección URL de back-end del servicio Azure Mobile Apps que se proporcionó al aprovisionar el servicio.

Crear un registro de aplicación

Inicie sesión en Azure Portal.
Seleccione Microsoft Entra ID> Registros de aplicaciones> Nuevo registro.
En la página Registrar una aplicación, escriba zumoquickstart en el campo Nombre.
En Tipos de cuenta compatibles, seleccione Cuentas en cualquier directorio organizativo (cualquier directorio microsoft Entra - multiinquilino) y cuentas personales de Microsoft (por ejemplo, Skype, Xbox).
En URI de redirección, seleccione Web y escriba <backend-url>/.auth/login/aad/callback. Por ejemplo, si la dirección URL del servidor back-end fuera https://zumo-abcd1234.azurewebsites.net, escribiría https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Presione el botón Registrar situado en la parte inferior del formulario.
Copie el Id. de aplicación (cliente) .
En el panel izquierdo, seleccione Certificados y secretos>Nuevo secreto de cliente.
Escriba una descripción adecuada, seleccione un período de validez y, luego, elija Agregar.
Copie el secreto de la página Certificados y secretos. El valor no se muestra de nuevo.
Seleccione Autenticación.
En Concesión implícita y flujos híbridos, habilite los tokens de identificador.
Presione Guardar en la parte superior de la página.

Importante

El valor del secreto de cliente (contraseña) es una credencial de seguridad importante. No comparta la contraseña con nadie ni la distribuya en una aplicación cliente.

Configuración de la autenticación y autorización de Azure App Service

En Azure Portal, seleccione Todos los recursos y, luego, su instancia de App Service.
Seleccione Configuración>Autenticación.
Presione Agregar proveedor de identidades.
Seleccione Microsoft como proveedor de identidades.
- En Tipo de registro de aplicación, seleccione Proporcionar los detalles de un registro de aplicación existente.
- Pegue los valores que copió anteriormente en los cuadros Id. de aplicación (cliente) y Secreto de cliente.
- En Url del emisor, escriba https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Esta dirección URL es la "dirección URL mágica de inquilino" para los inicios de sesión de Microsoft.
- En Restringir acceso, seleccione Requerir autenticación.
- En Solicitud no autenticada, seleccione HTTP 401 No autorizado.
Presione Agregar.
Una vez que vuelva la pantalla de autenticación, presione Editar junto a Configuración de autenticación.
En el cuadro Direcciones URL de redirección externas permitidas , escriba zumoquickstart://easyauth.callback.
Presione Guardar.

El paso 10 requiere que todos los usuarios se autentiquen antes de acceder al servidor back-end. Puede proporcionar controles específicos agregando código al servidor back-end.

¿LO SABÍA? También puede permitir a los usuarios con cuentas de organización en Microsoft Entra ID, Facebook, Google, Twitter o cualquier proveedor compatible con OpenID Conectar. Siga las instrucciones de la documentación de Azure App Service.

Prueba de que se está solicitando la autenticación

Ejecución de la aplicación mediante cordova run android
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.

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

Para agregar autenticación a través del proveedor integrado, debe:

Agregue el proveedor de autenticación a la lista de orígenes correctos conocidos.
Llame al proveedor de autenticación antes de acceder a los datos.

Actualización de la directiva de seguridad de contenido

Todas las aplicaciones de Apache Cordova declara sus orígenes correctos conocidos a través de un Content-Security-Policy encabezado. Cada proveedor admitido tiene un host de OAuth que es preciso agregar:

Proveedor	Nombre del proveedor del SDK	Host de OAuth
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
Google	Google	`https://accounts.google.com`
Twitter	Twitter	`https://api.twitter.com`

Edite www/index.html; agregue el host de OAuth para el identificador de Entra de Microsoft de la siguiente manera:

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

El contenido tiene varias líneas para facilitar la legibilidad. Coloque todo el código en la misma línea.

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

Ya ha reemplazado ZUMOAPPNAME por el nombre de la aplicación.

Llamada al proveedor de autenticación

Edite www/js/index.js. Reemplace el método setup() con el código siguiente:

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Prueba de la aplicación

Ejecute el siguiente comando:

cordova run android

Una vez completado el primer inicio, se le pedirá que inicie sesión con sus credenciales de Microsoft. Una vez completado, puede agregar y eliminar elementos de la lista.

Sugerencia

Si el emulador no se inicia automáticamente, abra Android Studio y, luego, seleccione Configurar>AVD Manager. Esto le permitirá iniciar el dispositivo manualmente. Si ejecuta adb devices -l, debería ver el dispositivo emulado seleccionado.

Eliminación de los recursos

Ahora que ha completado el tutorial de inicio rápido, puede eliminar los recursos con az group delete -n zumo-quickstart. También puede eliminar el registro de aplicaciones global que se usa para la autenticación mediante el portal.

Pasos siguientes

Consulte las secciones de procedimientos:

También puede realizar un inicio rápido para otra plataforma mediante el mismo servicio: