Comment construire un backend pour Blazor ?

introduction dans ce tutoriel, vous apprendrez à construire un backend complet pour une application blazor en utilisant back4app nous allons passer en revue l'intégration des fonctionnalités essentielles de back4app telles que la gestion de base de données, les fonctions cloud code, les api rest et graphql, l'authentification des utilisateurs et les requêtes en temps réel (live queries) pour créer un backend sécurisé, évolutif et robuste qui communique sans problème avec votre frontend blazor tirer parti des services backend robustes de back4app avec blazor, un framework asp net core pour construire des interfaces web interactives en utilisant c#, permet aux développeurs d'accélérer le développement backend que vous construisiez une application blazor server ou une application blazor webassembly, l'intégration transparente avec back4app peut réduire considérablement le temps de développement tout en garantissant une logique métier côté serveur de haute qualité à la fin de ce tutoriel, vous aurez construit une structure backend sécurisée adaptée à une application web full stack utilisant blazor vous obtiendrez des informations sur la façon de gérer les opérations de données, d'appliquer des contrôles de sécurité et de mettre en œuvre des fonctions cloud, rendant votre application web blazor robuste et évolutive prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app et un nouveau projet back4app commencer avec back4app https //www back4app com/docs/get started/new parse app si vous n'avez pas de compte, vous pouvez en créer un gratuitement suivez le guide ci dessus pour préparer votre projet environnement de développement blazor de base vous pouvez le configurer en installant le dernier sdk net depuis microsoft https //dotnet microsoft com/download et en créant un nouveau projet blazor en utilisant des modèles comme dotnet new blazorserver ou dotnet new blazorwasm net sdk (version 6 ou supérieure) installé assurez vous d'avoir le sdk net pour construire et exécuter des applications blazor familiarité avec c# et les concepts blazor documentation officielle de blazor https //docs microsoft com/en us/aspnet/core/blazor/?view=aspnetcore 6 0 si vous êtes nouveau dans blazor, consultez la documentation officielle ou un tutoriel pour débutants avant de commencer assurez vous d'avoir ces prérequis avant de commencer pour garantir une expérience de tutoriel fluide étape 1 – configuration du projet back4app créer un nouveau projet la première étape pour construire votre backend blazor sur back4app consiste à créer un nouveau projet si vous n'en avez pas encore créé un, suivez ces étapes connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” dans votre tableau de bord back4app donnez un nom à votre application (par exemple, “blazor backend tutorial”) une fois le projet créé, vous le verrez listé dans votre tableau de bord back4app ce projet sera la base de toutes les configurations backend discutées dans ce tutoriel connecter le sdk parse back4app s'appuie sur la plateforme parse pour gérer vos données, fournir des fonctionnalités en temps réel, gérer l'authentification des utilisateurs, et plus encore connecter votre application blazor à back4app implique d'installer le sdk parse pour net et de l'initialiser avec les identifiants de votre tableau de bord back4app récupérez vos clés parse dans votre tableau de bord back4app, accédez à la section “paramètres de l'application” ou “sécurité & clés” de votre application pour trouver votre id d'application et net key vous trouverez également l' url du serveur parse (souvent au format https //parseapi back4app com ) installez le sdk parse dans votre projet blazor dotnet add package parse initialisez parse dans votre application blazor typiquement, vous configureriez l'initialisation dans le program cs ou une classe de service dédiée program cs using parse; var builder = webapplication createbuilder(args); // initialiser parse parseclient initialize(new parseclient configuration { applicationid = "your application id", windowskey = "your dotnet key", server = "https //parseapi back4app com" }); var app = builder build(); // reste de votre configuration cette configuration garantit que chaque fois que vous utilisez parse dans votre application blazor, il est préconfiguré pour se connecter à votre instance back4app spécifique en complétant cette étape, vous avez établi une connexion sécurisée entre votre frontend blazor et le backend back4app, ouvrant la voie à l'exécution d'opérations sur la base de données, la gestion des utilisateurs, et plus encore étape 2 – configuration de la base de données sauvegarde et requête de données avec votre projet back4app configuré et le sdk parse intégré dans votre application blazor, vous pouvez maintenant commencer à sauvegarder et récupérer des données la manière la plus simple de créer un enregistrement est d'utiliser le parseobject classe somedataservice cs using parse; using system threading tasks; public class somedataservice { public async task\<parseobject> createtodoitemasync(string title, bool iscompleted) { var todo = new parseobject("todo"); todo\["title"] = title; todo\["iscompleted"] = iscompleted; try { await todo saveasync(); console writeline("todo saved successfully " + todo objectid); return todo; } catch (exception ex) { console writeline("error saving todo " + ex message); return null; } } public async task\<ilist\<parseobject>> fetchtodosasync() { var query = new parsequery\<parseobject>("todo"); try { var results = await query findasync(); console writeline("fetched todo items " + results count); return results; } catch (exception ex) { console writeline("error fetching todos " + ex message); return null; } } } alternativement, vous pouvez utiliser les points de terminaison de l'api rest de back4app pour les opérations conception de schéma et types de données par défaut, parse permet la création de schémas à la volée , mais vous pouvez également définir vos classes et types de données dans le tableau de bord back4app pour plus de contrôle accédez à la section “base de données” dans votre tableau de bord back4app créez une nouvelle classe (par exemple, “todo”) et ajoutez des colonnes pertinentes, telles que titre (string) et estcomplété (boolean) back4app prend également en charge divers types de données chaîne , nombre , booléen , objet , date , fichier , pointeur, tableau, relation , geopoint , et polygone vous pouvez choisir le type approprié pour chaque champ si vous le souhaitez, vous pouvez également laisser parse créer automatiquement ces colonnes lorsque vous enregistrez un objet pour la première fois depuis votre application blazor back4app propose un agent ia qui peut vous aider à concevoir votre modèle de données ouvrez l'agent ia depuis votre tableau de bord d'application ou dans le menu décrivez votre modèle de données dans un langage simple (par exemple, “veuillez créer une nouvelle application todo sur back4app avec un schéma de classe complet ”) laissez l'agent ia créer le schéma pour vous utiliser l'agent ia peut vous faire gagner du temps lors de la configuration de votre architecture de données et garantir la cohérence de votre application données relationnelles si vous avez des données relationnelles par exemple, un objet catégorie qui pointe vers plusieurs éléments todo vous pouvez utiliser pointeurs ou relations dans parse le processus est similaire à reactjs mais en utilisant des objets net somedataservice cs (suite) public async task\<parseobject> createtaskforcategoryasync(string categoryobjectid, string title) { var todo = new parseobject("todo"); // créer un pointeur vers la catégorie var categorypointer = parseobject createwithoutdata("category", categoryobjectid); todo\["title"] = title; todo\["category"] = categorypointer; try { await todo saveasync(); return todo; } catch (exception ex) { console writeline("erreur lors de la création de la tâche avec la relation de catégorie " + ex message); return null; } } lors de la requête, incluez les données du pointeur somedataservice cs (continuation) public async task\<ilist\<parseobject>> fetchtodoswithcategoryasync() { var query = new parsequery\<parseobject>("todo") include("category"); try { var todoswithcategory = await query findasync(); return todoswithcategory; } catch (exception ex) { console writeline("error fetching todos with category " + ex message); return null; } } requêtes en direct pour des mises à jour en temps réel dans une application blazor server, envisagez d'utiliser la connexion signalr pour les requêtes en direct bien que le sdk net de parse prenne en charge les requêtes en direct, les intégrer directement dans une application blazor peut nécessiter une configuration supplémentaire avec signalr pour la communication en temps réel activer les requêtes en direct dans votre tableau de bord back4app sous les paramètres du serveur assurez vous que « requêtes en direct » est activé configurer le client de requête en direct dans net si nécessaire cependant, pour les applications blazor, tirer parti de signalr pourrait être plus idiomatique pour les connexions côté serveur en raison de la complexité de la configuration des requêtes en direct dans blazor et des limitations potentielles du sdk net de parse dans blazor webassembly, vous devrez peut être mettre en œuvre un service côté serveur qui relie les requêtes en direct de parse avec les clients signalr étape 3 – application de la sécurité avec les acl et les clp mécanisme de sécurité back4app back4app prend la sécurité au sérieux en fournissant des listes de contrôle d'accès (acl) et des permissions au niveau de la classe (clp) ces fonctionnalités vous permettent de restreindre qui peut lire ou écrire des données sur une base par objet ou par classe, garantissant que seuls les utilisateurs autorisés peuvent modifier vos données listes de contrôle d'accès (acls) un acl est appliqué à des objets individuels pour déterminer quels utilisateurs, rôles ou le public peuvent effectuer des opérations de lecture/écriture par exemple somedataservice cs (acl example) public async task\<parseobject> createprivatetodoasync(string title, parseuser owneruser) { var todo = new parseobject("todo"); todo\["title"] = title; // create an acl granting read/write access only to the owner var acl = new parseacl(owneruser); acl publicreadaccess = false; acl publicwriteaccess = false; todo acl = acl; try { await todo saveasync(); return todo; } catch (exception ex) { console writeline("error saving private todo " + ex message); return null; } } lorsque vous enregistrez l'objet, il a un acl qui empêche quiconque, sauf l'utilisateur spécifié, de le lire ou de le modifier permissions au niveau de la classe (clps) les clps régissent les permissions par défaut d'une classe entière, telles que si la classe est lisible ou modifiable publiquement, ou si seuls certains rôles peuvent y accéder allez sur votre tableau de bord back4app , sélectionnez votre application et ouvrez la base de données section sélectionnez une classe (par exemple, “todo”) ouvrez l'onglet des permissions au niveau de la classe configurez vos paramètres par défaut, tels que “nécessite une authentification” pour la lecture ou l'écriture, ou “aucun accès” pour le public ces permissions établissent la base, tandis que les acls affinent les permissions pour des objets individuels un modèle de sécurité robuste combine généralement à la fois les clps (restrictions larges) et les acls (restrictions fines par objet) pour plus d'informations, allez à directives de sécurité de l'application https //www back4app com/docs/security/parse security étape 4 – écriture et déploiement des fonctions cloud le cloud code est une fonctionnalité de l'environnement parse server qui vous permet d'exécuter du code javascript personnalisé côté serveur sans avoir besoin de gérer vos serveurs ou votre infrastructure en écrivant du cloud code, vous pouvez étendre votre backend back4app avec une logique métier supplémentaire, des validations, des déclencheurs et des intégrations qui s'exécutent de manière sécurisée et efficace sur le parse server comment ça fonctionne lorsque vous écrivez du cloud code, vous placez généralement vos fonctions javascript, déclencheurs et tous les modules npm requis dans un main js (ou app js ) fichier ce fichier est ensuite déployé dans votre projet back4app, qui s'exécute dans l'environnement parse server puisque ces fonctions et déclencheurs s'exécutent sur le serveur, vous pouvez leur faire confiance pour gérer une logique confidentielle, traiter des données sensibles ou effectuer des appels api réservés au backend des processus que vous ne voudriez peut être pas exposer directement au client tout le cloud code pour votre application back4app s'exécute à l'intérieur du parse server géré par back4app, donc vous n'avez pas à vous soucier de la maintenance des serveurs, de la mise à l'échelle ou de l'approvisionnement chaque fois que vous mettez à jour et déployez votre fichier main js, le serveur parse en cours d'exécution est mis à jour avec votre dernier code structure du fichier main js un main js typique pourrait contenir instructions require pour tous les modules nécessaires (packages npm, modules node intégrés ou autres fichiers de code cloud) définitions de fonctions cloud utilisant parse cloud define() déclencheurs tels que parse cloud beforesave() , parse cloud aftersave() , etc modules npm que vous avez installés (si nécessaire) main js // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); avec la possibilité d'installer et d'utiliser des modules npm, le code cloud devient incroyablement flexible, vous permettant de vous intégrer à des api externes, d'effectuer des transformations de données ou d'exécuter une logique complexe côté serveur cas d'utilisation typiques logique métier par exemple, agréger des données pour l'analyse ou effectuer des calculs avant de les enregistrer dans la base de données validations de données assurez vous que certains champs sont présents ou qu'un utilisateur a les bonnes autorisations avant d'enregistrer ou de supprimer un enregistrement déclencheurs effectuer des actions lorsque les données changent (par exemple, envoyer une notification lorsqu'un utilisateur met à jour son profil) intégrations se connecter à des api ou services tiers application de la sécurité valider et assainir les entrées pour appliquer la sécurité avant d'effectuer des opérations sensibles déployez votre fonction voici une simple fonction cloud code qui calcule la longueur d'une chaîne de texte envoyée par le client main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); déploiement via le back4app cli https //www back4app com/docs/local development/parse cli 1 installer le cli pour linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash pour windows téléchargez le b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe fichier depuis la page des versions 2 configurez votre clé de compte https //www back4app com/docs/local development/parse cli#f cxi b4a configure accountkey 3 déployez votre code cloud b4a deploy déploiement via le tableau de bord dans le tableau de bord de votre application, allez à cloud code > functions copiez/collez la fonction dans l'éditeur main js cliquez sur déployer appeler votre fonction depuis blazor en utilisant le sdk net de parse somedataservice cs (calling function) public async task\<int?> gettextlengthasync(string text) { try { var result = await parsecloud callfunctionasync\<dictionary\<string, object>>("calculatetextlength", new dictionary\<string, object> { { "text", text } }); if(result != null && result containskey("length")) return convert toint32(result\["length"]); return null; } catch(exception ex) { console writeline("error calling cloud function " + ex message); return null; } } vous pouvez également l'appeler via rest ou graphql comme indiqué dans le tutoriel reactjs étape 5 – configuration de l'authentification des utilisateurs authentification des utilisateurs dans back4app back4app utilise la classe parse user comme base pour l'authentification par défaut, parse gère le hachage des mots de passe, les jetons de session et le stockage sécurisé cela signifie que vous n'avez pas à configurer manuellement des flux de sécurité complexes configuration de l'authentification des utilisateurs dans une application blazor, vous pouvez créer un nouvel utilisateur avec authservice cs using parse; using system threading tasks; public class authservice { public async task signupuserasync(string username, string password, string email) { var user = new parseuser() { username = username, password = password, email = email }; try { await user signupasync(); console writeline("user signed up successfully!"); } catch (exception ex) { console writeline("error signing up user " + ex message); } } public async task loginuserasync(string username, string password) { try { var user = await parseuser loginasync(username, password); console writeline("user logged in " + user username); } catch (exception ex) { console writeline("error logging in user " + ex message); } } } gestion des sessions après une connexion réussie, parse crée un jeton de session qui est stocké dans l'objet utilisateur dans votre application blazor, vous pouvez accéder à l'utilisateur actuellement connecté somecomponent razor cs var currentuser = parseuser currentuser; if (currentuser != null) { console writeline("currently logged in user " + currentuser username); } else { console writeline("no user is logged in"); } parse gère automatiquement les sessions basées sur des jetons en arrière plan, mais vous pouvez également les gérer ou les révoquer manuellement pour se déconnecter authservice cs (logout) public async task logoutasync() { await parseuser logoutasync(); console writeline("user logged out"); } intégration de la connexion sociale back4app et parse peuvent s'intégrer avec des fournisseurs oauth populaires, tels que google ou facebook la configuration peut varier et implique souvent une configuration côté serveur ou des packages supplémentaires consultez la documentation de connexion sociale https //www back4app com/docs/platform/sign in with apple pour des instructions détaillées étant donné que les applications blazor server fonctionnent sur asp net core, vous pouvez intégrer la connexion sociale en utilisant les fournisseurs d'identité asp net core aux côtés de parse pour une authentification fluide vérification par e mail et réinitialisation du mot de passe pour activer la vérification par e mail et la réinitialisation du mot de passe accédez aux paramètres d'e mail dans votre tableau de bord back4app activez la vérification par e mail pour garantir que les nouveaux utilisateurs vérifient la propriété de leurs adresses e mail configurez l'adresse d'expédition , les modèles d'e mail et votre domaine personnalisé si désiré ces fonctionnalités améliorent la sécurité des comptes et l'expérience utilisateur en validant la propriété des e mails par les utilisateurs et en fournissant une méthode de récupération de mot de passe sécurisée étape 6 – gestion du stockage de fichiers téléchargement et récupération de fichiers parse inclut la parsefile classe pour gérer les téléchargements de fichiers, que back4app stocke en toute sécurité fileservice cs using parse; using system; using system threading tasks; public class fileservice { public async task\<string> uploadimageasync(byte\[] filedata, string filename) { var parsefile = new parsefile(filename, filedata); try { await parsefile saveasync(); console writeline("file saved " + parsefile url); return parsefile url; } catch (exception ex) { console writeline("error uploading file " + ex message); return null; } } } pour attacher le fichier à un objet fileservice cs (continued) public async task\<parseobject> createphotoobjectasync(byte\[] filedata, string filename) { var photo = new parseobject("photo"); var parsefile = new parsefile(filename, filedata); photo\["imagefile"] = parsefile; try { await photo saveasync(); return photo; } catch (exception ex) { console writeline("error creating photo object " + ex message); return null; } } récupération de l'url du fichier somecomponent razor cs var imagefile = photo get\<parsefile>("imagefile"); var imageurl = imagefile url; vous pouvez afficher cette imageurl dans vos composants blazor en le définissant comme source d'un \<img> tag sécurité des fichiers parse server fournit des configurations flexibles pour gérer la sécurité des téléchargements de fichiers utilisez des acl sur les parsefiles ou définissez des configurations au niveau du serveur selon vos besoins étape 7 – planification des tâches avec les cloud jobs cloud jobs cloud jobs dans back4app vous permet de planifier et d'exécuter des tâches de routine sur votre backend comme nettoyer les anciennes données ou envoyer un e mail récapitulatif quotidien un cloud job typique pourrait ressembler à ceci main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); déployez votre cloud code avec le nouveau job (via cli ou le tableau de bord) allez sur le tableau de bord back4app > paramètres de l'application > paramètres du serveur > tâches en arrière plan planifiez le job pour qu'il s'exécute quotidiennement ou à tout intervalle qui convient à vos besoins les cloud jobs vous permettent d'automatiser la maintenance en arrière plan ou d'autres processus périodiques sans nécessiter d'intervention manuelle étape 8 – intégration des webhooks les webhooks permettent à votre application back4app d'envoyer des requêtes http à un service externe chaque fois que certains événements se produisent c'est puissant pour s'intégrer à des systèmes tiers comme des passerelles de paiement, des outils de marketing par e mail ou des plateformes d'analyse accédez à la configuration des webhooks dans votre tableau de bord back4app > plus > webhooks, puis cliquez sur ajouter un webhook configurez un point de terminaison (par exemple, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configurez des déclencheurs pour spécifier quels événements dans vos classes back4app ou fonctions cloud code déclencheront le webhook par exemple, si vous souhaitez notifier un canal slack chaque fois qu'un nouveau todo est créé créez une application slack qui accepte les webhooks entrants copiez l'url du webhook slack dans votre tableau de bord back4app, définissez le point de terminaison sur cette url slack pour l'événement “nouvel enregistrement dans la classe todo ” vous pouvez également ajouter des en têtes http ou des charges utiles personnalisées si nécessaire vous pouvez également définir des webhooks dans le cloud code en effectuant des requêtes http personnalisées dans des déclencheurs comme beforesave, aftersave étape 9 – exploration du panneau d'administration back4app le back4app admin app est une interface de gestion basée sur le web conçue pour les utilisateurs non techniques afin d'effectuer des opérations crud et de gérer des tâches de données courantes sans écrire de code il fournit une interface centrée sur le modèle , interface conviviale qui rationalise l'administration de la base de données, la gestion des données personnalisées et les opérations de niveau entreprise activation de l'application admin activez en allant à app dashboard > plus > admin app et en cliquant sur le bouton “activer l'application admin ” créez un premier utilisateur admin (nom d'utilisateur/mot de passe), ce qui génère automatiquement un nouveau rôle (b4aadminuser) et des classes (b4asetting, b4amenuitem et b4acustomfield) dans le schéma de votre application choisissez un sous domaine pour accéder à l'interface d'administration et complétez la configuration connectez vous en utilisant les identifiants administratifs que vous avez créés pour accéder à votre nouveau tableau de bord de l'application admin une fois activée, l'application admin back4app facilite la visualisation, l'édition ou la suppression d'enregistrements de votre base de données sans nécessiter l'utilisation directe du tableau de bord parse ou de code backend conclusion en suivant ce tutoriel complet, vous avez créé un backend sécurisé pour une application blazor sur back4app configuré une base de données avec des schémas de classe, des types de données et des relations intégré des requêtes en temps réel lorsque cela est applicable pour des mises à jour de données immédiates appliqué des mesures de sécurité en utilisant des acl et des clp pour protéger et gérer l'accès aux données implémenté des fonctions cloud code pour exécuter une logique métier personnalisée côté serveur mis en place l'authentification des utilisateurs avec prise en charge de la vérification par e mail et des réinitialisations de mot de passe géré les téléchargements de fichiers et la récupération, avec des contrôles de sécurité des fichiers en option planifié des tâches cloud pour des tâches d'arrière plan automatisées utilisé des webhooks pour s'intégrer à des services externes exploré le panneau d'administration back4app pour la gestion des données avec un frontend blazor solide et un backend back4app robuste, vous êtes maintenant bien équipé pour développer des applications web riches en fonctionnalités, évolutives et sécurisées continuez à explorer des fonctionnalités plus avancées, intégrez votre logique métier et exploitez la puissance de back4app pour vous faire gagner d'innombrables heures dans l'administration des serveurs et des bases de données bon codage ! prochaines étapes construisez une application blazor prête pour la production en étendant ce backend pour gérer des modèles de données plus complexes, des stratégies de mise en cache et des optimisations de performance intégrez des fonctionnalités avancées telles que des flux d'authentification spécialisés, un contrôle d'accès basé sur les rôles ou des api externes consultez la documentation officielle de back4app pour des plongées plus profondes dans la sécurité avancée, l'optimisation des performances et l'analyse des journaux explorez d'autres tutoriels sur les applications de chat en temps réel, les tableaux de bord iot ou les services basés sur la localisation combinez les techniques apprises ici avec des api tierces pour créer des applications complexes et réelles