Uso de la biblioteca cliente de JavaScript para Azure Mobile Apps

2019-06-25

Información general

Esta guía le enseña a realizar escenarios comunes mediante el SDK de JavaScript más reciente para Azure Mobile Apps. Si no está familiarizado con Azure Mobile Apps, complete primero el inicio rápido de Azure Mobile Apps para crear un back-end y crear una tabla. En esta guía, nos centramos en el uso del back-end móvil en aplicaciones web HTML/JavaScript.

Plataformas compatibles

Limitamos la compatibilidad del explorador con las versiones actuales y últimas de los principales exploradores: Google Chrome, Microsoft Edge, Microsoft Internet Explorer y Mozilla Firefox. Esperamos que el SDK funcione con cualquier explorador relativamente moderno.

El paquete se distribuye como un módulo de JavaScript universal, por lo que admite formatos globales, AMD y CommonJS.

Configuración y requisitos previos

En esta guía se supone que ha creado un back-end con una tabla. En esta guía se supone que la tabla tiene el mismo esquema que las tablas de esos tutoriales.

La instalación del SDK de JavaScript de Azure Mobile Apps se puede realizar mediante el npm comando :

npm install azure-mobile-apps-client --save

La biblioteca también se puede usar como módulo ES2015, en entornos de CommonJS como Browserify y Webpack y como 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 usar una versión precompilada del SDK descargando directamente desde nuestra red CDN:

<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>

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
Modificación de datos
Eliminar datos

Cómo consultar 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 de éxito, ya que iterará sobre la información que se incluye en los resultados cuando se utilizan otras funciones de consulta (como .includeTotalCount()).

Para obtener más información sobre la sintaxis de consulta, vea 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 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);

Navegación de datos por páginas

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 retornarían si no se usa 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.

Procedimiento para 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].

Procedimiento para 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 los campos adicionales 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.

Cómo: Modificar 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);

Cómo: 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.

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 proveedor.

Cómo autenticarse 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 su proveedor de identidad, llame al método .login() con el nombre de su 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:

La autenticación de Google no funciona actualmente a través de Server Flow. Para autenticarse 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 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.

Cómo autenticar con un proveedor (Flujo del 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.

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.

Cómo: Obtener 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 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 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. También puede usar jQuery u otra API de AJAX para capturar la información. Los datos se reciben como un objeto JSON.

Cómo configurar tu Mobile App Service para URLs de redirección externas.

Varios tipos de aplicaciones de JavaScript usan una funcionalidad de bucle invertido para controlar los flujos de interfaz de usuario de OAuth. Estas funcionalidades incluyen:

Ejecución local del servicio
Uso de Live Reload con Ionic Framework
Redireccionamiento a App Service para la autenticación.

La ejecución localmente puede provocar 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. Siga estos pasos para cambiar la configuración de App Service para habilitar la autenticación al ejecutar el servidor localmente:

Inicie sesión en el Azure Portal
Navegue al backend de su aplicación móvil.
Seleccione Explorador de recursos en el menú HERRAMIENTAS DE DESARROLLO .
Haga clic en Ir para abrir el explorador de recursos para el back-end de la aplicación móvil en una nueva pestaña o ventana.
Expanda el nodo config>authsettings para la aplicación.
Haga clic en el botón Editar para habilitar la edición del recurso.
Busque el elemento allowedExternalRedirectUrls , que debe ser NULL. Agregue las direcciones URL en una matriz:
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Reemplace las direcciones URL de la matriz por las direcciones URL del servicio, que en este ejemplo es https://localhost:3000 para el servicio de ejemplo de Node.js local. También puedes usar https://localhost:4400 para el servicio Ripple u otra dirección URL, dependiendo de cómo esté configurada la aplicación.
En la parte superior de la página, haga clic en Lectura y escritura y, a continuación, haga clic en PUT para guardar las actualizaciones.

También debe agregar las mismas direcciones URL de bucle invertido a la configuración de lista de permitidos de CORS:

Vuelva al portal de Azure.
Vaya al panel de administración de su 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

Después de las actualizaciones del backend, podrás usar las nuevas direcciones URL de bucle invertido en tu aplicación.

Compartir a través de