Управление профилем пользователя и настройками для вашей социальной сети

введение в этом учебном пособии вы узнаете, как реализовать управление профилем пользователя и настройками для вашего приложения социальной сети с использованием back4app вместо того чтобы создавать все с нуля, вы воспользуетесь мощными возможностями управления данными back4app для хранения и извлечения информации о профиле пользователя, обработки загрузок аватаров и управления настройками пользователя к концу этого учебного пособия вы создадите систему, в которой пользователи смогут просматривать и обновлять информацию о своем профиле загружать и управлять фотографиями профиля настраивать параметры конфиденциальности и уведомлений настраивать предпочтения своей учетной записи эти функции необходимы для любой современной социальной сети, предоставляя пользователям контроль над своей идентичностью и опытом на вашей платформе предварительные требования чтобы завершить это учебное пособие, вам потребуется учетная запись back4app вы можете зарегистрироваться для получения бесплатной учетной записи на back4app com https //www back4app com проект back4app, настроенный с конфигурацией parse sdk работающая система аутентификации вы можете следовать нашему учебнику по системе аутентификации с back4app если вы еще не реализовали это базовые знания javascript, react js и современных концепций веб разработки проект back4gram найдите здесь полный код для образца проекта социальной сети созданного с помощью back4app шаг 1 – понимание структуры данных профиля в back4app прежде чем погрузиться в реализацию, давайте поймем, как структурированы данные профиля пользователя в back4app класс parse user back4app's parse user класс предназначен не только для аутентификации — он также идеально подходит для хранения информации о профиле когда вы создаете нового пользователя, back4app автоматически создает запись в классе user с полями по умолчанию имя пользователя пароль (хранится безопасно и не может быть восстановлен) электронная почта подтвержденная почта authdata тем не менее, настоящая сила заключается в расширении этого класса с помощью пользовательских полей для ваших данных профиля биография самоописание пользователя аватар фотография профиля (хранится как parse file) полное имя полное имя пользователя местоположение город/страна пользователя веб сайт личный веб сайт пользователя социальные ссылки на профили в социальных сетях предпочтения настройки и предпочтения пользователя настройка расширенных свойств пользователя в вашей панели управления back4app вы можете добавить эти пользовательские поля в класс пользователя перейдите в базу данных → обозреватель выберите класс пользователя нажмите "добавить новый столбец" определите имя поля (например, "bio") и тип (например, "string") \[изображение панель управления back4app, показывающая добавление нового столбца в класс пользователь] вы можете получить доступ и обновить эти поля через parse sdk так же, как и любой другой объект проект back4gram найдите здесь полный код для образца проекта социальной сети созданного с помощью back4app шаг 2 – получение данных профиля пользователя первый шаг в реализации управления профилем – это получение данных профиля текущего пользователя получение профиля текущего пользователя back4app упрощает получение текущего вошедшего пользователя 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 } }; этот код демонстрирует, как получить объект текущего пользователя с помощью parse user current() получить доступ к встроенным свойствам с помощью get('fieldname') обрабатывать необязательные поля с запасными значениями получить доступ к url адресам файлов для изображений аватаров в приложении back4gram это реализовано в profilepage js хуке useeffect компонента 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 найдите здесь полный код для образца проекта социальной сети созданного с помощью back4app шаг 3 – обновление информации профиля пользователя позволение пользователям обновлять информацию о своем профиле является основной функцией управления профилем обновление полей профиля когда пользователь отправляет обновленную информацию о профиле, вы можете сохранить ее в back4app с помощью 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; } }; эта функция получает текущий объект пользователя устанавливает обновленные значения полей сохраняет изменения в back4app в приложении back4gram обновление профиля реализовано в функции handleupdateprofile 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 найдите здесь полный код для образца проекта социальной сети созданного с помощью back4app шаг 4 – обработка загрузки фотографий профиля фотографии профиля являются ключевой частью идентичности пользователя в социальных сетях back4app упрощает работу с файлами с помощью parse file загрузка изображений аватара чтобы загрузить и сохранить фотографию профиля 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; } }; этот код создает новый объект parse file из выбранного файла сохраняет файл в хранилище back4app ассоциирует файл с полем аватара пользователя обновляет объект пользователя в базе данных управление файлами в back4app когда вы загружаете файлы с помощью parse file, back4app безопасно хранит файл в своем облачном хранилище генерирует уникальный url для доступа к файлу управляет разрешениями на файл на основе acl родительского объекта обрабатывает распределение cdn для быстрой загрузки это делает его гораздо проще, чем создание собственной системы хранения и управления файлами шаг 5 – реализация настроек пользователя помимо основной информации профиля, социальные сети обычно предлагают различные настройки для конфиденциальности, уведомлений и предпочтений хранение настроек пользователя в back4app у вас есть два основных подхода к хранению настроек пользователя 1\ использование полей класса пользователя для простых настроек для простых булевых или перечисляемых настроек 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\ использование json объектов для сложных настроек для более сложных или сгруппированных настроек вы можете использовать объект json 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; } }; этот подход позволяет хранить сложные, вложенные настройки в одном поле пример из settingspage js back4gram в приложении back4gram настройки пользователя управляются в компоненте settingspage js ключевые части, которые взаимодействуют с back4app, включают // 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 } }; этот код показывает, как back4gram получает настройки текущего пользователя из back4app предоставляет значения по умолчанию для отсутствующих настроек обновляет только измененную категорию настроек сохраняет изменения обратно в back4app проект back4gram найдите здесь полный код для образца проекта социальной сети созданного с помощью back4app шаг 6 – расширенные функции настройки безопасности аккаунта безопасность является критически важным аспектом управления профилем пользователя давайте реализуем несколько расширенных функций безопасности для учетных записей пользователей реализация двухфакторной аутентификации хотя это не включено в базовый пример back4gram, вы можете реализовать двухфакторную аутентификацию с помощью облачных функций back4app // 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 }; }); из вашего react приложения вы можете вызывать эти облачные функции 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); } }; проверка электронной почты back4app предоставляет встроенную поддержку для проверки электронной почты вы можете отправить письмо для подтверждения 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 }; } }; смена пароля позвольте пользователям обновлять свой пароль с надлежащей проверкой 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 }; } }; в производственном приложении вы должны реализовать это безопасно с помощью облачной функции, чтобы избежать раскрытия комбинации имени пользователя и пароля шаг 7 – запрос профилей пользователей для социальных функций социальные сети должны позволять пользователям просматривать профили других пользователей вот как запрашивать и отображать профили пользователей с помощью back4app получение профилей других пользователей 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; } }; эта функция создает запрос для класса parse user извлекает конкретного пользователя по id соблюдает настройки конфиденциальности возвращает соответствующие данные в зависимости от видимости реализация поиска пользователей чтобы пользователи могли находить другие профили 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 \[]; } }; в приложении back4gram поиск пользователей реализован в 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 найдите здесь полный код для образца проекта социальной сети созданного с помощью back4app заключение в этом учебном пособии вы узнали, как реализовать комплексное управление профилем пользователя и настройками с помощью back4app вы увидели, как структура данных профиля пользователя в классе user back4app получение и обновление информации профиля с использованием parse sdk обработка загрузки файлов для фотографий профиля с помощью parse file реализация настроек пользователя для конфиденциальности и предпочтений добавление функций безопасности таких как двухфакторная аутентификация и проверка электронной почты запрос профилей пользователей для функций социальной сети мощные функции управления данными back4app упрощают создание надежных систем профилей без необходимости строить сложную инфраструктуру бэкенда с нуля используя класс parse user и расширяя его пользовательскими полями, вы можете быстро создать гибкую систему профилей пользователей для вашей социальной сети следующие шаги реализация социальных связей таких как подписки/подписчики с использованием отношений parse добавление лент активности для отображения действий пользователей с использованием запросов parse создание прямых сообщений между пользователями с помощью live query для обновлений в реальном времени реализация модерации контента для контента, созданного пользователями, с помощью облачных функций с back4app в качестве вашего сервиса бэкенда вы можете сосредоточиться на создании увлекательного пользовательского опыта, а не на построении сложной инфраструктуры для полного кода приложения социальной сети back4gram, включая управление профилем и настройками, вы можете ознакомиться с репозиторием github https //github com/templates back4app/back4gram