Benutzerprofil und Einstellungen Verwaltung für Ihr soziales Netzwerk

einführung in diesem tutorial lernen sie, wie sie die verwaltung von benutzerprofilen und einstellungen für ihre social network anwendung mit back4app implementieren anstatt alles von grund auf neu zu erstellen, nutzen sie die leistungsstarken datenverwaltungsfunktionen von back4app, um benutzerprofilinformationen zu speichern und abzurufen, avatar uploads zu verwalten und benutzereinstellungen zu verwalten am ende dieses tutorials haben sie ein system erstellt, in dem benutzer ihre profilinformationen anzeigen und aktualisieren profilbilder hochladen und verwalten datenschutz und benachrichtigungseinstellungen konfigurieren ihre kontoeinstellungen anpassen diese funktionen sind für jedes moderne soziale netzwerk unerlässlich, da sie den benutzern kontrolle über ihre identität und erfahrung auf ihrer plattform bieten 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 mit dem konfigurierten parse sdk eingerichtet ist ein funktionierendes authentifizierungssystem sie können unser tutorial zum authentifizierungssystem mit back4app folgen, wenn sie dies noch nicht implementiert haben grundkenntnisse in javascript, react js und modernen webentwicklungskonzepten back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 1 – verständnis der profil datenstruktur in back4app bevor wir mit der implementierung beginnen, lassen sie uns verstehen, wie die benutzerdatenprofile in back4app strukturiert sind die parse user klasse die parse user klasse von back4app dient nicht nur der authentifizierung – sie ist auch perfekt zum speichern von profilinformationen wenn sie einen neuen benutzer erstellen, erstellt back4app automatisch einen eintrag in der benutzerklasse mit standardfeldern benutzername passwort (sicher gespeichert und nicht abrufbar) e mail e mailverifiziert authdata die wahre kraft kommt jedoch von der erweiterung dieser klasse mit benutzerdefinierten feldern für ihre profildaten biografie selbstbeschreibung des benutzers avatar profilbild (als parse file gespeichert) vollständiger name vollständiger name des benutzers standort stadt/land des benutzers website persönliche website des benutzers soziale medien links zu sozialen medienprofilen einstellungen benutzereinstellungen und präferenzen einrichten erweiterter benutzerattribute in deinem back4app dashboard kannst du diese benutzerdefinierten felder zur benutzerklasse hinzufügen navigiere zu datenbank → browser wähle die benutzerklasse aus klicke auf "eine neue spalte hinzufügen" definiere den feldnamen (z b "bio") und den typ (z b "string") \[bild back4app dashboard, das das hinzufügen einer neuen spalte zur benutzerklasse zeigt] sie können auf diese felder über das parse sdk zugreifen und sie aktualisieren, genau wie bei jedem anderen objekt back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 2 – abrufen der benutzerdaten der erste schritt bei der implementierung des profilmanagements besteht darin, die profildaten des aktuellen benutzers abzurufen abrufen des profils des aktuellen benutzers back4app macht es einfach, den aktuell angemeldeten benutzer abzurufen const fetchuserprofile = async () => { try { // get the current user object const currentuser = await parse user current(); if (!currentuser) { // handle the case where no user is logged in navigate('/login'); return; } // access user properties const username = currentuser get('username'); const email = currentuser get('email'); const bio = currentuser get('bio') || ''; const fullname = currentuser get('fullname') || ''; // get avatar if available const avatar = currentuser get('avatar'); const avatarurl = avatar ? avatar url() null; // set state with user data setuserdata({ username, email, bio, fullname, avatarurl }); } catch (error) { console error('error fetching user profile ', error); // handle error appropriately } }; dieser code zeigt, wie man das aktuelle benutzerobjekt mit parse user current() auf integrierte eigenschaften mit get('fieldname') optionale felder mit fallback werten behandeln datei urls für avatarbilder abrufen in der back4gram anwendung wird dies im profilepage js hook useeffect der komponente implementiert useeffect(() => { const loadprofile = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } setuser({ id currentuser id, username currentuser get('username'), email currentuser get('email'), bio currentuser get('bio') || '', avatar currentuser get('avatar') ? currentuser get('avatar') url() null }); // set stats setstats({ posts userposts length, followers currentuser get('followers') || 0, following currentuser get('following') || 0 }); setisloading(false); } catch (error) { // error handling } }; loadprofile(); }, \[navigate]); back4gram projekt finden sie hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 3 – aktualisierung der benutzerprofilinformationen benutzern die aktualisierung ihrer profilinformationen zu ermöglichen, ist eine kernfunktion des profilmanagements aktualisierung der profilfelder wenn ein benutzer aktualisierte profilinformationen einreicht, können sie diese mit back4app speichern const updateprofile = async (profiledata) => { try { const user = await parse user current(); if (!user) return false; // update user fields user set('fullname', profiledata fullname); user set('bio', profiledata bio); user set('website', profiledata website); user set('location', profiledata location); // save changes to back4app await user save(); return true; } catch (error) { console error('error updating profile ', error); return false; } }; diese funktion holt das aktuelle benutzerobjekt setzt die aktualisierten feldwerte speichert die änderungen in back4app in der back4gram anwendung wird die profilaktualisierung in der handleupdateprofile funktion implementiert 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); } await user save(); toaster create({ title 'success', description 'profile updated successfully', type 'success', }); } catch (error) { console error('error updating profile ', error); // handle error } finally { setisupdating(false); } }; back4gram projekt finden hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 4 – umgang mit dem hochladen von profilbildern profilbilder sind ein wichtiger teil der benutzeridentität in sozialen netzwerken back4app erleichtert die dateiverwaltung mit parse file hochladen von avatarbildern um ein profilbild hochzuladen und zu speichern const uploadavatar = async (file) => { try { const user = await parse user current(); if (!user || !file) return null; // create a parse file const parsefile = new parse file(file name, file); // save the file to back4app await parsefile save(); // update the user's avatar field user set('avatar', parsefile); await user save(); // return the file url return parsefile url(); } catch (error) { console error('error uploading avatar ', error); return null; } }; dieser code erstellt ein neues parse file objekt aus der ausgewählten datei speichert die datei im speicher von back4app verknüpft die datei mit dem avatar feld des benutzers aktualisiert das benutzerobjekt in der datenbank dateiverwaltung in back4app wenn sie dateien mit parse file hochladen, back4app speichert die datei sicher in seinem cloud speicher generiert eine eindeutige url zum zugriff auf die datei verwaltet die dateiberechtigungen basierend auf der acl des übergeordneten objekts verwaltet die cdn verteilung für schnelles laden das macht es viel einfacher, als ein eigenes dateispeicher und verwaltungssystem zu erstellen schritt 5 – implementierung der benutzereinstellungen über grundlegende profilinformationen hinaus bieten soziale netzwerke typischerweise verschiedene einstellungen für datenschutz, benachrichtigungen und präferenzen an speichern von benutzereinstellungen in back4app sie haben zwei hauptansätze zum speichern von benutzereinstellungen 1\ verwendung von benutzerklassenfeldern für einfache einstellungen für einfache boolesche oder enumerierte einstellungen const updateprivacysettings = async (settings) => { try { const user = await parse user current(); if (!user) return false; // update privacy settings user set('profilevisibility', settings profilevisibility); // 'public', 'friends', 'private' user set('allowdirectmessages', settings allowdirectmessages); // boolean user set('showonlinestatus', settings showonlinestatus); // boolean await user save(); return true; } catch (error) { console error('error updating privacy settings ', error); return false; } }; 2\ verwendung von json objekten für komplexe einstellungen für komplexere oder gruppierte einstellungen können sie ein json objekt verwenden const updateallsettings = async (settingsdata) => { try { const user = await parse user current(); if (!user) return false; // store all settings as a json object user set('usersettings', { privacy { profilevisibility settingsdata profilevisibility, allowdirectmessages settingsdata allowdirectmessages, showonlinestatus settingsdata showonlinestatus }, notifications { emailnotifications settingsdata emailnotifications, pushnotifications settingsdata pushnotifications, mentionalerts settingsdata mentionalerts }, theme { darkmode settingsdata darkmode, fontsize settingsdata fontsize, accentcolor settingsdata accentcolor } }); await user save(); return true; } catch (error) { console error('error updating settings ', error); return false; } }; dieser ansatz ermöglicht es ihnen, komplexe, verschachtelte einstellungen in einem einzigen feld zu speichern beispiel aus back4gram's settingspage js in der back4gram anwendung werden die benutzereinstellungen in der settingspage js komponente verwaltet die wichtigsten teile, die mit back4app interagieren, sind // fetching current settings useeffect(() => { const fetchsettings = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } const usersettings = currentuser get('usersettings') || {}; setprivacysettings({ profilevisibility usersettings privacy? profilevisibility || 'public', postprivacy usersettings privacy? postprivacy || 'friends' }); setnotificationsettings({ emailnotifications usersettings notifications? emailnotifications || false, pushnotifications usersettings notifications? pushnotifications || false }); // other settings } catch (error) { console error('error fetching settings ', error); } }; fetchsettings(); }, \[navigate]); // saving settings const savesettings = async (settingtype, settingdata) => { try { const user = await parse user current(); if (!user) return; // get current settings or initialize if none exist const currentsettings = user get('usersettings') || {}; // update only the specific settings category const updatedsettings = { currentsettings, \[settingtype] settingdata }; // save updated settings user set('usersettings', updatedsettings); await user save(); toaster create({ title 'settings saved', description 'your preferences have been updated ', type 'success', }); } catch (error) { console error('error saving settings ', error); // handle error } }; dieser code zeigt, wie back4gram die aktuellen benutzereinstellungen von back4app abruft standardeinstellungen für fehlende einstellungen bereitstellt nur die geänderte einstellungs kategorie aktualisiert änderungen zurück zu back4app speichert back4gram projekt finden hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app schritt 6 – erweiterte funktionen kontosicherheitseinstellungen sicherheit ist ein kritischer aspekt des benutzermanagements lassen sie uns einige erweiterte sicherheitsfunktionen für benutzerkonten implementieren implementierung der zwei faktor authentifizierung obwohl nicht im grundlegenden back4gram beispiel enthalten, können sie die zwei faktor authentifizierung mit den cloud funktionen von back4app implementieren // cloud function to enable 2fa parse cloud define("enable2fa", async (request) => { if (!request user) throw new error("user must be logged in"); // generate a secret key for the user const secret = generatetotpsecret(); // save the secret to the user object request user set("totpsecret", secret); await request user save(null, { usemasterkey true }); // return the secret and qr code data for setup return { secret secret, qrcode generateqrcodeuri(secret, request user get("email")) }; }); // cloud function to verify 2fa code parse cloud define("verify2facode", async (request) => { if (!request user) throw new error("user must be logged in"); const { code } = request params; // get the user's secret const secret = request user get("totpsecret"); // verify the provided code const isvalid = verifytotpcode(code, secret); if (!isvalid) { throw new error("invalid verification code"); } // mark 2fa as enabled request user set("is2faenabled", true); await request user save(null, { usemasterkey true }); return { success true }; }); von ihrer react anwendung aus können sie diese cloud funktionen aufrufen const enable2fa = async () => { try { const result = await parse cloud run("enable2fa"); // show qr code setup to user setqrcodedata(result qrcode); settwofactorsecret(result secret); } catch (error) { console error("error enabling 2fa ", error); } }; const verify2fasetup = async (code) => { try { await parse cloud run("verify2facode", { code }); // 2fa successfully set up setis2faenabled(true); } catch (error) { console error("error verifying 2fa code ", error); } }; e mail bestätigung back4app bietet integrierte unterstützung für die e mail verifizierung sie können eine verifizierungs e mail auslösen const sendverificationemail = async () => { try { const user = await parse user current(); if (user get('emailverified')) { return { success false, message 'email already verified' }; } await parse user requestemailverification(user get('email')); return { success true }; } catch (error) { console error('error sending verification email ', error); return { success false, error error message }; } }; passwortänderung erlauben sie benutzern, ihr passwort mit ordnungsgemäßer verifizierung zu aktualisieren const changepassword = async (currentpassword, newpassword) => { try { const user = await parse user current(); // verify current password by trying to login await parse user login(user get('username'), currentpassword); // if login succeeded, update password user set('password', newpassword); await user save(); return { success true }; } catch (error) { console error('error changing password ', error); return { success false, error error message }; } }; in einer produktionsanwendung sollten sie dies sicher mit einer cloud funktion implementieren, um die kombination aus benutzername und passwort nicht offenzulegen schritt 7 – abfragen von benutzerprofilen für soziale funktionen soziale netzwerke müssen es den nutzern ermöglichen, die profile anderer nutzer zu sehen so können sie benutzerprofile mit back4app abfragen und anzeigen abrufen anderer benutzerprofile const fetchuserprofile = async (userid) => { try { const query = new parse query(parse user); // include any pointer fields you want to retrieve query include('settings'); const user = await query get(userid); // check privacy settings const profilevisibility = user get('profilevisibility') || 'public'; const currentuser = await parse user current(); // if profile is private and not viewed by the owner if (profilevisibility === 'private' && (!currentuser || currentuser id !== user id)) { return { id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null, isprivate true }; } // return public profile data return { id user id, username user get('username'), fullname user get('fullname'), bio user get('bio'), avatar user get('avatar') ? user get('avatar') url() null, followerscount user get('followerscount') || 0, followingcount user get('followingcount') || 0, isprivate false }; } catch (error) { console error('error fetching user profile ', error); return null; } }; diese funktion erstellt eine abfrage für die klasse parse user ruft einen bestimmten benutzer nach id ab respektiert die datenschutzeinstellungen gibt geeignete daten basierend auf der sichtbarkeit zurück implementierung der benutzersuche um benutzern zu ermöglichen, andere profile zu finden const searchusers = async (searchterm) => { try { const query = new parse query(parse user); // create a compound query for username or full name const usernamequery = new parse query(parse user); usernamequery contains('username', searchterm); const fullnamequery = new parse query(parse user); fullnamequery contains('fullname', searchterm); // combine queries with or query orquery(\[usernamequery, fullnamequery]); // only return public profiles query equalto('profilevisibility', 'public'); // limit to 20 results and skip private fields query limit(20); query select(\['username', 'fullname', 'avatar']); const results = await query find(); // format results return results map(user => ({ id user id, username user get('username'), fullname user get('fullname'), avatar user get('avatar') ? user get('avatar') url() null })); } catch (error) { console error('error searching users ', error); return \[]; } }; in der back4gram app ist die benutzersuche implementiert in searchpage js const handlesearch = async (query) => { if (!query trim()) return; setisloading(true); try { // search for users const userquery = new parse query(parse user); userquery contains('username', query); userquery limit(10); const userresults = await userquery find(); const foundusers = userresults map(user => ({ id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null })); setusers(foundusers); } catch (error) { console error('error searching ', error); // handle error } finally { setisloading(false); } }; back4gram projekt finde hier den vollständigen code für ein beispielprojekt für ein soziales netzwerk erstellt mit back4app fazit in diesem tutorial haben sie gelernt, wie man umfassendes benutzerprofil und einstellungsmanagement mit back4app implementiert sie haben gesehen, wie man strukturieren sie benutzerdatenprofile in der benutzerklasse von back4app abrufen und aktualisieren von profilinformationen mit dem parse sdk datei uploads verwalten für profilbilder mit parse file benutzereinstellungen implementieren für datenschutz und präferenzen sicherheitsfunktionen hinzufügen wie zwei faktor authentifizierung und e mail verifizierung benutzerprofile abfragen für soziale netzwerkfunktionen die leistungsstarken datenverwaltungsfunktionen von back4app erleichtern die erstellung robuster profilsysteme, ohne komplexe backend infrastrukturen von grund auf neu aufbauen zu müssen durch die verwendung der klasse parse user und deren erweiterung mit benutzerdefinierten feldern können sie schnell ein flexibles benutzerdatenprofilsystem für ihr soziales netzwerk erstellen nächste schritte soziale verbindungen implementieren wie folgen/follower mit parse relations aktivitätsfeeds hinzufügen um benutzeraktionen mit parse queries anzuzeigen direktnachrichten aufbauen zwischen benutzern mit live query für echtzeit updates inhaltsmoderation implementieren für nutzergenerierte inhalte mit cloud functions mit back4app als ihrem backend service können sie sich darauf konzentrieren, ansprechende benutzererlebnisse zu schaffen, anstatt komplexe infrastrukturen aufzubauen für den vollständigen code der back4gram sozialnetzwerkanwendung, einschließlich profil und einstellungsmanagement, können sie das github repository https //github com/templates back4app/back4gram einsehen