Authentifizierungssystem für Ihr soziales Netzwerk

einführung in diesem tutorial lernen sie, wie sie ein umfassendes authentifizierungssystem für ihre social network webanwendung implementieren, indem sie back4app als backend service verwenden sie werden funktionen für die benutzerregistrierung, den login, die passwortzurücksetzung und das sitzungsmanagement erstellen kritische funktionen für jede moderne soziale anwendung back4app ist eine backend as a service (baas) plattform, die auf parse server basiert und entwicklern ermöglicht, skalierbare anwendungen zu erstellen, ohne die serverinfrastruktur verwalten zu müssen die integrierten benutzer authentifizierungsfunktionen machen es perfekt, um schnell sichere benutzerverwaltungssysteme zu implementieren am ende dieses tutorials haben sie ein voll funktionsfähiges authentifizierungssystem erstellt, das dem in back4gram, einer social network anwendung, ähnelt sie werden die benutzerregistrierung mit validierung, sicheren login, passwortwiederherstellung und persistente sitzungen über die anwendung hinweg implementieren, um ihren benutzern ein nahtloses erlebnis zu bieten und gleichzeitig ihre konten sicher zu halten back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app voraussetzungen um dieses tutorial abzuschließen, benötigen sie ein back4app konto sie können sich für ein kostenloses konto anmelden unter back4app com https //www back4app com ein back4app projekt, das eingerichtet ist sie können lernen, wie man ein neues projekt erstellt, indem sie unseren leitfaden zum einstieg in back4app https //www back4app com/docs/get started/welcome node js, das auf ihrem lokalen rechner installiert ist grundkenntnisse in javascript, react js und restful api konzepten vertrautheit mit modernen webentwicklungskonzepten (komponenten, zustandsverwaltung usw ) schritt 1 – verständnis des benutzerverwaltungssystems von back4app bevor sie in den code eintauchen, ist es wichtig zu verstehen, wie back4app die benutzerverwaltung handhabt back4app basiert auf parse server, der eine spezielle parse user klasse bietet, die speziell für die authentifizierung entwickelt wurde die parse user klasse die parse user klasse in back4app erweitert das standard parse objekt um spezialisierte funktionen für die benutzerauthentifizierung sie umfasst mehrere integrierte felder benutzername ein eindeutiger identifikator für den benutzer (erforderlich) passwort das passwort des benutzers (erforderlich für die anmeldung, aber nicht in abrufbarer form gespeichert) e mail die e mail adresse des benutzers (optional, aber empfohlen) e mailverifiziert ein boolean, der angibt, ob der benutzer seine e mail verifiziert hat authdata authentifizierungsdaten für die authentifizierung von drittanbietern sie können auch benutzerdefinierte felder hinzufügen, um zusätzliche benutzerinformationen zu speichern, wie profilbilder, biografien oder andere benutzerspezifische daten sitzungsverwaltung wenn sich ein benutzer anmeldet, erstellt back4app ein sitzungstoken, das die sitzung des benutzers identifiziert dieses token wird verwendet, um nachfolgende anfragen zu authentifizieren, ohne dass der benutzer sich erneut anmelden muss das sitzungstoken wird automatisch vom parse sdk verwaltet, kann aber bei bedarf auch manuell gesteuert werden so funktioniert der sitzungsfluss der benutzer gibt anmeldeinformationen (benutzername/e mail und passwort) ein back4app validiert die anmeldeinformationen wenn gültig, erstellt back4app ein sitzungstoken das token wird lokal gespeichert (typischerweise in localstorage oder einem ähnlichen mechanismus) das token wird in nachfolgenden api anfragen zur authentifizierung des benutzers verwendet schauen wir uns an, wie dies in der back4gram anwendung implementiert ist der parse initialisierungscode sieht typischerweise so aus // initialize parse with your back4app credentials parse initialize("your app id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; dieses setup in der back4gram app ermöglicht es allen komponenten, auf das parse sdk zuzugreifen und authentifizierte anfragen zu stellen, sobald sich ein benutzer anmeldet sicherheitsmerkmale back4app bietet mehrere sicherheitsmerkmale für das benutzermanagement an sichere passwortspeicherung passwörter werden niemals im klartext gespeichert, sondern automatisch gehasht und gesalzen sitzungsverwaltung benutzersitzungen können über das back4app dashboard verwaltet und widerrufen werden zugriffskontrolllisten (acls) sie können steuern, wer bestimmte objekte lesen oder schreiben kann e mail verifizierung back4app kann verifizierungs e mails an benutzer senden passwort zurücksetzen eingebaute funktionalität für sichere passwortzurücksetzungen jetzt, da wir die grundlagen verstehen, lassen sie uns mit der einrichtung unseres projekts fortfahren back4gram projekt finden hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 2 – einrichtung ihres projekts um zu demonstrieren, wie man die authentifizierung mit back4app implementiert, werden wir eine vereinfachte version der back4gram sozialnetzwerkanwendung erstellen erstellen einer neuen react anwendung zuerst erstellen wir eine neue react anwendung öffnen sie ihr terminal und führen sie aus npx create react app social network auth cd social network auth installieren der erforderlichen pakete als nächstes installieren wir die notwendigen pakete npm install parse react router dom @chakra ui/react @emotion/react @emotion/styled framer motion diese pakete bieten parse das javascript sdk für back4app react router dom für die seitenrouting @chakra ui/react eine komponentenbibliothek zum erstellen der benutzeroberfläche projektstruktur lassen sie uns eine grundlegende dateistruktur für unser authentifizierungssystem einrichten src/ ├── components/ │ └── ui/ │ ├── field js │ └── toaster js ├── pages/ │ ├── signuppage js │ ├── loginpage js │ ├── resetpasswordpage js │ ├── profilepage js │ └── feedpage js ├── app js └── index js konfigurieren des parse sdk jetzt lassen sie uns parse in unserer anwendung initialisieren erstellen sie eine datei mit dem namen 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; ersetzen sie your app id und your javascript key durch ihre back4app projektanmeldeinformationen sie finden diese in ihrem back4app dashboard unter app einstellungen > sicherheit & schlüssel als nächstes aktualisieren wir src/index js um unsere parse konfiguration zu importieren 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> ); routen einrichten jetzt lassen sie uns die grundlegende routing struktur in 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; erstellen von ui komponenten bevor wir mit dem erstellen der authentifizierungsseiten beginnen, lassen sie uns einige wiederverwendbare ui komponenten erstellen zuerst erstellen wir 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 } }; erstellen sie dann 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> ); }; jetzt sind wir bereit, unser authentifizierungssystem zu implementieren! back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 3 – erstellung eines benutzerregistrierungssystems lass uns mit der implementierung der anmeldeseite beginnen diese seite ermöglicht es neuen benutzern, ein konto zu erstellen, indem sie einen benutzernamen, eine e mail adresse und ein passwort angeben erstelle eine datei mit dem namen 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; dieser code erstellt ein anmeldeformular mit den folgenden funktionen formularvalidierung überprüft, ob alle erforderlichen felder vor der einreichung korrekt ausgefüllt sind passwortsichtbarkeit umschalten ermöglicht benutzern, zu sehen, was sie eingeben fehlerbehandlung zeigt geeignete fehlermeldungen für validierungs und anmeldefehler an ladezustand zeigt während des anmeldevorgangs einen ladeindikator an verstehen des benutzeranmeldeprozesses von back4app der schlüsselteil dieses codes ist die handlesignup funktion, die die parse user klasse von back4app verwendet, um einen neuen benutzer zu erstellen const user = new parse user(); user set('username', username); user set('email', email); user set('password', password); await user signup(); wenn sie signup() , ruft back4app validiert die bereitgestellten daten hasht das passwort sicher erstellt einen neuen benutzer in der datenbank erstellt und gibt ein sitzungstoken zurück das sitzungstoken wird automatisch vom parse sdk gespeichert nach einer erfolgreichen anmeldung wird der benutzer automatisch eingeloggt, sodass wir ihn direkt zur feed seite umleiten können in der back4gram anwendung wird dies ähnlich in signuppage js , implementiert der hauptunterschied besteht darin, dass die back4gram implementierung fortschrittlichere ui komponenten verwendet und möglicherweise zusätzliche felder oder validierungslogik enthält mit der abgeschlossenen anmeldefunktionalität lassen sie uns zur implementierung der anmeldefunktionalität übergehen back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 4 – implementierung der benutzeranmeldung jetzt lassen sie uns die anmeldeseite erstellen, die es benutzern ermöglicht, sich mit ihren anmeldeinformationen zu authentifizieren erstellen sie eine datei mit dem namen 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; diese anmeldeseite hat folgende funktionen auto redirect wenn ein benutzer bereits angemeldet ist, wird er automatisch zur feed seite weitergeleitet form validation stellt sicher, dass benutzername und passwort vor der übermittlung angegeben werden error handling zeigt geeignete fehlermeldungen für fehlgeschlagene anmeldeversuche an loading state zeigt während des anmeldevorgangs einen ladeindikator an password reset link bietet einen link zur seite zum zurücksetzen des passworts verstehen des anmeldeprozesses von back4app die wichtigsten teile dieses codes sind überprüfung eines vorhandenen angemeldeten benutzers mit parse user current() anmeldung eines benutzers mit parse user login(username, password) wenn sich ein benutzer mit back4app anmeldet die anmeldeinformationen werden zur validierung an den server gesendet wenn gültig, wird ein sitzungstoken generiert und zurückgegeben das parse sdk speichert dieses token automatisch das benutzerobjekt wird mit den daten des aktuellen benutzers zurückgegeben das gespeicherte sitzungstoken wird dann automatisch vom parse sdk für alle nachfolgenden anfragen verwendet, sodass der benutzer angemeldet bleibt in der back4gram anwendung ist das anmeldesystem ähnlich in loginpage js , aber mit fortschrittlicheren ui komponenten und möglicherweise zusätzlichen funktionen wie sozialen anmeldemöglichkeiten lassen sie uns nun mit der implementierung der passwortzurücksetzfunktionalität fortfahren back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 5 – passwortzurücksetzfunktionalität als nächstes erstellen wir die seite zum zurücksetzen des passworts, die es benutzern ermöglicht, ihre konten wiederherzustellen, wenn sie ihre passwörter vergessen erstellen sie eine datei mit dem namen 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; diese passwortzurücksetzseite enthält e mail validierung stellt sicher, dass ein gültiges e mail format bereitgestellt wird erfolgsstatus zeigt eine erfolgsmeldung an, nachdem die zurücksetz e mail gesendet wurde fehlerbehandlung zeigt geeignete fehlermeldungen an, wenn die zurücksetzanforderung fehlschlägt ladezustand zeigt einen ladeindikator während des zurücksetzvorgangs an verstehen des passwortzurücksetzprozesses von back4app der schlüsselteil dieses codes ist die verwendung von back4app's parse user requestpasswordreset(email) methode, um eine passwortzurücksetz e mail an den benutzer zu senden wenn ein benutzer mit back4app eine passwortzurücksetzung anfordert back4app überprüft, ob die e mail in der datenbank vorhanden ist wenn die e mail gefunden wird, wird eine zurücksetz e mail an den benutzer gesendet die e mail enthält einen link mit einem sicheren token wenn der benutzer auf den link klickt, wird er zu einer passwortzurücksetzseite weitergeleitet nachdem er ein neues passwort festgelegt hat, kann er sich mit seinen neuen anmeldedaten anmelden in der back4gram anwendung ist die funktionalität zum zurücksetzen des passworts ähnlich in resetpasswordpage js , implementiert, wobei die gleichen back4app api methoden verwendet werden, jedoch möglicherweise mit fortschrittlicheren ui komponenten oder zusätzlichen funktionen jetzt, da wir die grundlegenden authentifizierungsfunktionen implementiert haben, konzentrieren wir uns auf das sitzungsmanagement back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 6 – sitzungsmanagement und persistenz einer der schlüsselaspekte eines jeden authentifizierungssystems ist das ordnungsgemäße sitzungsmanagement dies stellt sicher, dass benutzer während der navigation durch ihre anwendung angemeldet bleiben und dass ihre sitzungen sicher sind lassen sie uns eine vereinfachte version der feed seite erstellen, um die sitzungsüberprüfung und verwaltung zu demonstrieren erstellen sie eine datei mit dem namen 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; diese feed seite implementiert authentifizierungsprüfung überprüft, ob der benutzer angemeldet ist, bevor inhalte angezeigt werden automatische weiterleitung leitet zur anmeldeseite weiter, wenn keine benutzersitzung gefunden wird abmeldefunktionalität ermöglicht es dem benutzer, sich abzumelden und seine sitzung zu löschen benutzerinformationsanzeige zeigt informationen über den aktuell angemeldeten benutzer an verstehen des sitzungsmanagements von back4app back4app verwaltet sitzungen auf verschiedene weise automatische sitzungsablage das parse sdk speichert das sitzungstoken automatisch nach dem login zugriff auf den aktuellen benutzer sie können auf den aktuellen benutzer mit parse user current() sitzungsablauf sitzungen laufen normalerweise nach einer festgelegten zeit ab (konfigurierbar in back4app) abmeldung sie können eine sitzung mit parse user logout() in einer produktionsanwendung wie back4gram ist das sitzungsmanagement oft komplexer in der messagespage js datei von back4gram können wir sehen, wie die authentifizierung zu beginn der komponente überprüft wird 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]); dieses muster zur überprüfung der authentifizierung auf komponentenebene ist in react anwendungen, die back4app verwenden, üblich überlegungen zur sitzungsicherheit bei der implementierung des sitzungsmanagements mit back4app sollten sie diese sicherheitspraktiken berücksichtigen automatische sitzungsinvalidierung konfigurieren sie back4app so, dass sitzungen nach einer bestimmten inaktivitätsdauer ungültig werden sichere speicherung stellen sie sicher, dass sitzungstoken sicher gespeichert werden (das parse sdk kümmert sich automatisch darum) nur https verwenden sie immer https, um die abfangung von sitzungstoken zu verhindern abmeldung bei sensiblen aktionen erfordern sie eine erneute authentifizierung für sensible vorgänge wie das ändern von passwörtern lassen sie uns nun ansehen, wie man das profilmanagement implementiert, um unser authentifizierungssystem zu vervollständigen back4gram projekt finden hier den vollständigen code für ein beispielprojekt für soziale netzwerke erstellt mit back4app schritt 7 – hinzufügen des benutzerprofilmanagements das letzte element unseres authentifizierungssystems ist das benutzerprofilmanagement dies ermöglicht es den benutzern, ihre profilinformationen anzuzeigen und zu aktualisieren erstellen sie eine datei mit dem namen 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()); } wenn sie eine neue parse file , back4app nimmt ihre datei (bild, dokument usw ) lädt sie in einen sicheren speicher hoch gibt eine referenz zurück, die mit ihrem benutzerobjekt gespeichert werden kann macht die datei über eine url zugänglich benutzerdefinierte benutzerfelder hinzufügen die parse user klasse von back4app kann mit benutzerdefinierten feldern über die standardfelder hinaus erweitert werden in unserem beispiel haben wir hinzugefügt bio ein textfeld für benutzerbeschreibungen avatar ein dateifeld für profilbilder sie können beliebige benutzerdefinierte felder hinzufügen, die sie für die benutzerprofile ihrer anwendung benötigen user set('bio', bio); in der back4gram anwendung implementiert die profilepage js ähnliche funktionalität, jedoch mit mehr funktionen und einer komplexeren benutzeroberfläche sie umfasst zusätzliche felder wie follower zahlen, beitragsstatistiken und eine robustere bildbearbeitung back4gram projekt finden hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 8 – testen und sichern ihres authentifizierungssystems jetzt, da wir unser authentifizierungssystem erstellt haben, lassen sie uns besprechen, wie wir es richtig testen und sichern können testen von authentifizierungsabläufen beim testen ihres authentifizierungssystems sollten sie jeden dieser abläufe überprüfen benutzerregistrierung testen sie, ob benutzer konten mit gültigen anmeldeinformationen erstellen können eingabevalidierung überprüfen sie, ob geeignete fehler für ungültige eingaben angezeigt werden anmeldeprozess stellen sie sicher, dass benutzer sich mit den richtigen anmeldeinformationen anmelden können fehlgeschlagene anmeldung überprüfen sie, ob geeignete fehler für falsche anmeldeinformationen angezeigt werden passwort zurücksetzen bestätigen sie, dass der passwortzurücksetzungsablauf von anfang bis ende funktioniert sitzungspersistenz überprüfen sie, ob benutzer zwischen den seitenbesuchen angemeldet bleiben abmeldeprozess stellen sie sicher, dass benutzer sich ordnungsgemäß abmelden können und die sitzungen beendet werden häufige sicherheitsanfälligkeiten, die vermieden werden sollten beim aufbau von authentifizierungssystemen sollten sie sich dieser häufigen sicherheitsprobleme bewusst sein passwortspeicherung speichern sie niemals passwörter im klartext back4app kümmert sich automatisch darum brute force angriffe implementieren sie eine ratenbegrenzung für anmeldeversuche back4app bietet diese funktionalität cross site scripting (xss) bereinigen sie benutzereingaben, um skriptinjektionen zu verhindern cross site request forgery (csrf) verwenden sie geeignete tokens, um die authentizität von anfragen zu überprüfen unsichere direkte objektverweise setzen sie keine sensiblen ids oder verweise in urls aus back4app sicherheitsbest practices back4app bietet mehrere sicherheitsfunktionen, die sie nutzen sollten 1 klassenebene berechtigungen (clps) in deinem back4app dashboard kannst du klassenebene berechtigungen festlegen, um zu steuern, wer objekte lesen, schreiben und löschen kann gehe zu deinem back4app dashboard navigiere zu datenbank → browser klicke auf die schaltfläche "sicherheit" für deine benutzerklasse konfiguriere die berechtigungen entsprechend \[bild back4app bildschirm für klassenebene berechtigungen, der die sicherheitseinstellungen der benutzerklasse zeigt] für die benutzerklasse umfassen typische einstellungen öffentlicher lesezugriff nur für bestimmte felder (benutzername, avatar) kein öffentlicher schreib oder löschzugriff nur authentifizierte benutzer können ihre eigenen datensätze aktualisieren 2 zugriffskontrolllisten (acls) für einzelne objekte kannst du acls verwenden, um den zugriff zu steuern // 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(); dies stellt sicher, dass nur der benutzer, der ein objekt erstellt hat, darauf zugreifen oder es ändern kann 3 verwendung des master schlüssels back4app bietet einen master schlüssel, der sicherheitsprüfungen umgeht gib dies niemals im client code preis // never do this in client side code parse cloud usemasterkey(); // this should only be used in cloud code verwenden sie stattdessen für operationen, die erhöhte berechtigungen erfordern, cloud funktionen 4 e mail verifizierung aktivieren sie die e mail verifizierung in ihren back4app einstellungen, um sicherzustellen, dass benutzer gültige e mail adressen angeben gehen sie zu ihrem back4app dashboard navigieren sie zu app einstellungen → e mail einstellungen konfigurieren sie ihren e mail adapter aktivieren sie die e mail verifizierung \[bild back4app e mail einstellungen konfigurationsbildschirm] 5 zwei faktor authentifizierung für zusätzliche sicherheit können sie die zwei faktor authentifizierung mit back4app cloud funktionen implementieren dies erfordert, dass benutzer eine zweite form der verifizierung (typischerweise einen code, der an ihr telefon oder ihre e mail gesendet wird) beim anmelden angeben implementierung von ratenbegrenzung um sich gegen brute force angriffe zu schützen, können sie die ratenbegrenzung mit cloud funktionen implementieren // 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; } }); fazit in diesem tutorial haben sie ein umfassendes authentifizierungssystem für eine social network anwendung mit back4app erstellt sie haben die benutzerregistrierung, den login, die passwortzurücksetzung und die profilverwaltung implementiert, alles unterstützt durch die integrierten benutzerverwaltungsfunktionen von back4app lassen sie uns zusammenfassen, was sie gelernt haben back4apps benutzerverwaltungssystem sie haben gelernt, wie der parse server von back4app integrierte benutzerauthentifizierung mit der parse user klasse bereitstellt benutzerregistrierung sie haben ein anmeldeformular implementiert, das neue benutzerkonten in der datenbank von back4app erstellt benutzeranmeldung sie haben ein anmeldesystem erstellt, das benutzer authentifiziert und sitzungen verwaltet passwortzurücksetzung sie haben eine sichere passwortzurücksetzungsfunktion hinzugefügt, die wiederherstellungs e mails sendet sitzungsverwaltung sie haben gelernt, wie man benutzersitzungen aufrechterhält und routen schützt profilverwaltung sie haben eine profilseite erstellt, die es benutzern ermöglicht, ihre informationen zu aktualisieren und profilbilder hochzuladen sicherheitsbest practices sie haben erkundet, wie sie ihr authentifizierungssystem mit den sicherheitsfunktionen von back4app absichern können mit back4app konnten sie sich darauf konzentrieren, eine großartige benutzererfahrung zu schaffen, anstatt komplexe backend infrastrukturen aufzubauen der parse server, der back4app antreibt, stellte alle notwendigen authentifizierungs apis bereit und sorgte gleichzeitig dafür, dass ihre benutzerdaten sicher bleiben das authentifizierungssystem, das sie aufgebaut haben, bildet die grundlage ihrer social network anwendung mit diesem system können sie ihre anwendung nun erweitern, indem sie funktionen wie beiträge, kommentare, likes und direktnachrichten hinzufügen, und das alles mit back4app als backend service nächste schritte integration von sozialem login fügen sie die anmeldung mit google, facebook oder anderen anbietern unter verwendung der oauth funktionen von back4app hinzu erweiterte sicherheit implementieren sie eine zwei faktor authentifizierung für zusätzliche sicherheit benutzerrollen richten sie eine rollenbasierte zugriffskontrolle für verschiedene benutzertypen ein echtzeitfunktionen fügen sie echtzeitnachrichten und benachrichtigungen mit back4apps live query hinzu für den vollständigen code der back4gram social network anwendung können sie das github repository https //github com/templates back4app/back4gram einsehen die leistungsstarken backend dienste von back4app und die integration von parse server machen es zu einer ausgezeichneten wahl für den aufbau sicherer, skalierbarer social network anwendungen durch die nutzung der integrierten benutzerverwaltungsfunktionen können sie ein robustes authentifizierungssystem mit minimalem aufwand erstellen, sodass sie sich auf die entwicklung einzigartiger funktionen konzentrieren können, die ihre anwendung hervorheben