Utilisation de la bibliothèque cliente JavaScript pour Azure Mobile Apps
Vue d'ensemble
Ce guide indique le déroulement de scénarios courants dans le cadre de l’utilisation du dernier Kit de développement logiciel (SDK) JavaScript pour Azure Mobile Apps. Si vous ne connaissez pas Azure Mobile Apps, consultez d’abord la section Démarrage rapide d’Azure Mobile Apps pour créer un backend et créer une table. Dans ce guide, nous nous concentrons sur l’utilisation du backend mobile dans les applications web HTML/JavaScript.
Plateformes prises en charge
Nous limitons la prise en charge aux versions actuelles ainsi qu’aux dernières versions des principaux navigateurs : Google Chrome, Microsoft Edge, Microsoft Internet Explorer et Mozilla Firefox. Le Kit de développement logiciel (SDK) devrait fonctionner avec n’importe quel navigateur relativement récent.
Le package est distribué comme un module JavaScript universel et prend donc en charge les format Globals, AMD et CommonJS.
Configuration et prérequis
Ce guide part du principe que vous avez créé un serveur principal avec une table. Ce guide suppose que la table a le même schéma que les tables dans ces didacticiels.
Installez le Kit de développement logiciel (SDK) JavaScript Azure Mobile Apps à partir de la commande npm :
npm install azure-mobile-apps-client --save
La bibliothèque peut également être utilisée en tant que module ES2015, au sein d'environnements CommonJS tels que Browserify et Webpack, et en tant que bibliothèque AMD. Par exemple :
// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';
Vous pouvez également utiliser une version du Kit de développement logiciel (SDK) avant génération en téléchargeant directement à partir de notre CDN :
<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>
Créer une connexion cliente
Créez une connexion cliente en créant un objet WindowsAzure.MobileServiceClient . Remplacez appUrl par l’URL de votre application mobile.
var client = WindowsAzure.MobileServiceClient(appUrl);
Utiliser des tables
Pour accéder aux données ou les mettre à jour, créez une référence à la table principale. Remplacez tableName par le nom de votre table.
var table = client.getTable(tableName);
Une fois que vous disposez d’une référence de table, vous pouvez continuer à utiliser votre table :
Guide pratique pour interroger une référence de table
Une fois que vous disposez d’une référence de table, vous pouvez l’utiliser pour rechercher des données sur le serveur. Les requêtes sont effectuées dans un langage de type LINQ. Pour retourner toutes les données de la table, utilisez le code suivant :
/**
* 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);
La fonction success est appelée avec les résultats. Ne recourez pas à for (var i in results) dans la fonction success, car cette action entraîne une itération sur les informations contenues dans les résultats quand d’autres fonctions de requête (telles que .includeTotalCount()) sont utilisées.
Pour plus d’informations sur la syntaxe de requête, consultez la [documentation de l’objet Query].
Filtrage des données sur le serveur
Vous pouvez utiliser une clause where sur la référence de table :
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
Vous pouvez également utiliser une fonction qui filtre l’objet. Dans ce cas, la variable this est affectée à l’objet en cours de filtrage. Le code suivant est équivalent à l’exemple précédent sur le plan fonctionnel :
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
Pagination des données
Utilisez les méthodes take() et skip(). Par exemple, si vous souhaitez fractionner la table en enregistrements de 100 lignes :
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
}
}
}
La méthode .includeTotalCount() est utilisée pour ajouter un champ totalCount à l’objet results. Le champ totalCount est rempli avec le nombre total d’enregistrements qui est retourné si aucune pagination n’est utilisée.
Vous pouvez ensuite utiliser la variable pages et des boutons d’interface utilisateur pour fournir une liste de pages ; utilisez loadPage() pour charger les nouveaux enregistrements pour chaque page. Implémentez la mise en cache pour accélérer l’accès aux enregistrements qui ont déjà été chargés.
Procédure : renvoi de données triées
Utilisez les méthodes de requête .orderBy() ou .orderByDescending() :
table
.orderBy('name')
.read()
.then(success, failure);
Pour plus d’informations sur l’objet Query, consultez la [documentation de l’objet Query].
Guide pratique pour insérer des données
Créez un objet JavaScript avec la date appropriée et appelez table.insert() de façon asynchrone :
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
Une fois l’insertion correctement effectuée, l’élément inséré est retourné avec les champs supplémentaires qui sont nécessaires pour les opérations de synchronisation. Mettez à jour votre propre cache avec ces informations en vue des mises à jour ultérieures.
Le Kit de développement logiciel (SDK) de serveur Node.js Azure Mobile Apps prend en charge le schéma dynamique à des fins de développement. Le schéma dynamique vous permet d’ajouter des colonnes à la table en les spécifiant dans une opération d’insertion ou de mise à jour. Nous vous recommandons de désactiver le schéma dynamique avant de déplacer votre application vers un environnement de production.
Guide pratique pour modifier des données
Comme dans le cas de la méthode .insert(), vous devez créer un objet de mise à jour, puis appeler .update(). L’objet de mise à jour doit contenir l’ID de l’enregistrement à mettre à jour, obtenu au moment de la lecture de l’enregistrement ou de l’appel de .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);
Guide pratique pour supprimer des données
Pour supprimer un enregistrement, appelez la méthode .del(). Transmettez l’ID d’une référence d’objet :
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Guide pratique pour authentifier les utilisateurs
Azure App Service prend en charge l’authentification et l’autorisation des utilisateurs d’applications par le biais de divers fournisseurs d’identité externes : Facebook, Google, compte Microsoft et Twitter. Vous pouvez définir des autorisations sur les tables pour limiter l'accès à certaines opérations aux seuls utilisateurs authentifiés. Vous pouvez également utiliser l’identité des utilisateurs authentifiés pour implémenter des règles d’autorisation dans les scripts serveur. Pour plus d'informations, consultez la page Prise en main de l'authentification .
Deux flux d’authentification sont pris en charge : un flux serveur et un flux client. Le flux serveur fournit l'authentification la plus simple, car il repose sur l'interface d'authentification Web du fournisseur. Le flux client permet une intégration approfondie avec les fonctionnalités propres aux appareils, telles que l'authentification unique, car il repose sur des Kits de développement logiciel (SDK) propres aux fournisseurs.
Procédure : s’authentifier auprès d’un fournisseur (flux de serveur)
Pour que Mobile Apps gère le processus d’authentification dans votre application, vous devez inscrire votre application auprès de votre fournisseur d’identité. Ensuite, dans Azure App Service, vous devez configurer l’ID d’application et le secret fournis par votre fournisseur. Pour plus d'informations, consultez le didacticiel Ajout de l'authentification à votre application.
Une fois que vous avez inscrit votre fournisseur d'identité, appelez la méthode .login() avec le nom de votre fournisseur. Par exemple, pour vous connecter avec Facebook, utilisez le code suivant :
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Les valeurs valides pour le fournisseur sont « aad », « facebook », « google », « microsoftaccount » et « twitter ».
Notes
L’authentification Google ne fonctionne pour le moment pas via le flux serveur. Pour s’authentifier auprès de Google, vous devez utiliser une méthode gérée par le client.
Dans ce cas, Azure App Service gère le flux d’authentification OAuth 2.0. Il affiche la page de connexion du fournisseur sélectionné et génère un jeton d’authentification App Service après avoir établi une connexion avec le fournisseur d’identité. La fonction de connexion, quand elle est utilisée, renvoie un objet JSON qui expose l’ID utilisateur et le jeton d’authentification App Service dans les champs userId et authenticationToken, respectivement. Ce jeton peut être mis en cache et réutilisé jusqu'à ce qu'il arrive à expiration.
Guide pratique pour s’authentifier auprès d’un fournisseur (flux client)
Votre application peut également contacter le fournisseur d’identité de manière indépendante, puis fournir le jeton renvoyé à App Service à des fins d’authentification. Le flux client permet de proposer l'authentification unique aux utilisateurs ou de récupérer d'autres données utilisateur auprès du fournisseur d'identité.
Exemple de base de l’authentification sociale
Cet exemple utilise le SDK client Facebook pour l'authentification :
client.login(
"facebook",
{"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Cet exemple part du principe que le jeton fourni par le Kit de développement logiciel (SDK) propre au fournisseur est stocké dans une variable token.
Procédure : obtention des informations sur l’utilisateur authentifié
Les informations d’authentification peuvent être récupérées du point de terminaison /.auth/me à l’aide d’un appel HTTP avec une bibliothèque AJAX. Veillez à définir l’en-tête X-ZUMO-AUTH sur votre jeton d’authentification. Le jeton d'authentification est stocké dans client.currentUser.mobileServiceAuthenticationToken. Par exemple, pour utiliser l’API d’extraction :
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
});
L’extraction est disponible sous forme de package npm ou de téléchargement par navigateur à partir de CDNJS. Vous pouvez également utiliser jQuery ou une autre API AJAX pour extraire les informations. Les données sont reçues sous la forme d’un objet JSON.
Configurer votre Mobile App Service pour les URL de redirection externes.
Plusieurs types d’applications JavaScript utilisent une fonctionnalité de bouclage pour gérer les flux d’interface utilisateur OAuth. Ces fonctionnalités sont les suivantes :
- Exécuter votre service en local
- Utilisation de Live Reload avec l’infrastructure Ionic
- Redirection vers le App Service pour authentification.
L’exécution locale peut entraîner des problèmes car, par défaut, l’authentification d’App Service est uniquement configurée pour autoriser l’accès à partir du serveur principal de votre application mobile. Utilisez la procédure suivante pour modifier les paramètres d’App Service afin d’activer l’authentification lors de l’exécution locale du serveur :
Connectez-vous au portail Azure
Accédez à votre backend d’application mobile.
Sélectionnez Explorateur de ressources dans le menu OUTILS DE DÉVELOPPEMENT.
Cliquez sur Aller pour ouvrir l’Explorateur de ressources pour votre application mobile principale dans une fenêtre ou un nouvel onglet.
Développez le nœud config>authsettings pour votre application.
Cliquez sur le bouton Modifier pour activer la modification de la ressource.
Trouvez l’élément allowedExternalRedirectUrls , qui doit être null. Ajoutez vos URL dans un tableau :
"allowedExternalRedirectUrls": [ "https://localhost:3000", "https://localhost:3000" ],Remplacez les URL dans le tableau par les URL de votre service ; dans cet exemple,
https://localhost:3000pour l’exemple de service Node.js local. Vous pouvez également utiliserhttps://localhost:4400pour le service Ripple ou d’autres URL, selon la configuration de votre application.En haut de la page, cliquez sur Lecture/Écriture, puis sur PUT pour enregistrer vos mises à jour.
Vous devez également ajouter les mêmes URL de bouclage aux paramètres de liste verte CORS :
- Revenez au Portail Azure.
- Accédez à votre backend d’application mobile.
- Cliquez sur CORS dans le menu API.
- Saisissez chaque URL dans la zone de texte Origines autorisées vide. Une zone de texte est créée.
- Cliquez sur ENREGISTRER
Après que le serveur principal sera mis à jour, vous serez en mesure d’utiliser les nouvelles URL de bouclage dans votre application.