Système d'authentification pour votre réseau social

introduction dans ce tutoriel, vous apprendrez à mettre en œuvre un système d'authentification complet pour votre application web de réseau social en utilisant back4app comme service backend vous construirez des fonctionnalités pour l'enregistrement des utilisateurs, la connexion, la réinitialisation du mot de passe et la gestion des sessions des fonctionnalités critiques pour toute application sociale moderne back4app est une plateforme backend as a service (baas) construite sur parse server qui permet aux développeurs de créer des applications évolutives sans gérer l'infrastructure serveur ses capacités d'authentification des utilisateurs intégrées en font un choix parfait pour mettre rapidement en œuvre des systèmes de gestion des utilisateurs sécurisés à la fin de ce tutoriel, vous aurez créé un système d'authentification entièrement fonctionnel similaire à celui utilisé dans back4gram, une application de réseau social vous mettrez en œuvre l'enregistrement des utilisateurs avec validation, une connexion sécurisée, la récupération de mot de passe et des sessions persistantes à travers l'application, offrant à vos utilisateurs une expérience fluide tout en gardant leurs comptes sécurisés projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app vous pouvez vous inscrire pour un compte gratuit sur back4app com https //www back4app com un projet back4app configuré vous pouvez apprendre à créer un nouveau projet en suivant notre guide de démarrage avec back4app https //www back4app com/docs/get started/welcome node js installé sur votre machine locale connaissances de base en javascript, react js et concepts d'api restful familiarité avec les concepts modernes de développement web (composants, gestion d'état, etc ) étape 1 – comprendre le système de gestion des utilisateurs de back4app avant de plonger dans le code, il est important de comprendre comment back4app gère la gestion des utilisateurs back4app est construit sur parse server, qui fournit une classe parse user spécialement conçue pour l'authentification la classe parse user la classe parse user dans back4app étend l'objet parse standard avec des fonctionnalités spécialisées pour l'authentification des utilisateurs elle comprend plusieurs champs intégrés nom d'utilisateur un identifiant unique pour l'utilisateur (obligatoire) mot de passe le mot de passe de l'utilisateur (obligatoire pour l'inscription mais non stocké sous forme récupérable) email l'adresse email de l'utilisateur (facultatif mais recommandé) emailvérifié un booléen indiquant si l'utilisateur a vérifié son email authdata données d'authentification pour l'authentification tierce vous pouvez également ajouter des champs personnalisés pour stocker des informations supplémentaires sur l'utilisateur, telles que des photos de profil, des biographies ou toute autre donnée spécifique à l'utilisateur gestion de session lorsqu'un utilisateur se connecte, back4app crée un jeton de session qui identifie la session de l'utilisateur ce jeton est utilisé pour authentifier les demandes suivantes sans nécessiter que l'utilisateur se reconnecte le jeton de session est géré automatiquement par le sdk parse mais peut également être contrôlé manuellement si nécessaire voici comment fonctionne le flux de session l'utilisateur fournit des identifiants (nom d'utilisateur/email et mot de passe) back4app valide les identifiants si valide, back4app crée un jeton de session le jeton est stocké localement (généralement dans localstorage ou un mécanisme similaire) le jeton est inclus dans les requêtes api suivantes pour authentifier l'utilisateur voyons comment cela est implémenté dans l'application back4gram le code d'initialisation de parse ressemble généralement à ceci // initialize parse with your back4app credentials parse initialize("your app id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; cette configuration dans l'application back4gram permet à tous les composants d'accéder au sdk parse et de faire des requêtes authentifiées une fois qu'un utilisateur se connecte fonctionnalités de sécurité back4app fournit plusieurs fonctionnalités de sécurité pour la gestion des utilisateurs stockage sécurisé des mots de passe les mots de passe ne sont jamais stockés en texte clair mais sont automatiquement hachés et salés gestion des sessions les sessions utilisateur peuvent être gérées et révoquées via le tableau de bord back4app listes de contrôle d'accès (acl) vous pouvez contrôler qui peut lire ou écrire des objets spécifiques vérification par e mail back4app peut envoyer des e mails de vérification aux utilisateurs réinitialisation du mot de passe fonctionnalité intégrée pour des réinitialisations de mot de passe sécurisées maintenant que nous comprenons les bases, passons à la configuration de notre projet projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 2 – configuration de votre projet pour démontrer comment mettre en œuvre l'authentification avec back4app, nous allons créer une version simplifiée de l'application de réseau social back4gram créer une nouvelle application react tout d'abord, créons une nouvelle application react ouvrez votre terminal et exécutez npx create react app social network auth cd social network auth installation des packages requis ensuite, nous allons installer les packages nécessaires npm install parse react router dom @chakra ui/react @emotion/react @emotion/styled framer motion ces packages fournissent parse le sdk javascript pour back4app react router dom pour le routage des pages @chakra ui/react une bibliothèque de composants pour construire l'interface utilisateur structure du projet mettons en place une structure de fichiers de base pour notre système d'authentification src/ ├── components/ │ └── ui/ │ ├── field js │ └── toaster js ├── pages/ │ ├── signuppage js │ ├── loginpage js │ ├── resetpasswordpage js │ ├── profilepage js │ └── feedpage js ├── app js └── index js configuration du sdk parse maintenant, initialisons parse dans notre application créez un fichier appelé src/parseconfig js import parse from 'parse/dist/parse min js'; // initialize parse parse initialize("your app id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; export default parse; remplacez your app id et your javascript key par les identifiants de votre projet back4app vous pouvez les trouver dans votre tableau de bord back4app sous paramètres de l'application > sécurité et clés ensuite, mettons à jour src/index js pour importer notre configuration parse import react from 'react'; import reactdom from 'react dom/client'; import ' /index css'; import app from ' /app'; import ' /parseconfig'; const root = reactdom createroot(document getelementbyid('root')); root render( \<react strictmode> \<app /> \</react strictmode> ); configuration des routes maintenant, configurons la structure de routage de base dans src/app js import react from 'react'; import { browserrouter as router, routes, route } from 'react router dom'; import {provider} from " /components/ui/provider"; // import pages import signuppage from ' /pages/signuppage'; import loginpage from ' /pages/loginpage'; import resetpasswordpage from ' /pages/resetpasswordpage'; import profilepage from ' /pages/profilepage'; import feedpage from ' /pages/feedpage'; function app() { return ( \<provider> \<router> \<routes> \<route path="/signup" element={\<signuppage />} /> \<route path="/login" element={\<loginpage />} /> \<route path="/reset password" element={\<resetpasswordpage />} /> \<route path="/profile" element={\<profilepage />} /> \<route path="/feed" element={\<feedpage />} /> \<route path="/" element={\<loginpage />} /> \</routes> \</router> \</provider> ); } export default app; création de composants ui avant de commencer à construire les pages d'authentification, créons quelques composants ui réutilisables tout d'abord, créons src/components/ui/toaster js // a simple toast notification system export const toaster = { create ({ title, description, type }) => { alert(`${title} ${description}`); // in a real app, you would use chakra ui's toast system } }; ensuite, créez src/components/ui/field js import react from 'react'; import { formcontrol, formlabel, formerrormessage, formhelpertext } from '@chakra ui/react'; export const field = ({ label, children, errortext, helpertext, rest }) => { return ( \<formcontrol isinvalid={!!errortext} { rest}> {label && \<formlabel>{label}\</formlabel>} {children} {errortext ? ( \<formerrormessage>{errortext}\</formerrormessage> ) helpertext ? ( \<formhelpertext>{helpertext}\</formhelpertext> ) null} \</formcontrol> ); }; maintenant, nous sommes prêts à mettre en œuvre notre système d'authentification ! projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 3 – création d'un système d'enregistrement d'utilisateur commençons par mettre en œuvre la page d'inscription cette page permettra aux nouveaux utilisateurs de créer un compte en fournissant un nom d'utilisateur, un e mail et un mot de passe créez un fichier appelé src/pages/signuppage js import react, { usestate } from 'react'; import { usenavigate, link as routerlink } from 'react router dom'; import { box, button, heading, input, vstack, link, text, flex } from '@chakra ui/react'; import parse from 'parse/dist/parse min js'; import { toaster } from ' /components/ui/toaster'; import { field } from ' /components/ui/field'; function signuppage() { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const \[confirmpassword, setconfirmpassword] = usestate(''); const \[isloading, setisloading] = usestate(false); const \[showpassword, setshowpassword] = usestate(false); const \[errors, seterrors] = usestate({}); const navigate = usenavigate(); const validateform = () => { const newerrors = {}; if (!username trim()) { newerrors username = 'username is required'; } if (!email trim()) { newerrors email = 'email is required'; } else if (!/\s+@\s+\\ \s+/ test(email)) { newerrors email = 'email is invalid'; } if (!password) { newerrors password = 'password is required'; } else if (password length < 6) { newerrors password = 'password must be at least 6 characters'; } if (password !== confirmpassword) { newerrors confirmpassword = 'passwords do not match'; } seterrors(newerrors); return object keys(newerrors) length === 0; }; const handlesignup = async (e) => { e preventdefault(); if (!validateform()) { return; } setisloading(true); try { // create a new user using parse const user = new parse user(); user set('username', username); user set('email', email); user set('password', password); await user signup(); toaster create({ title 'success', description 'account created successfully!', type 'success', }); navigate('/feed'); } catch (error) { console error('error signing up ', error); toaster create({ title 'error', description error message, type 'error', }); } finally { setisloading(false); } }; return ( \<box maxw="400px" mx="auto" p={4}> \<vstack spacing={6} align="stretch"> \<heading textalign="center">create an account\</heading> \<form onsubmit={handlesignup}> \<vstack spacing={4} align="stretch"> \<field isinvalid={!!errors username}> \<field label>username\</field label> \<input type="text" value={username} onchange={(e) => setusername(e target value)} /> {errors username && ( \<field errortext>{errors username}\</field errortext> )} \</field> \<field isinvalid={!!errors email}> \<field label>email\</field label> \<input type="email" value={email} onchange={(e) => setemail(e target value)} /> {errors email && ( \<field errortext>{errors email}\</field errortext> )} \</field> \<field isinvalid={!!errors password}> \<field label>password\</field label> \<flex position="relative"> \<input type={showpassword ? 'text' 'password'} value={password} onchange={(e) => setpassword(e target value)} /> \<button aria label={showpassword ? 'hide password' 'show password'} size="xs" position="absolute" right="0 25rem" top="50%" transform="translatey( 50%)" onclick={() => setshowpassword(!showpassword)} zindex={2} \> {showpassword ? 'hide' 'show'} \</button> \</flex> {errors password && ( \<field errortext>{errors password}\</field errortext> )} \</field> \<field isinvalid={!!errors confirmpassword}> \<field label>confirm password\</field label> \<input type={showpassword ? 'text' 'password'} value={confirmpassword} onchange={(e) => setconfirmpassword(e target value)} /> {errors confirmpassword && ( \<field errortext>{errors confirmpassword}\</field errortext> )} \</field> \<button type="submit" colorscheme="blue" isloading={isloading} mt={2} \> sign up \</button> \</vstack> \</form> \<text textalign="center"> already have an account?{' '} \<link as={routerlink} to="/login" color="blue 400"> log in \</link> \</text> \</vstack> \</box> ); } export default signuppage; ce code crée un formulaire d'inscription avec les fonctionnalités suivantes validation du formulaire vérifie que tous les champs obligatoires sont correctement remplis avant la soumission basculer la visibilité du mot de passe permet aux utilisateurs de voir ce qu'ils tapent gestion des erreurs affiche des messages d'erreur appropriés pour les échecs de validation et d'inscription état de chargement affiche un indicateur de chargement pendant le processus d'inscription comprendre le processus d'inscription des utilisateurs de back4app la partie clé de ce code est la handlesignup fonction, qui utilise la classe parse user de back4app pour créer un nouvel utilisateur const user = new parse user(); user set('username', username); user set('email', email); user set('password', password); await user signup(); lorsque vous appelez signup() , back4app valide les données fournies hache le mot de passe de manière sécurisée crée un nouvel utilisateur dans la base de données crée et renvoie un jeton de session le jeton de session est automatiquement stocké par le sdk parse après une inscription réussie, l'utilisateur est automatiquement connecté, nous pouvons donc le rediriger directement vers la page d'accueil dans l'application back4gram, cela est implémenté de manière similaire dans signuppage js la principale différence est que l'implémentation de back4gram utilise des composants ui plus avancés et peut inclure des champs ou une logique de validation supplémentaires avec la fonctionnalité d'inscription terminée, passons à l'implémentation de la fonctionnalité de connexion projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 4 – implémentation de la connexion utilisateur maintenant, créons la page de connexion qui permettra aux utilisateurs de s'authentifier avec leurs identifiants créer un fichier appelé src/pages/loginpage js import react, { usestate, useeffect } from 'react'; import { usenavigate, link as routerlink } from 'react router dom'; import { box, heading, input, button, text, vstack, link, } from '@chakra ui/react'; import parse from 'parse/dist/parse min js'; import { toaster } from ' /components/ui/toaster'; import { field } from ' /components/ui/field'; function loginpage() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[isloading, setisloading] = usestate(false); const \[error, seterror] = usestate(''); const \[currentuser, setcurrentuser] = usestate(null); const navigate = usenavigate(); // check if a user is already logged in useeffect(() => { const checkcurrentuser = async () => { try { const user = await parse user current(); if (user) { setcurrentuser(user); navigate('/feed'); } } catch (error) { console error('error checking current user ', error); } }; checkcurrentuser(); }, \[navigate]); const handlelogin = async (e) => { e preventdefault(); if (!username || !password) { seterror('username and password are required'); return; } setisloading(true); try { // login with parse const loggedinuser = await parse user login(username, password); toaster create({ title 'login successful!', description `welcome back, ${loggedinuser getusername()}!`, type 'success', }); // redirect to feed after successful login navigate('/feed'); } catch (error) { toaster create({ title 'login failed', description error message, type 'error', }); seterror(error message); } finally { setisloading(false); } }; return ( \<box maxw="md" mx="auto" p={8} border="1px solid" bordercolor="gray 600" borderradius="md"> \<heading as="h1" size="xl" mb={6} textalign="center"> social network login \</heading> \<form onsubmit={handlelogin}> \<vstack spacing={4}> \<field label="username"> \<input type="text" value={username} onchange={(e) => setusername(e target value)} placeholder="your username" required /> \</field> \<field label="password" errortext={error} \> \<input type="password" value={password} onchange={(e) => setpassword(e target value)} placeholder="your password" required /> \</field> \<link as={routerlink} to="/reset password" alignself="flex end" fontsize="sm"> forgot password? \</link> \<button colorscheme="blue" width="full" type="submit" isloading={isloading} \> log in \</button> \</vstack> \</form> \<text textalign="center" mt={6}> don't have an account?{' '} \<link as={routerlink} to="/signup" color="blue 500"> sign up \</link> \</text> \</box> ); } export default loginpage; cette page de connexion a les fonctionnalités suivantes redirection automatique si un utilisateur est déjà connecté, il est automatiquement redirigé vers la page de fil validation de formulaire assure que le nom d'utilisateur et le mot de passe sont fournis avant la soumission gestion des erreurs affiche des messages d'erreur appropriés pour les tentatives de connexion échouées état de chargement affiche un indicateur de chargement pendant le processus de connexion lien de réinitialisation de mot de passe fournit un lien vers la page de réinitialisation de mot de passe comprendre le processus de connexion de back4app les parties clés de ce code sont vérification d'un utilisateur connecté existant en utilisant parse user current() connexion d'un utilisateur avec parse user login(username, password) lorsqu'un utilisateur se connecte avec back4app les identifiants sont envoyés au serveur pour validation si valide, un jeton de session est généré et renvoyé le sdk parse stocke automatiquement ce jeton l'objet utilisateur est renvoyé avec les données de l'utilisateur actuel le jeton de session stocké est ensuite utilisé automatiquement par le sdk parse pour toutes les requêtes suivantes, permettant à l'utilisateur de rester connecté dans l'application back4gram, le système de connexion est implémenté de manière similaire dans loginpage js , mais avec des composants ui plus avancés et potentiellement des fonctionnalités supplémentaires comme des options de connexion sociale passons maintenant à la mise en œuvre de la fonctionnalité de réinitialisation du mot de passe projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 5 – fonctionnalité de réinitialisation du mot de passe ensuite, créons la page de réinitialisation du mot de passe qui permettra aux utilisateurs de récupérer leurs comptes s'ils oublient leurs mots de passe créez un fichier appelé src/pages/resetpasswordpage js import react, { usestate } from 'react'; import { link as routerlink } from 'react router dom'; import { box, heading, input, button, text, vstack, link, alert, alerticon, alerttitle, alertdescription, } from '@chakra ui/react'; import parse from 'parse/dist/parse min js'; import { toaster } from ' /components/ui/toaster'; import { field } from ' /components/ui/field'; function resetpasswordpage() { const \[email, setemail] = usestate(''); const \[isloading, setisloading] = usestate(false); const \[error, seterror] = usestate(''); const \[issuccess, setissuccess] = usestate(false); const handleresetpassword = async (e) => { e preventdefault(); if (!email) { seterror('email is required'); return; } // basic email validation const emailregex = /^\[^\s@]+@\[^\s@]+\\ \[^\s@]+$/; if (!emailregex test(email)) { seterror('invalid email format'); return; } setisloading(true); seterror(''); try { // request password reset await parse user requestpasswordreset(email); setissuccess(true); toaster create({ title 'email sent', description 'check your inbox for password reset instructions ', type 'success', }); } catch (error) { toaster create({ title 'reset request failed', description error message, type 'error', }); seterror(error message); } finally { setisloading(false); } }; return ( \<box maxw="md" mx="auto" p={8} border="1px solid" bordercolor="gray 600" borderradius="md"> \<heading as="h1" size="xl" mb={6} textalign="center"> reset password \</heading> {issuccess ? ( \<alert status="success" borderradius="md"> \<alerticon /> \<box> \<alerttitle>email sent successfully!\</alerttitle> \<alertdescription> check your inbox for password reset instructions \</alertdescription> \</box> \</alert> ) ( \<form onsubmit={handleresetpassword}> \<vstack spacing={4}> \<text> enter your email and we'll send you instructions to reset your password \</text> \<field label="email" errortext={error} \> \<input type="email" value={email} onchange={(e) => setemail(e target value)} placeholder="your email address" required /> \</field> \<button colorscheme="blue" width="full" type="submit" isloading={isloading} \> send instructions \</button> \<link as={routerlink} to="/login" color="blue 500"> back to login \</link> \</vstack> \</form> )} \</box> ); } export default resetpasswordpage; cette page de réinitialisation de mot de passe comprend validation de l'email assure qu'un format d'email valide est fourni état de succès affiche un message de succès après l'envoi de l'email de réinitialisation gestion des erreurs affiche des messages d'erreur appropriés si la demande de réinitialisation échoue état de chargement affiche un indicateur de chargement pendant le processus de demande de réinitialisation comprendre le processus de réinitialisation de mot de passe de back4app la partie clé de ce code est d'utiliser le parse user requestpasswordreset(email) méthode de back4app pour envoyer un email de réinitialisation de mot de passe à l'utilisateur lorsqu'un utilisateur demande une réinitialisation de mot de passe avec back4app back4app vérifie que l'email existe dans la base de données si l'email est trouvé, un email de réinitialisation est envoyé à l'utilisateur l'email contient un lien avec un jeton sécurisé lorsque l'utilisateur clique sur le lien, il est dirigé vers une page de réinitialisation de mot de passe après avoir défini un nouveau mot de passe, il peut se connecter avec ses nouvelles informations d'identification dans l'application back4gram, la fonctionnalité de réinitialisation du mot de passe est implémentée de manière similaire dans resetpasswordpage js , en utilisant les mêmes méthodes api de back4app mais potentiellement avec des composants ui plus avancés ou des fonctionnalités supplémentaires maintenant que nous avons implémenté les fonctionnalités d'authentification de base, concentrons nous sur la gestion des sessions projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 6 – gestion des sessions et persistance l'un des aspects clés de tout système d'authentification est une gestion appropriée des sessions cela garantit que les utilisateurs restent connectés tout en naviguant dans votre application et que leurs sessions sont sécurisées créons une version simplifiée de la page de fil d'actualité pour démontrer la vérification et la gestion des sessions créer un fichier appelé src/pages/feedpage js import react, { usestate, useeffect } from 'react'; import { usenavigate } from 'react router dom'; import { box, heading, button, text, vstack, hstack, spinner, center, } from '@chakra ui/react'; import parse from 'parse/dist/parse min js'; import { toaster } from ' /components/ui/toaster'; function feedpage() { const \[isloading, setisloading] = usestate(true); const \[currentuser, setcurrentuser] = usestate(null); const navigate = usenavigate(); // check if user is authenticated useeffect(() => { const checkauth = async () => { try { console log('checking authentication '); const user = await parse user current(); if (!user) { console log('no user found, redirecting to login'); navigate('/login'); return; } console log('user authenticated ', user id, user get('username')); setcurrentuser(user); setisloading(false); } catch (error) { console error('error checking authentication ', error); navigate('/login'); } }; checkauth(); }, \[navigate]); // function to handle logout const handlelogout = async () => { try { await parse user logout(); navigate('/login'); } catch (error) { console error('error logging out ', error); toaster create({ title 'error', description 'failed to log out please try again ', type 'error', }); } }; if (isloading) { return ( \<center h="100vh"> \<spinner size="xl" /> \</center> ); } return ( \<box maxw="800px" mx="auto" p={8}> \<hstack justify="space between" mb={8}> \<heading>social network feed\</heading> \<hstack> \<text>welcome, {currentuser get('username')}\</text> \<button onclick={handlelogout} colorscheme="red" variant="outline"> log out \</button> \</hstack> \</hstack> \<vstack align="stretch" spacing={4}> \<box p={4} borderwidth={1} borderradius="md"> \<text>this is your feed when authenticated with back4app, you'll see content here \</text> \<text mt={2}>your user id {currentuser id}\</text> \<text>your email {currentuser get('email')}\</text> \</box> \</vstack> \</box> ); } export default feedpage; cette page de fil implémente vérification d'authentification vérifie que l'utilisateur est connecté avant d'afficher le contenu redirection automatique redirige vers la page de connexion si aucune session utilisateur n'est trouvée fonctionnalité de déconnexion permet à l'utilisateur de se déconnecter et de vider sa session affichage des informations utilisateur affiche des informations sur l'utilisateur actuellement connecté comprendre la gestion des sessions de back4app back4app gère les sessions de plusieurs manières stockage de session automatique le sdk parse stocke automatiquement le jeton de session après la connexion accès à l'utilisateur actuel vous pouvez accéder à l'utilisateur actuel avec parse user current() expiration de session les sessions expirent généralement après une période définie (configurable dans back4app) déconnexion vous pouvez mettre fin à une session avec parse user logout() dans une application de production comme back4gram, la gestion des sessions est souvent plus complexe dans le messagespage js fichier de back4gram, nous pouvons voir comment l'authentification est vérifiée au début du composant useeffect(() => { const checkauth = async () => { try { console log('checking authentication '); const user = await parse user current(); if (!user) { console log('no user found, redirecting to login'); navigate('/login'); return; } console log('user authenticated ', user id, user get('username')); setcurrentuser(user); fetchconversations(user); } catch (error) { console error('error checking authentication ', error); navigate('/login'); } }; checkauth(); // clean up subscriptions when component unmounts // }, \[navigate]); ce modèle de vérification de l'authentification au niveau du composant est courant dans les applications react utilisant back4app considérations de sécurité des sessions lors de la mise en œuvre de la gestion des sessions avec back4app, considérez ces pratiques de sécurité invalidation automatique de session configurez back4app pour invalider les sessions après une certaine période d'inactivité stockage sécurisé assurez vous que les jetons de session sont stockés en toute sécurité (le sdk parse gère cela automatiquement) https uniquement utilisez toujours https pour éviter l'interception des jetons de session déconnexion lors d'actions sensibles exigez une nouvelle authentification pour des opérations sensibles comme le changement de mot de passe voyons maintenant comment mettre en œuvre la gestion des profils pour compléter notre système d'authentification projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 7 – ajout de la gestion des profils utilisateurs la dernière pièce de notre système d'authentification est la gestion des profils utilisateurs cela permet aux utilisateurs de consulter et de mettre à jour leurs informations de profil créez un fichier appelé src/pages/profilepage js import react, { usestate, useeffect } from 'react'; import { usenavigate } from 'react router dom'; import { box, button, heading, text, vstack, hstack, input, textarea, avatar, formcontrol, formlabel, spinner, center, } from '@chakra ui/react'; import parse from 'parse/dist/parse min js'; import { toaster } from ' /components/ui/toaster'; import { field } from ' /components/ui/field'; function profilepage() { const \[user, setuser] = usestate(null); const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[bio, setbio] = usestate(''); const \[isloading, setisloading] = usestate(true); const \[isupdating, setisupdating] = usestate(false); const \[selectedfile, setselectedfile] = usestate(null); const \[avatarurl, setavatarurl] = usestate(null); const navigate = usenavigate(); // fetch user data useeffect(() => { const fetchuserdata = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } setuser(currentuser); setusername(currentuser get('username') || ''); setemail(currentuser get('email') || ''); setbio(currentuser get('bio') || ''); // get avatar if available const avatar = currentuser get('avatar'); if (avatar) { setavatarurl(avatar url()); } setisloading(false); } catch (error) { console error('error fetching user data ', error); toaster create({ title 'error', description 'failed to load profile data', type 'error', }); navigate('/login'); } }; fetchuserdata(); }, \[navigate]); // handle profile update const handleupdateprofile = async (e) => { e preventdefault(); setisupdating(true); try { if (!user) return; user set('username', username); user set('email', email); user set('bio', bio); // handle avatar upload if a file is selected if (selectedfile) { const parsefile = new parse file(selectedfile name, selectedfile); await parsefile save(); user set('avatar', parsefile); setavatarurl(parsefile url()); } await user save(); toaster create({ title 'success', description 'profile updated successfully', type 'success', }); } catch (error) { console error('error updating profile ', error); toaster create({ title 'error', description error message, type 'error', }); } finally { setisupdating(false); } }; // handle avatar selection const handlefilechange = (e) => { if (e target files && e target files\[0]) { setselectedfile(e target files\[0]); // create a preview url const previewurl = url createobjecturl(e target files\[0]); setavatarurl(previewurl); } }; // handle logout const handlelogout = async () => { try { await parse user logout(); navigate('/login'); } catch (error) { console error('error logging out ', error); } }; if (isloading) { return ( \<center h="100vh"> \<spinner size="xl" /> \</center> ); } return ( \<box maxw="800px" mx="auto" p={8}> \<hstack justify="space between" mb={8}> \<heading>your profile\</heading> \<button onclick={handlelogout} colorscheme="red" variant="outline"> log out \</button> \</hstack> \<box p={8} borderwidth={1} borderradius="md"> \<form onsubmit={handleupdateprofile}> \<vstack spacing={6} align="start"> \<hstack spacing={8} w="full" align="start"> \<vstack align="center" minw="150px"> \<avatar size="2xl" src={avatarurl} name={username} mb={4} /> \<formcontrol> \<formlabel htmlfor="avatar upload" cursor="pointer" textalign="center"> \<button as="span" size="sm"> change avatar \</button> \<input id="avatar upload" type="file" accept="image/ " onchange={handlefilechange} display="none" /> \</formlabel> \</formcontrol> \</vstack> \<vstack spacing={4} flex="1"> \<field label="username" w="full"> \<input value={username} onchange={(e) => setusername(e target value)} /> \</field> \<field label="email" w="full"> \<input type="email" value={email} onchange={(e) => setemail(e target value)} /> \</field> \<field label="bio" w="full"> \<textarea value={bio} onchange={(e) => setbio(e target value)} placeholder="tell us about yourself" rows={4} /> \</field> \</vstack> \</hstack> \<button type="submit" colorscheme="blue" isloading={isupdating} alignself="flex end" \> save changes \</button> \</vstack> \</form> \</box> \</box> ); } export default profilepage; this profile page provides users with the ability to 1\ view profile information see their username, email, and bio 2\ update profile details change their username, email, and bio 3\ upload a profile picture select and upload a profile image 4\ log out end their session and return to the login page \### understanding back4app's user data management let's examine the key aspects of how back4app handles user data management \#### file uploads with parse file one powerful feature of back4app is the ability to easily handle file uploads using `parse file` ```javascript if (selectedfile) { const parsefile = new parse file(selectedfile name, selectedfile); await parsefile save(); user set('avatar', parsefile); setavatarurl(parsefile url()); } lorsque vous créez un nouveau parse file , back4app prend votre fichier (image, document, etc ) le télécharge dans un stockage sécurisé renvoie une référence qui peut être stockée avec votre objet utilisateur rend le fichier accessible via une url ajout de champs utilisateur personnalisés la classe parse user de back4app peut être étendue avec des champs personnalisés au delà des champs par défaut dans notre exemple, nous avons ajouté bio un champ de texte pour les descriptions des utilisateurs avatar un champ de fichier pour les photos de profil vous pouvez ajouter tous les champs personnalisés dont vous avez besoin pour les profils utilisateurs de votre application user set('bio', bio); dans l'application back4gram, le profilepage js implémente une fonctionnalité similaire mais avec plus de fonctionnalités et une interface utilisateur plus complexe il inclut des champs supplémentaires comme le nombre de followers, des statistiques de publication, et une gestion d'image plus robuste projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 8 – tester et sécuriser votre système d'authentification maintenant que nous avons construit notre système d'authentification, discutons de la manière de le tester et de le sécuriser correctement tester les flux d'authentification lors du test de votre système d'authentification, vous devez vérifier chacun de ces flux inscription de l'utilisateur testez que les utilisateurs peuvent créer des comptes avec des identifiants valides validation des entrées vérifiez que des erreurs appropriées apparaissent pour des entrées invalides processus de connexion assurez vous que les utilisateurs peuvent se connecter avec des identifiants corrects échec de la connexion vérifiez que des erreurs appropriées apparaissent pour des identifiants incorrects réinitialisation du mot de passe confirmez que le flux de réinitialisation du mot de passe fonctionne de bout en bout persistance de la session vérifiez que les utilisateurs restent connectés entre les visites de pages processus de déconnexion assurez vous que les utilisateurs peuvent se déconnecter correctement et que les sessions sont terminées vulnérabilités de sécurité courantes à éviter lors de la création de systèmes d'authentification, soyez conscient de ces problèmes de sécurité courants stockage des mots de passe ne jamais stocker les mots de passe en texte clair back4app s'en occupe automatiquement pour vous attaques par force brute implémentez une limitation du taux pour les tentatives de connexion back4app fournit cette fonctionnalité injection de scripts intersites (xss) assainissez les entrées utilisateur pour prévenir l'injection de scripts falsification de requête intersite (csrf) utilisez des jetons appropriés pour vérifier l'authenticité des requêtes références d'objets directs non sécurisées ne pas exposer d'id ou de références sensibles dans les url meilleures pratiques de sécurité back4app back4app fournit plusieurs fonctionnalités de sécurité que vous devriez exploiter 1 permissions au niveau de la classe (clp) dans votre tableau de bord back4app, vous pouvez définir des autorisations au niveau de la classe pour contrôler qui peut lire, écrire et supprimer des objets allez sur votre tableau de bord back4app naviguez vers base de données → navigateur cliquez sur le bouton "sécurité" pour votre classe d'utilisateur configurez les autorisations de manière appropriée \[image écran des autorisations au niveau de la classe back4app montrant les paramètres de sécurité de la classe d'utilisateur] pour la classe d'utilisateur, les paramètres typiques incluent accès en lecture public uniquement pour des champs spécifiques (nom d'utilisateur, avatar) pas d'accès public en écriture ou en suppression seuls les utilisateurs authentifiés peuvent mettre à jour leurs propres enregistrements 2 listes de contrôle d'accès (acl) pour des objets individuels, vous pouvez utiliser des acl pour contrôler l'accès // set an acl that only allows the current user to read and write this object const useracl = new parse acl(parse user current()); userobject setacl(useracl); await userobject save(); cela garantit que seul l'utilisateur qui a créé un objet peut y accéder ou le modifier 3 utilisation de la clé maître back4app fournit une clé maître qui contourne les vérifications de sécurité ne jamais l'exposer dans le code côté client // never do this in client side code parse cloud usemasterkey(); // this should only be used in cloud code au lieu de cela, pour les opérations nécessitant des privilèges élevés, utilisez les fonctions cloud 4 vérification de l'email activez la vérification de l'email dans vos paramètres back4app pour vous assurer que les utilisateurs fournissent des adresses email valides allez sur votre tableau de bord back4app naviguez vers paramètres de l'application → paramètres de l'email configurez votre adaptateur d'email activez la vérification de l'email \[image écran de configuration des paramètres d'email back4app] 5 authentification à deux facteurs pour une sécurité supplémentaire, vous pouvez mettre en œuvre l'authentification à deux facteurs en utilisant les fonctions cloud de back4app cela nécessite que les utilisateurs fournissent une seconde forme de vérification (généralement un code envoyé à leur téléphone ou email) lors de la connexion mise en œuvre de la limitation de débit pour se protéger contre les attaques par force brute, vous pouvez mettre en œuvre une limitation de débit en utilisant des fonctions cloud // cloud function to handle login with rate limiting parse cloud define("securelogin", async (request) => { const { username, password } = request params; // check for too many failed attempts const query = new parse query("loginattempt"); query equalto("username", username); query greaterthan("createdat", new date(date now() 15 60 1000)); // last 15 minutes const attempts = await query count(); if (attempts >= 5) { throw new error("too many login attempts please try again later "); } try { // attempt to log in const user = await parse user login(username, password); return { success true, user user tojson() }; } catch (error) { // record failed attempt const loginattempt = parse object extend("loginattempt"); const attempt = new loginattempt(); attempt set("username", username); await attempt save(null, { usemasterkey true }); throw error; } }); conclusion dans ce tutoriel, vous avez construit un système d'authentification complet pour une application de réseau social en utilisant back4app vous avez mis en œuvre des fonctionnalités d'inscription des utilisateurs, de connexion, de réinitialisation de mot de passe et de gestion de profil, toutes alimentées par les capacités de gestion des utilisateurs intégrées de back4app récapitulons ce que vous avez appris système de gestion des utilisateurs de back4app vous avez appris comment le serveur parse de back4app fournit une authentification utilisateur intégrée avec la parse user classe inscription des utilisateurs vous avez mis en œuvre un formulaire d'inscription qui crée de nouveaux comptes utilisateurs dans la base de données de back4app connexion des utilisateurs vous avez créé un système de connexion qui authentifie les utilisateurs et gère les sessions réinitialisation de mot de passe vous avez ajouté une fonctionnalité de réinitialisation de mot de passe sécurisée qui envoie des e mails de récupération gestion des sessions vous avez appris comment maintenir les sessions des utilisateurs et protéger les routes gestion de profil vous avez construit une page de profil qui permet aux utilisateurs de mettre à jour leurs informations et de télécharger des photos de profil meilleures pratiques de sécurité vous avez exploré comment sécuriser votre système d'authentification en utilisant les fonctionnalités de sécurité de back4app avec back4app, vous avez pu vous concentrer sur la création d'une excellente expérience utilisateur plutôt que sur la construction d'une infrastructure backend complexe le serveur parse qui alimente back4app a fourni toutes les api d'authentification nécessaires, tout en garantissant que vos données utilisateur restent sécurisées le système d'authentification que vous avez construit forme la base de votre application de réseau social avec cela en place, vous pouvez maintenant étendre votre application en ajoutant des fonctionnalités telles que des publications, des commentaires, des likes et des messages directs, le tout en utilisant back4app comme service backend prochaines étapes intégration de la connexion sociale ajoutez la connexion avec google, facebook ou d'autres fournisseurs en utilisant les capacités oauth de back4app sécurité renforcée mettez en œuvre une authentification à deux facteurs pour une sécurité supplémentaire rôles des utilisateurs configurez un contrôle d'accès basé sur les rôles pour différents types d'utilisateurs fonctionnalités en temps réel ajoutez des messages et des notifications en temps réel en utilisant la requête en direct de back4app pour le code complet de l'application de réseau social back4gram, vous pouvez consulter le dépôt github https //github com/templates back4app/back4gram les puissants services backend de back4app et l'intégration de parse server en font un excellent choix pour construire des applications de réseau social sécurisées et évolutives en tirant parti de ses capacités de gestion des utilisateurs intégrées, vous pouvez créer un système d'authentification robuste avec un minimum d'effort, vous permettant de vous concentrer sur la création de fonctionnalités uniques qui font ressortir votre application