Uso de la biblioteca de cliente de JavaScript para Azure Mobile Apps
Información general
En esta guía descubrirá cómo realizar tareas comunes usando el último SDK de JavaScript para Azure Mobile Apps. Si no está familiarizado con Azure Mobile Apps, complete primero la Creación de una aplicación de Apache Cordova para crear un back-end y una tabla. En esta guía, nos centramos en usar el back-end móvil en aplicaciones web HTML/JavaScript.
Plataformas compatibles
Limitamos la compatibilidad del explorador a la versión actual y las más recientes de los principales exploradores: Google Chrome, Microsoft Edge, Microsoft Internet Explorer y Mozilla Firefox. El SDK debería funcionar con cualquier explorador relativamente moderno.
El paquete se distribuye como un módulo de JavaScript universal, por lo que es compatible con formatos globales, AMD y CommonJS.
Configuración y requisitos previos
En esta guía se asume que ha creado un back-end con una tabla. En esta guía se asume que la tabla tiene el mismo esquema que las tablas de dichos tutoriales.
Se puede instalar el SDK de JavaScript para Azure Mobile Apps con el comando npm:
npm install azure-mobile-apps-client --save
La biblioteca también puede utilizarse como un módulo ES2015, en entornos de CommonJS, como Browserify y Webpack, y como una biblioteca AMD. Por ejemplo:
// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';
También puede utilizar una versión previamente compilada del SDK descargándolo directamente de nuestra red CDN:
<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>
Creación de conexiones de cliente
Cree una conexión de cliente mediante la generación de un objeto WindowsAzure.MobileServiceClient . Sustituya appUrl por la dirección URL de la aplicación móvil.
var client = WindowsAzure.MobileServiceClient(appUrl);
Uso de 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 disponga de una referencia de tabla, podrá realizar más operaciones con su tabla:
Consulta de una referencia de tabla
Una vez que tiene una referencia de tabla, puede utilizarla para consultar datos en el servidor. Las consultas se realizan en un lenguaje "similar a LINQ". Para devolver todos los datos de la tabla, utilice 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 success, dado que se efectuaría una iteración en la información incluida en los resultados al utilizar otras funciones de consulta (como .includeTotalCount()).
Para más información sobre la sintaxis de Query, consulte la [documentación del objeto Query].
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 utilizar una función que filtre el objeto. En este caso, la variable this se asigna al objeto actual que se está filtrando. El siguiente código 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 mediante 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 utiliza 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 utilizara ninguna paginación.
A continuación, puede usar la variable de páginas y algunos botones de la interfaz de usuario para proporcionar una lista de páginas; utilice 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.
Devolución de los datos ordenados
Utilice los métodos de consulta .orderBy() o .orderByDescending():
table
.orderBy('name')
.read()
.then(success, failure);
Para más información sobre el objeto Query, consulte la [documentación del objeto Query].
Cómo: Insertar datos
Cree un objeto de JavaScript con la fecha adecuada y llame a table.insert() de manera asincrónica:
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
Tras la inserción correcta, el elemento insertado se devuelve con los campos adicionales que son necesarios para las operaciones de sincronización. Actualice su propia caché con esta información para actualizaciones posteriores.
El SDK del servidor de Node.js para Azure Mobile Apps admite el esquema dinámico con fines de desarrollo. El esquema dinámico permite agregar columnas a la tabla al especificarlas en una operación de inserción o actualización. Se recomienda desactivar el esquema dinámico antes de pasar la aplicación a producción.
Cómo: Modificar datos
De forma similar al método .insert(), debe crear un objeto Update y luego llamar a .update(). El objeto Update debe contener el identificador del registro que se va a actualizar, que 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);
Cómo: Eliminar datos
Para eliminar un registro, llame al método .del(). Pase el identificador de una referencia de objeto:
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Procedimientos: Autenticación de usuarios
Azure App Service admite la autenticación y autorización de usuarios de la aplicación que usan diversos 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 usuarios autenticados para implementar reglas de autorización en scripts del servidor. Para obtener más información, consulte el tutorial Introducción a la autenticación .
Se admiten dos flujos de autenticación: un flujo de servidor y un flujo de cliente. El flujo de servidor ofrece la experiencia de autenticación más simple, ya que se basa en la interfaz de autenticación web del proveedor. El flujo de cliente permite una mayor integración con funcionalidades específicas del dispositivo, como el inicio de sesión único, ya que se basa en SDK específicos del proveedor.
Autenticación con un proveedor (flujo de servidor)
Para que Mobile Apps administre el proceso de autenticación en su aplicación, debe registrar esta última en el proveedor de identidades. A continuación, en Azure App Service, tendrá que configurar el identificador y el secreto de la aplicación proporcionados por el proveedor. Para obtener más información, consulte el tutorial Incorporación de autenticación a la aplicación.
Una vez que haya registrado el proveedor de identidades, simplemente llame al método .login() con el valor del proveedor. Por ejemplo, para iniciar sesión con Facebook, use el siguiente código:
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:
Autenticación de Google no funciona actualmente a través del flujo de servidor. Para realizar la autenticación con Google, debe usar un método de flujo de cliente.
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 login, 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. El token puede almacenarse en caché y volver a usarse hasta que expire.
Autenticación con un proveedor (flujo de cliente)
La aplicación también puede ponerse en contacto de manera independiente con el proveedor de identidades y 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
Este ejemplo 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 asume que el token proporcionado por el SDK del proveedor correspondiente se almacena en la variable token.
Obtención de información sobre el usuario autenticado
Se puede recuperar la información de autenticación desde el punto de conexión /.auth/me mediante una llamada HTTP con cualquier biblioteca de AJAX. 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 de captura:
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
});
La captura está disponible como un paquete npm o para descarga desde el explorador desde CDNJS. También podría utilizar jQuery u otra API de AJAX para capturar la información. Los datos se recibieron como un objeto JSON.
Procedimientos: Cómo configurar su servicio de aplicaciones móviles para URL de redireccionamiento externas
Varios tipos de aplicaciones de JavaScript utilizan funcionalidades de bucle invertido para controlar los flujos de la interfaz de usuario de OAuth. Estas son algunas de ellas:
- Ejecución del servicio de manera local
- Uso de la característica Live Reload con Ionic Framework
- Redirección a App Service para la autenticación
La ejecución local puede ocasionar problemas porque, de forma predeterminada, la autenticación de App Service solo está configurada para permitir el acceso desde el back-end de la aplicación móvil. Realice los pasos siguientes para cambiar la configuración de App Service con el fin de permitir la autenticación desde el servidor de manera local:
Inicie sesión en el Azure Portal
Vaya al back-end de la aplicación móvil.
Seleccione Explorador de recursos en el menú HERRAMIENTAS DE DESARROLLO.
Haga clic en Ir para abrir el Explorador de recursos del back-end de su aplicación móvil en una nueva pestaña o ventana.
Expanda el nodo config>authsettings de la aplicación.
Haga clic en el botón Editar para habilitar la edición del recurso.
Busque el elemento allowedExternalRedirectUrls , que debe tener el valor null. Agregue las direcciones URL en una matriz:
"allowedExternalRedirectUrls": [ "https://localhost:3000", "https://localhost:3000" ],Reemplace las direcciones URL de la matriz por las de su servicio; en este ejemplo, la URL es
https://localhost:3000para el servicio de ejemplo de Node.js local. También podría usarhttps://localhost:4400para el servicio Ripple o alguna otra dirección URL, según cómo esté configurada la aplicación.En la parte superior de la página, haga clic en Lectura/escritura y, luego, haga clic en PUT para guardar las actualizaciones.
También debe agregar las mismas direcciones URL de bucle invertido a la configuración de la lista de permitidos de CORS:
- Vuelva a Azure Portal.
- Vaya al back-end de la aplicación móvil.
- Haga clic en CORS en el menú API.
- Escriba cada dirección URL en el cuadro de texto Orígenes permitidos vacío. Se crea un nuevo cuadro de texto.
- Haga clic en GUARDAR
Cuando el back-end se actualice, podrá usar las nuevas direcciones URL de bucle invertido en la aplicación.