社交网络的用户资料和设置管理

介绍 在本教程中，您将学习如何使用 back4app 实现社交网络应用程序的用户个人资料和设置管理。您将利用 back4app 强大的数据管理功能来存储和检索用户个人资料信息，处理头像上传，并管理用户设置，而不是从头开始构建一切。 在本教程结束时，您将创建一个系统，用户可以： 查看和更新他们的个人资料信息 上传和管理个人资料图片 配置隐私和通知设置 自定义他们的账户偏好 这些功能对于任何现代社交网络都是必不可少的，为用户提供了对其身份和在您平台上体验的控制。 先决条件 要完成本教程，您需要： 一个 back4app 账户。您可以在 back4app com https //www back4app com 注册一个免费账户。 一个配置了 parse sdk 的 back4app 项目。 一个有效的身份验证系统。如果您还没有实现，可以参考我们的 与 back4app 的身份验证系统教程 。 对 javascript、react js 和现代网页开发概念的基本知识。 back4gram 项目： 在 这里 找到完整的代码， 社交网络示例项目 是用 back4app 构建的。 步骤 1 – 理解 back4app 中的用户资料数据结构 在深入实现之前，让我们了解一下 back4app 中用户资料数据的结构。 parse user 类 back4app的 parse user 类不仅用于身份验证——它也非常适合存储个人资料信息。当您创建一个新用户时，back4app会自动在用户类中创建一个带有默认字段的条目： 用户名 密码 （安全存储且不可检索） 电子邮件 电子邮件已验证 认证数据 然而，真正的力量来自于通过自定义字段扩展此类以存储您的个人资料数据： 个人简介 用户的自我描述 头像 个人资料图片（存储为parse file） 全名 用户的全名 位置 用户的城市/国家 网站 用户的个人网站 社交 社交媒体个人资料的链接 偏好设置 用户设置和偏好 设置扩展用户属性 在您的 back4app 控制面板中，您可以将这些自定义字段添加到用户类： 导航到数据库 → 浏览器 选择用户类 点击 "添加新列" 定义字段名称（例如，"bio"）和类型（例如，"string"） \[image 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; } }; 这种方法允许您在一个字段中存储复杂的嵌套设置。 来自 back4gram 的 settingspage js 示例 在 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 实现全面的用户个人资料和设置管理。您已经看到如何： 构建用户个人资料数据 在 back4app 的用户类中 获取和更新个人资料信息 使用 parse sdk 处理文件上传 使用 parse file 上传个人资料图片 实现用户设置 用于隐私和偏好设置 添加安全功能 如双因素认证和电子邮件验证 查询用户个人资料 用于社交网络功能 back4app 强大的数据管理功能使得创建强大的个人资料系统变得简单，而无需从头构建复杂的后端基础设施。通过使用 parse user 类并扩展自定义字段，您可以快速为社交网络创建灵活的用户个人资料系统。 下一步 实现社交连接 如关注/粉丝使用 parse 关系 添加活动动态 显示用户操作使用 parse 查询 构建直接消息 在用户之间使用实时查询进行实时更新 实现内容审核 用于用户生成内容的云函数 有了 back4app 作为您的后端服务，您可以专注于创建引人入胜的用户体验，而不是构建复杂的基础设施。 有关 back4gram 社交网络应用程序的完整代码，包括个人资料和设置管理，您可以查看 github 仓库 https //github com/templates back4app/back4gram 。