Adición de autenticación a la aplicación apache Cordova

Artículo
2021-05-05

Nota

Este producto se retira. Para obtener un reemplazo de proyectos con .NET 8 o posterior, consulte la biblioteca datasync de Community Toolkit.

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 haber creado el del proyecto y habilitada la sincronización sin conexión.

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

Para configurar el back-end para la autenticación, debe:

Cree un registro de aplicación.
Configuración de la autenticación y autorización de Azure App Service.
Agregue la aplicación a las direcciones URL de redirección externas permitidas.

Durante este tutorial, configuraremos la aplicación para que use 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.

Creación de un registro de aplicaciones

Inicia sesión en el portal de Azure .
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 admitidos, 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 back-end es https://zumo-abcd1234.azurewebsites.net, escribiría https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Presione el botón Registrar 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 una duración de validez y, después, seleccione Agregar.
Copie el secreto en la página de Certificados & secretos. El valor no se muestra de nuevo.
Seleccione Autenticación.
En flujos híbridos y concesión implícita, habilite los tokens de identificador de .
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 distribúyala dentro de una aplicación cliente.

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

En Azure Portal, seleccione Todos los recursosy, después, app Service.
Seleccione Configuración>Autenticación.
Presione Agregar proveedor de identidades.
Seleccione Microsoft como proveedor de identidades.
- Para tipo de registro de aplicación, seleccione Proporcione los detalles de un registro de aplicación existente.
- Pegue los valores que copió anteriormente en los cuadros id. de aplicación (cliente) de 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 del inquilino mágico" para los inicios de sesión de Microsoft.
- En Restringir acceso, seleccione Requerir autenticación.
- Para 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 Save(Guardar).

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

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

Prueba de que se solicita autenticación

Ejecución de la aplicación mediante cordova run android
Compruebe que se genera una excepción no controlada con un código de estado 401 (no autorizado) después de que se inicie la aplicación.

Adición de la autenticación a la aplicación

Para agregar la 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

Cada aplicación de Apache Cordova declara sus orígenes correctos conocidos a través de un encabezado Content-Security-Policy. Cada proveedor compatible tiene un host de OAuth que debe agregarse:

Proveedor	Nombre del proveedor del SDK	OAuth Host
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`

Editar 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 es varias líneas para mejorar 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 inicio inicial, se le pedirá que inicie sesión con sus credenciales de Microsoft. Una vez completado, puede agregar y eliminar elementos de la lista.

Propina

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

eliminar 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 global de aplicaciones que se usa para la autenticación a través del portal.

Pasos siguientes

Eche un vistazo a las secciones PROCEDIMIENTOS:

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

Compartir a través de