Nous examinons une approche moderne permettant de transférer en toute sécurité du code frontal vers le nuage en utilisant une approche sans serveur, en passant par deux exemples.
Le code frontal est intrinsèquement peu sûr. Oui, vous pouvez modifier votre code avec quelque chose comme UglifyJS ou utiliser un outil plus perfectionné d’obscurcissement comme Jscrambler mais à la fin de la journée, la nature publique de front-nd code signifie qu'il est accessible aux utilisateurs nuisibles.
La solution éprouvée à ce problème consiste à transférer du code sensible sur le serveur, ce qui fonctionne, mais peut prendre beaucoup de temps, en particulier dans les organisations où l'infrastructure côté serveur est une Désordre délicat de code Java, .NET et SAP qui a évolué au cours de nombreuses décennies.
Dans cet article, nous examinons une approche moderne de la migration du code frontal vers le nuage à l'aide d'un serveur sans serveur . approche. Nous allons examiner deux exemples: l'un dans lequel vous allez masquer une clé d'API tierce dans une fonction sans serveur et l'autre dans lequel vous déplacerez un algorithme JavaScript dans le cloud.
Commençons par là.
Scénario 1: Masquage d'une clé d'API tierce
Pour notre premier scénario, supposons que vous travaillez sur une application avec un écran indiquant le temps qu'il fait dans l'emplacement de l'utilisateur.
C’est un scénario dans lequel une approche sans serveur fonctionne très bien. En exploitant le cloud, vous peut rapidement et facilement déplacer cette fonctionnalité hors de votre code côté client. Vous pouvez non seulement déplacer votre clé vers un emplacement sûr, vous disposez également d'une fonction cloud sur un serveur que vous n'avez pas besoin de gérer et vous disposez d'une fonction que vous pouvez utiliser pour plusieurs applications.
Il existe un certain nombre de différents fournisseurs sans serveur, mais pour les exemples de cet article, nous utiliserons Progress Kinvey . Kinvey est une plate-forme sans serveur à haute productivité qui facilite la création de tout, des fonctions rapides sans serveur pour masquer les clés d'API aux scénarios plus avancés sans serveur que nous verrons plus loin dans cet article.
NOTE : Nouveau sur Kinvey? Créez un compte gratuit et suivez les étapes décrites dans cet article
Création de votre première fonction sans serveur
Après avoir créé un compte Kinvey et créé une application , vous verrez un tableau de bord qui ressemble à l’image ci-dessous. Commencez par cliquer sur «Points de terminaison personnalisés», qui est le moyen le plus simple pour démarrer sans serveur dans Kinvey.
À l'écran suivant, cliquez sur le bouton ADD AN ENDPOINT attribuez au terminal un nom «WeatherWrapper», sélectionnez Editeur de code puis cliquez sur . ] Bouton Créer un point d'arrivée .
const Kinvey = require ("kinvey-nativescript-sdk");
Kinvey.CustomEndpoint.execute ("WeatherWrapper", {})
.then ((data) => {
console.log (données); // Ceci enregistre votre clé API
})
Maintenant que vous avez votre première première fonction sans serveur en place, allons un peu plus loin pour vous donner une idée de tout ce qui est possible dans ces fonctions sans serveur.
Appels HTTP dans des fonctions sans serveur
Pour que vos applications puissent faire une demande HTTP POST afin d’obtenir votre clé d’API OpenWeatherMap, faites ensuite une deuxième demande HTTP pour qu’elles touchent OpenWeatherMap pour obtenir des données météorologiques. Bien que cela fonctionne, vous pouvez simplifier les choses pour vos applications en plaçant tout l'appel à OpenWeatherMap dans votre fonction sans serveur.
Pour ce faire, il vous suffit de revenir à l'éditeur de points de terminaison personnalisés dans Kinvey, sélectionnez votre «WeatherWrapper» et remplacez le code actuel par le code suivant:
function onRequest (demande, réponse, modules) {
// Pour tester cela, vous pouvez vous inscrire pour un OpenWeatherMap gratuit.
// Clé API sur https://openweathermap.org.
var appId = "OPEN_WEATHER_MAP_KEY";
var url = "https://api.openweathermap.org/data/2.5/weather?APPID=" + appId +
"& units = imperial & lat =" + request.body.lat +
"& lon =" + request.body.long;
modules.request.get (url, fonction (err, résultat) {
response.body = result;
response.complete ();
});
}
Ce code s'attend à ce qu'il y ait des paramètres lat et long dans le corps de la demande, formate les données si nécessaire, appelle directement l'API OpenWeatherMap, puis renvoie le résultat dans la réponse. body.
Pour tester votre fonction mise à jour, revenez à la console d'API Kinvey, puis sélectionnez «POST» et le noeud final «WeatherWrapper» dans les deux menus déroulants (exactement comme vous l'aviez fait la dernière fois que vous avez testé ce noeud final). Cette fois, incluez un corps de requête qui inclut les deux paramètres lat et longs comme indiqué dans l'image ci-dessous.
Assez cool hein? Vous pouvez essayer ce code par vous-même dans cet exemple complet d'application météo qui utilise la fonction de cloud que vous venez d'écrire. J'espère que cela vous donne une idée de ce qu'une approche sans serveur permet de rendre possible. Dans cet exemple, vous avez d'abord été en mesure de masquer une clé d'API tierce derrière une fonction sans serveur. Ensuite, vous avez étendu cette fonction pour qu'elle frappe directement le HTTP d'une API tierce, vous offrant ainsi une fonction utilitaire sécurisée que vous pouvez utiliser dans plusieurs applications. Et nous commençons tout juste. Passons maintenant à un moyen plus avancé de passer des appels sans serveur. Pour notre deuxième scénario, supposons que vous travaillez pour une grande société financière et que vous soyez prêt à le dévoiler. une nouvelle application de budgétisation appelée BudgetScore. Bien que cette fonction soit simple, elle attend une collection de données de transaction, ce qui la rend déjà plus complexe que notre exemple précédent. Et dans le monde réel, il est probable qu'un algorithme comme celui-ci doit extraire des informations de différentes sources de données, et peut-être de différentes technologies. Pour effectuer des tâches plus avancées sans serveur, Kinvey propose une fonctionnalité appelée Flex Services, qui sont essentiellement petites bibliothèques Node.js qui résident et fonctionnent dans l’infrastructure cloud de Kinvey. Voyons comment en configurer un pour votre application BudgetScore. Dans Kinvey, vous créez et déployez des services Flex au moyen de la Kinvey CLI . Par conséquent, votre première étape consiste à installer le Kinvey CLI à partir de npm. NOTE : Node.js doit être installé sur votre machine de développement pour que la commande ci-dessus fonctionne. Sinon, installez-le à partir du site Node.js . À partir de là, créez un nouveau dossier contenant le code de votre nouveau service. Ensuite, utilisez la commande Ensuite, utilisez la commande ci-dessous pour installer le kit de développement Kinvey Flex, qui contient le code nécessaire à l’enregistrement de ce service sur la console dorsale de Kinvey. Enfin, créez un fichier La plupart du code que vous voyez ici est le passe-partout pour tout service Flex que vous écrivez avec Kinvey. L'essentiel à noter ici est l'appel CONSEIL : Vous pouvez en savoir plus sur Les API de service Flex Kinvey sur le Kinvey DevCenter . Maintenant que vous avez le code standard, vous devez ensuite enregistrer le service Flex dans le backend de Kinvey Console. 19659003] Pour ce faire, dans votre console Kinvey sélectionnez l'onglet Catalogue de services en haut de la page, puis cliquez sur le bouton Ajouter un service . 19659003] Le déploiement prend environ une minute et vous pouvez vérifier son statut à l'aide de la commande Une fois l'opération terminée, voyons comment utiliser ce nouveau service Flex dans une application. Procédure pour utiliser un Le service Flex dans Kinvey correspond presque exactement aux scénarios de logique métier que vous avez utilisés dans le premier scénario de cet article. Dans la console Web Kinvey, vous souhaiterez revenir au menu Custom Endpoints et à nouveau cliquer sur le bouton ADD AN ENDPOINT . Mais prenons un peu de recul et voyons la situation dans son ensemble. En quelques minutes à peine, vous avez créé une bibliothèque de nœuds sécurisée, installée dans le nuage, qui vous offre toutes sortes de possibilités. En premier lieu, vous avez satisfait à l'exigence de déplacer votre code confidentiel vers le nuage sans avoir à le réécrire dans un langage côté serveur plus traditionnel tel que .NET ou Java. Mais ce n'est que le début. Avec Kinvey Flex Services, vous disposez d’un environnement nodal entièrement fonctionnel, ce qui signifie que vous pouvez installer des modules npm, réutiliser le code JavaScript et architecturer vos services comme vous le souhaitez. Lorsque vous avez terminé, vous pouvez déployer et gérer votre service en dehors de vos applications, ce qui signifie que vous pouvez mettre à jour vos services de production sans avoir à redéployer vos applications. Et bien plus encore! Avec un service Kinvey Flex, vous pouvez accéder à un certain nombre d’autres fonctionnalités de Kinvey, telles que sa capacité à accéder aux données de différents systèmes. Par exemple, une fois que vous vous êtes connecté à vos données existantes voici un service Flex qui lit les données de transaction et utilise l'algorithme décrit plus haut dans cet article: Dans l’ensemble, Kinvey Flex Services permet de sécuriser votre code source dans le cloud, tout en vous offrant la possibilité d’en faire beaucoup plus. Pour voir le service Flex ci-dessus en action, consultez cette application complète de BudgetScore . CONSEIL : Pour avoir une idée de ce qui est possible, voir l'intro de Brian Rinaldi aux Services Flex ainsi que sa collection d'exemples de services flexibles sur GitHub . Vous pouvez également en savoir plus sur la sécurité dans Kinvey avec cette vue d'ensemble de la sécurité de la plate-forme Kinvey . Il n'a jamais été aussi facile de sécuriser votre code frontal en le déplaçant vers le cloud. Les fournisseurs sans serveur facilitent non seulement le déplacement de votre code, mais également l'exploitation de puissantes fonctionnalités dorsales, telles que la possibilité de faire appel à des API tierces. Le passage à une approche sans serveur vous offre un certain nombre d'avantages supplémentaires, tels que avoir à vous soucier de la maintenance des serveurs, ce qui vous donne la possibilité d'accéder à votre code dans des applications et des plates-formes, et de le déployer indépendamment des déploiements d'applications. Kinvey est une plate-forme sans serveur à haute productivité, conçue pour accélérer votre développement. de nombreuses façons différentes. Pour essayer sans serveur avec Kinvey, commencez dès aujourd'hui à l'adresse progress.com/kinvey . 
Scénario 2: Déplacement d'un algorithme JavaScript
Création de votre premier service Flex
npm install -g kinvey-cli
mkdir BudgetScore
cd BudgetScore
npm init pour créer un fichier de configuration package.json pour votre service. La commande vous posera un certain nombre de questions, mais pour l'instant, n'hésitez pas à accepter les valeurs par défaut. npm init
npm install --save kinvey-flex-sdk
index.js et donnez-lui le code suivant, qui renvoie un nombre codé en dur sous forme de chaîne. const sdk = require ('kinvey-flex-sdk' )
sdk.service ((err, flex) => {
fonction getBudgetScore (contexte, complet, modules) {
complete (). setBody ({
score: '80'
}).terminé();
}
flex.functions.register ('getBudgetScore', getBudgetScore);
});
flex.functions.register ('getBudgetScore') car c'est ce qui enregistre le service avec le backend de Kinvey.
Déploiement de votre service
Kinvey flex status (recherchez un deploymentStatus de COMPLETE ). Utilisation de votre service
const sdk = require ('kinvey-flex-sdk ');
fonction getTransactions (modules) {
renvoyer une nouvelle promesse ((résoudre, rejeter) => {
const store = modules.dataStore ({useUserContext: false});
const collection = store.collection ('Transactions');
requête const = new modules.Query ();
collection.find (query, (err, result)) => {
si (err) {
rejeter (err);
} autre {
résoudre (résultat);
}
});
});
}
fonction Determine (transactions) {
score var = 100;
transactions.forEach ((transaction) => {
if (transaction.amount 5) {
score + = 10;
}
if (transaction.category === "restaurant") {
score - = 5;
}
});
renvoie score.toString ();
}
sdk.service ((err, flex) => {
fonction getBudgetScore (contexte, complet, modules) {
getTransactions (modules) .then ((transactions) => {
complete (). setBody ({
score: Determine (transactions)
}).terminé();
}). catch ((err) => {
complete (). setBody (nouvelle erreur (err)). runtimeError (). done ();
});
}
flex.functions.register ('getBudgetScore', getBudgetScore);
});
Conclusion
Source link