Uso del complemento Apache Cordova para Azure Mobile Apps
Nota
Este producto se retira. Para obtener un reemplazo de proyectos con .NET 8 o posterior, consulte la biblioteca datasync de Community Toolkit.
Esta guía le enseña a realizar escenarios comunes mediante el complemento de Apache Cordova más reciente de para Azure Mobile Apps. Si no está familiarizado con Azure Mobile Apps, complete primero inicio rápido de Azure Mobile Apps para crear un back-end, crear una tabla y descargar un proyecto de Apache Cordova creado previamente. En esta guía, nos centramos en el complemento Apache Cordova del lado cliente.
Plataformas admitidas
Este SDK admite Apache Cordova v6.0.0 y versiones posteriores en dispositivos iOS, Android y Windows. La compatibilidad con la plataforma es la siguiente:
- API de Android 19+.
- Versiones 8.0 y posteriores de iOS.
Advertencia
En este artículo se describe la información de la versión de biblioteca v4.2.0, que se retira. No se realizarán más actualizaciones en esta biblioteca, incluidas las actualizaciones de los problemas de seguridad. Considere la posibilidad de pasar a un cliente .NET, como MAUI de .NET, para obtener soporte continuo.
Configuración y requisitos previos
En esta guía se supone que ha creado un back-end con una tabla. Los ejemplos usan la tabla TodoItem desde los inicios rápidos. Para agregar el complemento azure Mobile Apps al proyecto, use el siguiente comando:
cordova plugin add cordova-plugin-ms-azure-mobile-apps
Para obtener más información sobre cómo crear su primera aplicación de Apache Cordova, consulte su documentación.
Configuración de una aplicación Ionic v2
Para configurar correctamente un proyecto de Ionic v2, primero cree una aplicación básica y agregue el complemento Cordova:
ionic start projectName --v2
cd projectName
ionic plugin add cordova-plugin-ms-azure-mobile-apps
Agregue las líneas siguientes a app.component.ts para crear el objeto de cliente:
declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursite.azurewebsites.net");
Ahora puede compilar y ejecutar el proyecto en el explorador:
ionic platform add browser
ionic run browser
El complemento Cordova de Azure Mobile Apps admite aplicaciones Ionic v1 y v2. Solo las aplicaciones Ionic v2 requieren la declaración adicional para el objeto WindowsAzure.
Creación de una conexión de cliente
Cree una conexión de cliente mediante la creación de un objeto WindowsAzure.MobileServiceClient. Reemplace appUrl por la dirección URL de la aplicación móvil.
var client = WindowsAzure.MobileServiceClient(appUrl);
Trabajar con tablas
Para acceder a los datos o actualizarlos, cree una referencia a la tabla de back-end. Reemplace tableName por el nombre de la tabla
var table = client.getTable(tableName);
Una vez que tenga una referencia de tabla, puede seguir trabajando con la tabla:
- Consultar una tabla
- insertar datos
- modificar de datos
- eliminar de datos
Consulta de una referencia de tabla
Una vez que tenga una referencia de tabla, puede usarla para consultar datos en el servidor. Las consultas se realizan en un lenguaje "similar a LINQ". Para devolver todos los datos de la tabla, use el código siguiente:
/**
* Process the results that are received by a call to table.read()
*
* @param {Object} results the results as a pseudo-array
* @param {int} results.length the length of the results array
* @param {Object} results[] the individual results
*/
function success(results) {
var numItemsRead = results.length;
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Each row is an object - the properties are the columns
}
}
function failure(error) {
throw new Error('Error loading data: ', error);
}
table
.read()
.then(success, failure);
Se llama a la función success con los resultados. No use for (var i in results) en la función correcta, ya que itera la información que se incluye en los resultados cuando se usen otras funciones de consulta (como .includeTotalCount()).
Para obtener más información sobre la sintaxis de consulta, consulte la documentación del objeto query de .
Filtrado de datos en el servidor
Puede usar una cláusula where en la referencia de tabla:
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
También puede usar una función que filtre el objeto. En este caso, la variable this se asigna al objeto actual que se está filtrando. El código siguiente es funcionalmente equivalente al ejemplo anterior:
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
Paginación a través de datos
Utilice los métodos take() y skip(). Por ejemplo, si desea dividir la tabla en registros de 100 filas:
var totalCount = 0, pages = 0;
// Step 1 - get the total number of records
table.includeTotalCount().take(0).read(function (results) {
totalCount = results.totalCount;
pages = Math.floor(totalCount/100) + 1;
loadPage(0);
}, failure);
function loadPage(pageNum) {
let skip = pageNum * 100;
table.skip(skip).take(100).read(function (results) {
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Process each row
}
}
}
El método .includeTotalCount() se usa para agregar un campo totalCount al objeto de resultados. El campo totalCount se rellena con el número total de registros que se devolverían si no se usa ninguna paginación.
A continuación, puede usar la variable pages y algunos botones de interfaz de usuario para proporcionar una lista de páginas; use loadPage() para cargar los nuevos registros de cada página. Implemente el almacenamiento en caché para acelerar el acceso a los registros que ya se han cargado.
Devolver datos ordenados
Use los métodos de consulta .orderBy() o .orderByDescending():
table
.orderBy('name')
.read()
.then(success, failure);
Para obtener más información sobre el objeto Query, vea la [Documentación del objeto Query].
Insertar datos
Cree un objeto JavaScript con la fecha adecuada y llame a table.insert() de forma asincrónica:
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
Al insertar correctamente, el elemento insertado se devuelve con campos adicionales que son necesarios para las operaciones de sincronización. Actualice su propia memoria caché con esta información para las actualizaciones posteriores.
El SDK de Azure Mobile Apps Node.js Server admite el esquema dinámico con fines de desarrollo. El esquema dinámico permite agregar columnas a la tabla especificandolas en una operación de inserción o actualización. Se recomienda desactivar el esquema dinámico antes de mover la aplicación a producción.
Modificación de datos
De forma similar al método .insert(), debe crear un objeto Update y, a continuación, llamar a .update(). El objeto update debe contener el identificador del registro que se va a actualizar: el identificador se obtiene al leer el registro o al llamar a .insert().
var updateItem = {
id: '7163bc7a-70b2-4dde-98e9-8818969611bd',
name: 'My New Name'
};
table
.update(updateItem)
.done(function (updatedItem) {
// You can now update your cached copy
}, failure);
Eliminar datos
Para eliminar un registro, llame al método .del(). Pase el identificador en una referencia de objeto:
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Autenticación de usuarios
Azure App Service admite la autenticación y autorización de usuarios de aplicaciones mediante varios proveedores de identidades externos: Facebook, Google, Cuenta microsoft y Twitter. Puede establecer permisos en tablas para restringir el acceso a operaciones específicas solo a usuarios autenticados. También puede usar la identidad de los usuarios autenticados para implementar reglas de autorización en scripts de servidor. Para obtener más información, consulte el tutorial Introducción a la autenticación.
Al usar la autenticación en una aplicación de Apache Cordova, los siguientes complementos de Cordova deben estar disponibles:
Nota
Los cambios de seguridad recientes en iOS y Android pueden hacer que la autenticación de flujo de servidor no esté disponible. En estos casos, debe usar un flujo de cliente.
Se admiten dos flujos de autenticación: un flujo de servidor y un flujo de cliente. El flujo de servidor proporciona la experiencia de autenticación más sencilla, ya que se basa en la interfaz de autenticación web del proveedor. El flujo de cliente permite una integración más profunda con funcionalidades específicas del dispositivo, como el inicio de sesión único, ya que se basa en SDK específicos del dispositivo específicos del proveedor.
Autenticación con un proveedor (Flujo de servidor)
Para que Mobile Apps administre el proceso de autenticación en la aplicación, debe registrar la aplicación con el proveedor de identidades. Después, en Azure App Service, debe configurar el identificador de aplicación y el secreto proporcionados por el proveedor. Para obtener más información, consulte el tutorial Agregar autenticación a la aplicación.
Una vez que haya registrado el proveedor de identidades, llame al método .login() con el nombre del proveedor. Por ejemplo, para iniciar sesión con Facebook, use el código siguiente:
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Los valores válidos para el proveedor son "aad", "facebook", "google", "microsoftaccount" y "twitter".
Nota
Debido a problemas de seguridad, es posible que algunos proveedores de autenticación no funcionen con un flujo de servidor. Debe usar un método de flujo de cliente en estos casos.
En este caso, Azure App Service administra el flujo de autenticación de OAuth 2.0. Muestra la página de inicio de sesión del proveedor seleccionado y genera un token de autenticación de App Service después de iniciar sesión correctamente con el proveedor de identidades. La función de inicio de sesión, cuando se completa, devuelve un objeto JSON que expone el identificador de usuario y el token de autenticación de App Service en los campos userId y authenticationToken, respectivamente. Este token se puede almacenar en caché y reutilizarse hasta que expire.
Autenticación con un proveedor (Flujo de cliente)
La aplicación también puede ponerse en contacto de forma independiente con el proveedor de identidades y, a continuación, proporcionar el token devuelto a App Service para la autenticación. Este flujo de cliente le permite proporcionar una experiencia de inicio de sesión único para los usuarios o recuperar datos de usuario adicionales del proveedor de identidades.
Ejemplo básico de autenticación social
En este ejemplo se usa el SDK de cliente de Facebook para la autenticación:
client.login("facebook", {"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
En este ejemplo se supone que el token proporcionado por el SDK del proveedor correspondiente se almacena en la variable de token. Los detalles requeridos por cada proveedor son ligeramente diferentes. Consulte la documentación de autenticación y autorización de Azure App Service
Obtención de información sobre el usuario autenticado
La información de autenticación se puede recuperar del punto de conexión de /.auth/me mediante una llamada HTTP con cualquier biblioteca HTTP/REST. Asegúrese de establecer el encabezado X-ZUMO-AUTH en el token de autenticación. El token de autenticación se almacena en client.currentUser.mobileServiceAuthenticationToken. Por ejemplo, para usar la API fetch:
var url = client.applicationUrl + '/.auth/me';
var headers = new Headers();
headers.append('X-ZUMO-AUTH', client.currentUser.mobileServiceAuthenticationToken);
fetch(url, { headers: headers })
.then(function (data) {
return data.json()
}).then(function (user) {
// The user object contains the claims for the authenticated user
});
Fetch está disponible como un de paquete npm o para la descarga del explorador desde CDNJS. Los datos se reciben como un objeto JSON.
Configure mobile App Service para direcciones URL de redirección externas.
Varios tipos de aplicaciones de Apache Cordova usan una funcionalidad de bucle invertido para controlar los flujos de interfaz de usuario de OAuth. Los flujos de interfaz de usuario de OAuth en localhost provocan problemas, ya que el servicio de autenticación solo sabe cómo usar el servicio de forma predeterminada. Algunos ejemplos de flujos problemáticos de interfaz de usuario de OAuth son:
- Emulador de Ripple.
- Recarga en vivo con Ionic.
- Ejecución local del back-end móvil
- Ejecutar el back-end móvil en una instancia de Azure App Service diferente a la que proporciona autenticación.
Siga estas instrucciones para agregar la configuración local a la configuración:
Inicie sesión en el de Azure Portal de
Seleccione Todos los recursos o App Services, a continuación, haga clic en el nombre de la aplicación móvil.
Haga clic en Tools
Haga clic en explorador de recursos en el menú OBSERVAR y, a continuación, haga clic en Go. Se abre una nueva ventana o pestaña.
Expanda el config, authsettings nodos del sitio en el panel de navegación izquierdo.
Haga clic en Editar
Busque el elemento "allowedExternalRedirectUrls". Puede establecerse en null o en una matriz de valores. Cambie el valor por el valor siguiente:
"allowedExternalRedirectUrls": [ "http://localhost:3000", "https://localhost:3000" ],Reemplace las direcciones URL por las direcciones URL del servicio. Algunos ejemplos son
http://localhost:3000(para el servicio de ejemplo de Node.js) ohttp://localhost:4400(para el servicio Ripple). Sin embargo, estas direcciones URL son ejemplos: su situación, incluidos los servicios mencionados en los ejemplos, puede ser diferente.Haga clic en el botón de lectura y escritura en la esquina superior derecha de la pantalla.
Haga clic en el botón verde PUT.
La configuración se guarda en este momento. No cierre la ventana del explorador hasta que la configuración haya terminado de guardarse. Agregue también estas direcciones URL de bucle invertido a la configuración de CORS de App Service:
- Inicie sesión en el de Azure Portal de
- Seleccione Todos los recursos o App Services, a continuación, haga clic en el nombre de la aplicación móvil.
- La hoja Configuración se abre automáticamente. Si no lo hace, haga clic en Todos los valores.
- Haga clic en CORS en el menú API.
- Escriba la dirección URL que desea agregar en el cuadro proporcionado y presione Entrar.
- Escriba más direcciones URL según sea necesario.
- Haga clic en Guardar para guardar la configuración.
La nueva configuración tarda aproximadamente entre 10 y 15 segundos en surtir efecto.