การจัดการโปรไฟล์ผู้ใช้และการตั้งค่าสำหรับเครือข่ายสังคมของคุณ

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการจัดการโปรไฟล์ผู้ใช้และการตั้งค่าสำหรับแอปพลิเคชันเครือข่ายสังคมของคุณโดยใช้ 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 class ไม่ได้มีไว้สำหรับการตรวจสอบสิทธิ์เท่านั้น—มันยังเหมาะสำหรับการเก็บข้อมูลโปรไฟล์อีกด้วย เมื่อคุณสร้างผู้ใช้ใหม่ 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 hook ของ 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's 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 พื้นฐาน แต่คุณสามารถใช้งานการตรวจสอบสองขั้นตอนด้วย cloud functions ของ 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 ของคุณ คุณสามารถเรียกใช้ cloud functions เหล่านี้ 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 }; } }; ในแอปพลิเคชันที่ใช้งานจริง คุณควรดำเนินการนี้อย่างปลอดภัยด้วย cloud function เพื่อหลีกเลี่ยงการเปิดเผยชื่อผู้ใช้/รหัสผ่าน ขั้นตอนที่ 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 relations เพิ่มฟีดกิจกรรม เพื่อแสดงการกระทำของผู้ใช้โดยใช้ parse queries สร้างการส่งข้อความโดยตรง ระหว่างผู้ใช้ด้วย live query สำหรับการอัปเดตแบบเรียลไทม์ ดำเนินการตรวจสอบเนื้อหา สำหรับเนื้อหาที่สร้างโดยผู้ใช้ด้วย cloud functions ด้วย back4app เป็นบริการด้านหลังของคุณ คุณสามารถมุ่งเน้นไปที่การสร้างประสบการณ์ผู้ใช้ที่น่าสนใจแทนที่จะสร้างโครงสร้างพื้นฐานที่ซับซ้อน สำหรับโค้ดทั้งหมดของแอปพลิเคชันเครือข่ายสังคม back4gram รวมถึงการจัดการโปรไฟล์และการตั้งค่า คุณสามารถตรวจสอบ ที่เก็บ github https //github com/templates back4app/back4gram