ระบบการตรวจสอบสิทธิ์สำหรับเครือข่ายสังคมของคุณ

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการสร้างระบบการตรวจสอบสิทธิ์ที่ครอบคลุมสำหรับแอปพลิเคชันเว็บโซเชียลเน็ตเวิร์กของคุณ โดยใช้ back4app เป็นบริการแบ็กเอนด์ คุณจะสร้างฟังก์ชันการลงทะเบียนผู้ใช้ การเข้าสู่ระบบ การรีเซ็ตรหัสผ่าน และการจัดการเซสชัน ฟีเจอร์ที่สำคัญสำหรับแอปพลิเคชันโซเชียลสมัยใหม่ใดๆ back4app เป็นแพลตฟอร์ม backend as a service (baas) ที่สร้างขึ้นบน parse server ซึ่งช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่สามารถขยายได้โดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ความสามารถในการตรวจสอบสิทธิ์ผู้ใช้ที่มีอยู่ในตัวทำให้มันเหมาะสำหรับการสร้างระบบการจัดการผู้ใช้ที่ปลอดภัยได้อย่างรวดเร็ว เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้สร้างระบบการตรวจสอบสิทธิ์ที่ทำงานได้อย่างสมบูรณ์แบบคล้ายกับที่ใช้ใน back4gram ซึ่งเป็นแอปพลิเคชันโซเชียลเน็ตเวิร์ก คุณจะดำเนินการลงทะเบียนผู้ใช้พร้อมการตรวจสอบความถูกต้อง การเข้าสู่ระบบที่ปลอดภัย การกู้คืนรหัสผ่าน และเซสชันที่คงอยู่ตลอดแอปพลิเคชัน ซึ่งจะมอบประสบการณ์ที่ราบรื่นให้กับผู้ใช้ของคุณในขณะที่รักษาความปลอดภัยให้กับบัญชีของพวกเขา โครงการ back4gram ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ โครงการตัวอย่างโซเชียลเน็ตเวิร์ก ที่สร้างขึ้นด้วย back4app ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี บัญชี back4app คุณสามารถลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าโปรเจกต์ back4app คุณสามารถเรียนรู้วิธีสร้างโปรเจกต์ใหม่โดยทำตาม คู่มือเริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/welcome ติดตั้ง node js บนเครื่องของคุณ ความรู้พื้นฐานเกี่ยวกับ javascript, react js, และแนวคิด restful api ความคุ้นเคยกับแนวคิดการพัฒนาเว็บสมัยใหม่ (ส่วนประกอบ, การจัดการสถานะ, ฯลฯ) ขั้นตอนที่ 1 – ทำความเข้าใจระบบการจัดการผู้ใช้ของ back4app ก่อนที่จะดำดิ่งสู่โค้ด สิ่งสำคัญคือต้องเข้าใจว่า back4app จัดการการจัดการผู้ใช้อย่างไร back4app สร้างขึ้นบน parse server ซึ่งมี parse user คลาสที่ออกแบบมาโดยเฉพาะสำหรับการตรวจสอบสิทธิ์ คลาส parse user คลาส parse user ใน back4app ขยายจาก parse object มาตรฐานด้วยฟังก์ชันเฉพาะสำหรับการตรวจสอบสิทธิ์ผู้ใช้ มันรวมถึงฟิลด์ในตัวหลายฟิลด์ ชื่อผู้ใช้ ตัวระบุที่ไม่ซ้ำกันสำหรับผู้ใช้ (จำเป็น) รหัสผ่าน รหัสผ่านของผู้ใช้ (จำเป็นสำหรับการลงทะเบียน แต่ไม่ถูกเก็บในรูปแบบที่สามารถเรียกคืนได้) อีเมล ที่อยู่อีเมลของผู้ใช้ (ไม่จำเป็น แต่แนะนำ) อีเมลที่ยืนยันแล้ว ค่าบูลีนที่บ่งบอกว่าผู้ใช้ได้ยืนยันอีเมลของตนแล้ว ข้อมูลการรับรองความถูกต้อง ข้อมูลการรับรองความถูกต้องสำหรับการรับรองความถูกต้องของบุคคลที่สาม คุณยังสามารถเพิ่มฟิลด์ที่กำหนดเองเพื่อเก็บข้อมูลผู้ใช้เพิ่มเติม เช่น รูปโปรไฟล์ ประวัติ หรือข้อมูลเฉพาะของผู้ใช้ใดๆ การจัดการเซสชัน เมื่อผู้ใช้เข้าสู่ระบบ back4app จะสร้างโทเค็นเซสชันที่ระบุเซสชันของผู้ใช้ โทเค็นนี้จะถูกใช้เพื่อรับรองความถูกต้องของคำขอถัดไปโดยไม่ต้องให้ผู้ใช้เข้าสู่ระบบอีกครั้ง โทเค็นเซสชันจะถูกจัดการโดย parse sdk โดยอัตโนมัติ แต่สามารถควบคุมด้วยตนเองได้หากจำเป็น นี่คือวิธีการทำงานของการไหลของเซสชัน ผู้ใช้ให้ข้อมูลประจำตัว (ชื่อผู้ใช้/อีเมล และรหัสผ่าน) back4app ตรวจสอบข้อมูลประจำตัว ถ้าถูกต้อง back4app จะสร้างโทเค็นเซสชัน โทเค็นจะถูกเก็บไว้ในเครื่อง (โดยทั่วไปใน localstorage หรือกลไกที่คล้ายกัน) โทเค็นจะถูกใช้ในคำขอ api ถัดไปเพื่อยืนยันตัวผู้ใช้ มาดูว่าการดำเนินการนี้ถูกนำไปใช้ในแอป back4gram อย่างไร โค้ดการเริ่มต้น parse โดยทั่วไปจะมีลักษณะดังนี้ // initialize parse with your back4app credentials parse initialize("your app id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; การตั้งค่านี้ในแอป back4gram ช่วยให้ส่วนประกอบทั้งหมดสามารถเข้าถึง parse sdk และทำคำขอที่ได้รับการยืนยันตัวตนได้เมื่อผู้ใช้เข้าสู่ระบบ คุณสมบัติด้านความปลอดภัย back4app มีคุณสมบัติด้านความปลอดภัยหลายประการสำหรับการจัดการผู้ใช้ การจัดเก็บรหัสผ่านอย่างปลอดภัย รหัสผ่านจะไม่ถูกเก็บในรูปแบบข้อความธรรมดา แต่จะถูกแฮชและเกลือโดยอัตโนมัติ การจัดการเซสชัน เซสชันของผู้ใช้สามารถจัดการและเพิกถอนผ่านแดชบอร์ด back4app รายการควบคุมการเข้าถึง (acls) คุณสามารถควบคุมว่าใครสามารถอ่านหรือเขียนวัตถุเฉพาะได้ การตรวจสอบอีเมล back4app สามารถส่งอีเมลยืนยันไปยังผู้ใช้ การรีเซ็ตรหัสผ่าน ฟังก์ชันในตัวสำหรับการรีเซ็ตรหัสผ่านอย่างปลอดภัย ตอนนี้ที่เราเข้าใจพื้นฐานแล้ว มาตั้งค่าโครงการของเรากันเถอะ โครงการ back4gram ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ โครงการตัวอย่างเครือข่ายสังคม ที่สร้างด้วย back4app ขั้นตอนที่ 2 – การตั้งค่าโครงการของคุณ เพื่อแสดงวิธีการนำการตรวจสอบสิทธิ์ไปใช้กับ back4app เราจะสร้างเวอร์ชันที่เรียบง่ายของแอปพลิเคชันเครือข่ายสังคม back4gram การสร้างแอปพลิเคชัน react ใหม่ ก่อนอื่น มาสร้างแอปพลิเคชัน react ใหม่กัน เปิดเทอร์มินัลของคุณและรัน npx create react app social network auth cd social network auth การติดตั้งแพ็คเกจที่จำเป็น ถัดไป เราจะติดตั้งแพ็คเกจที่จำเป็น npm install parse react router dom @chakra ui/react @emotion/react @emotion/styled framer motion แพ็คเกจเหล่านี้ให้ parse sdk javascript สำหรับ back4app react router dom สำหรับการจัดการเส้นทางหน้า @chakra ui/react ไลบรารีคอมโพเนนต์สำหรับสร้าง ui โครงสร้างโปรเจกต์ มาจัดตั้งโครงสร้างไฟล์พื้นฐานสำหรับระบบการตรวจสอบสิทธิ์ของเรากัน src/ ├── components/ │ └── ui/ │ ├── field js │ └── toaster js ├── pages/ │ ├── signuppage js │ ├── loginpage js │ ├── resetpasswordpage js │ ├── profilepage js │ └── feedpage js ├── app js └── index js การตั้งค่า parse sdk ตอนนี้เรามาเริ่มต้น parse ในแอปพลิเคชันของเรากัน สร้างไฟล์ชื่อ 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; แทนที่ your app id และ your javascript key ด้วยข้อมูลประจำตัวโปรเจกต์ back4app ของคุณ คุณสามารถค้นหาได้ในแดชบอร์ด back4app ของคุณภายใต้ app settings > security & keys ถัดไป มาปรับปรุง src/index js เพื่อทำการนำเข้าการตั้งค่า parse ของเรา 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> ); การตั้งค่าเส้นทาง ตอนนี้เรามาตั้งโครงสร้างการนำทางพื้นฐานใน 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; การสร้างส่วนประกอบ ui ก่อนที่เราจะเริ่มสร้างหน้าเข้าสู่ระบบ มาสร้างส่วนประกอบ ui ที่สามารถนำกลับมาใช้ใหม่ได้กันเถอะ ก่อนอื่น มาสร้าง 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 } }; จากนั้น สร้าง 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> ); }; ตอนนี้เราพร้อมที่จะ implement ระบบการตรวจสอบสิทธิ์ของเราแล้ว! back4gram project ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ ตัวอย่างโปรเจกต์เครือข่ายสังคม ที่สร้างด้วย back4app ขั้นตอนที่ 3 – การสร้างระบบการลงทะเบียนผู้ใช้ เริ่มต้นด้วยการสร้างหน้าลงทะเบียน หน้านี้จะอนุญาตให้ผู้ใช้ใหม่สร้างบัญชีโดยการให้ชื่อผู้ใช้ อีเมล และรหัสผ่าน สร้างไฟล์ชื่อ 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; โค้ดนี้สร้างแบบฟอร์มการลงทะเบียนที่มีฟีเจอร์ดังต่อไปนี้ การตรวจสอบแบบฟอร์ม ตรวจสอบให้แน่ใจว่าฟิลด์ที่จำเป็นทั้งหมดถูกกรอกอย่างถูกต้องก่อนการส่ง การเปลี่ยนแสดงรหัสผ่าน อนุญาตให้ผู้ใช้เห็นสิ่งที่พวกเขากำลังพิมพ์ การจัดการข้อผิดพลาด แสดงข้อความข้อผิดพลาดที่เหมาะสมสำหรับการตรวจสอบและการลงทะเบียนที่ล้มเหลว สถานะการโหลด แสดงตัวบ่งชี้การโหลดระหว่างกระบวนการลงทะเบียน การทำความเข้าใจขั้นตอนการลงทะเบียนผู้ใช้ของ back4app ส่วนสำคัญของโค้ดนี้คือ handlesignup ฟังก์ชัน ซึ่งใช้คลาส parse user ของ back4app เพื่อสร้างผู้ใช้ใหม่ const user = new parse user(); user set('username', username); user set('email', email); user set('password', password); await user signup(); เมื่อคุณเรียก signup() , back4app ตรวจสอบข้อมูลที่ให้มา แฮชรหัสผ่านอย่างปลอดภัย สร้างผู้ใช้ใหม่ในฐานข้อมูล สร้างและส่งคืนโทเค็นเซสชัน โทเค็นเซสชันจะถูกจัดเก็บโดยอัตโนมัติโดย parse sdk หลังจากการลงทะเบียนที่สำเร็จ ผู้ใช้จะถูกเข้าสู่ระบบโดยอัตโนมัติ ดังนั้นเราสามารถเปลี่ยนเส้นทางพวกเขาไปยังหน้าฟีดได้โดยตรง ในแอปพลิเคชัน back4gram สิ่งนี้ถูกนำไปใช้ในลักษณะเดียวกันใน signuppage js ความแตกต่างหลักคือการนำ back4gram ไปใช้ใช้ส่วนประกอบ ui ที่มีความก้าวหน้ามากขึ้นและอาจรวมถึงฟิลด์หรือโลจิกการตรวจสอบเพิ่มเติม เมื่อฟังก์ชันการลงทะเบียนเสร็จสิ้น มาต่อกันที่การนำฟังก์ชันการเข้าสู่ระบบไปใช้ โครงการ back4gram ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ โครงการตัวอย่างเครือข่ายสังคม ที่สร้างด้วย back4app ขั้นตอนที่ 4 – การนำฟังก์ชันการเข้าสู่ระบบผู้ใช้ไปใช้ ตอนนี้ มาสร้างหน้าล็อกอินที่จะอนุญาตให้ผู้ใช้ยืนยันตัวตนด้วยข้อมูลประจำตัวของพวกเขา สร้างไฟล์ชื่อ 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; หน้าเข้าสู่ระบบนี้มีฟีเจอร์ดังต่อไปนี้ การเปลี่ยนเส้นทางอัตโนมัติ หากผู้ใช้ล็อกอินอยู่แล้ว จะถูกเปลี่ยนเส้นทางไปยังหน้าฟีดโดยอัตโนมัติ การตรวจสอบฟอร์ม ตรวจสอบให้แน่ใจว่ามีการกรอกชื่อผู้ใช้และรหัสผ่านก่อนการส่ง การจัดการข้อผิดพลาด แสดงข้อความข้อผิดพลาดที่เหมาะสมสำหรับการพยายามล็อกอินที่ล้มเหลว สถานะการโหลด แสดงตัวบ่งชี้การโหลดระหว่างกระบวนการล็อกอิน ลิงก์รีเซ็ตรหัสผ่าน ให้ลิงก์ไปยังหน้าการรีเซ็ตรหัสผ่าน การทำความเข้าใจเกี่ยวกับกระบวนการล็อกอินของ back4app ส่วนสำคัญของโค้ดนี้คือ ตรวจสอบผู้ใช้ที่เข้าสู่ระบบอยู่แล้วโดยใช้ parse user current() เข้าสู่ระบบผู้ใช้ด้วย parse user login(username, password) เมื่อผู้ใช้เข้าสู่ระบบด้วย back4app ข้อมูลรับรองจะถูกส่งไปยังเซิร์ฟเวอร์เพื่อการตรวจสอบ หากถูกต้อง จะมีการสร้างและส่งคืนโทเค็นเซสชัน parse sdk จะจัดเก็บโทเค็นนี้โดยอัตโนมัติ วัตถุผู้ใช้จะถูกส่งคืนพร้อมกับข้อมูลของผู้ใช้ปัจจุบัน โทเค็นเซสชันที่จัดเก็บไว้จะถูกใช้โดยอัตโนมัติโดย parse sdk สำหรับคำขอถัดไปทั้งหมด ทำให้ผู้ใช้สามารถอยู่ในสถานะเข้าสู่ระบบได้ ในแอปพลิเคชัน back4gram ระบบการเข้าสู่ระบบจะถูกนำไปใช้ในลักษณะเดียวกันใน loginpage js , แต่มีส่วนประกอบ ui ที่ทันสมัยกว่าและอาจมีฟีเจอร์เพิ่มเติมเช่นตัวเลือกการเข้าสู่ระบบผ่านโซเชียล ตอนนี้เรามาเริ่มการ implement ฟังก์ชันการรีเซ็ตรหัสผ่านกันเถอะ back4gram project ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ โปรเจกต์ตัวอย่างเครือข่ายสังคม ที่สร้างด้วย back4app ขั้นตอนที่ 5 – ฟังก์ชันการรีเซ็ตรหัสผ่าน ถัดไป มาสร้างหน้าการรีเซ็ตรหัสผ่านที่จะช่วยให้ผู้ใช้สามารถกู้คืนบัญชีของตนได้หากลืมรหัสผ่าน สร้างไฟล์ชื่อ 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; หน้ารีเซ็ตรหัสผ่านนี้รวมถึง การตรวจสอบอีเมล รับรองว่าได้มีการให้รูปแบบอีเมลที่ถูกต้อง สถานะสำเร็จ แสดงข้อความสำเร็จหลังจากที่ส่งอีเมลรีเซ็ตรหัสผ่าน การจัดการข้อผิดพลาด แสดงข้อความข้อผิดพลาดที่เหมาะสมหากคำขอรีเซ็ตล้มเหลว สถานะการโหลด แสดงตัวบ่งชี้การโหลดระหว่างกระบวนการคำขอรีเซ็ต การเข้าใจขั้นตอนการรีเซ็ตรหัสผ่านของ back4app ส่วนสำคัญของโค้ดนี้คือการใช้ parse user requestpasswordreset(email) ของ back4app เพื่อส่งอีเมลรีเซ็ตรหัสผ่านไปยังผู้ใช้ เมื่อผู้ใช้ขอรีเซ็ตรหัสผ่านด้วย back4app back4app ตรวจสอบว่าอีเมลมีอยู่ในฐานข้อมูล หากพบอีเมล จะมีการส่งอีเมลรีเซ็ตไปยังผู้ใช้ อีเมลจะมีลิงก์ที่มีโทเค็นที่ปลอดภัย เมื่อผู้ใช้คลิกลิงก์ พวกเขาจะถูกนำไปยังหน้ารีเซ็ตรหัสผ่าน หลังจากตั้งรหัสผ่านใหม่ พวกเขาสามารถเข้าสู่ระบบด้วยข้อมูลประจำตัวใหม่ของพวกเขา ในแอปพลิเคชัน back4gram ฟังก์ชันการรีเซ็ตรหัสผ่านถูกนำไปใช้ในลักษณะเดียวกันใน resetpasswordpage js , โดยใช้วิธีการ api ของ back4app เดียวกัน แต่มีส่วนประกอบ ui ที่มีความก้าวหน้ามากขึ้นหรือฟีเจอร์เพิ่มเติม ตอนนี้ที่เราได้ดำเนินการฟีเจอร์การตรวจสอบสิทธิ์หลักแล้ว มามุ่งเน้นที่การจัดการเซสชันกันเถอะ โครงการ back4gram ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ โครงการตัวอย่างเครือข่ายสังคม ที่สร้างขึ้นด้วย back4app ขั้นตอนที่ 6 – การจัดการเซสชันและการเก็บรักษา หนึ่งในแง่มุมสำคัญของระบบการตรวจสอบสิทธิ์ใด ๆ คือการจัดการเซสชันที่เหมาะสม ซึ่งช่วยให้ผู้ใช้ยังคงล็อกอินอยู่ขณะนำทางผ่านแอปพลิเคชันของคุณและทำให้เซสชันของพวกเขามีความปลอดภัย มาสร้างเวอร์ชันที่เรียบง่ายของหน้า feed เพื่อแสดงการตรวจสอบและการจัดการเซสชัน สร้างไฟล์ชื่อ 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; หน้าฟีดนี้มีการใช้งาน การตรวจสอบการพิสูจน์ตัวตน ตรวจสอบว่าผู้ใช้ได้เข้าสู่ระบบก่อนที่จะแสดงเนื้อหา การเปลี่ยนเส้นทางอัตโนมัติ เปลี่ยนเส้นทางไปยังหน้าล็อกอินหากไม่พบเซสชันของผู้ใช้ ฟังก์ชันการออกจากระบบ อนุญาตให้ผู้ใช้ออกจากระบบและล้างเซสชันของตน การแสดงข้อมูลผู้ใช้ แสดงข้อมูลเกี่ยวกับผู้ใช้ที่เข้าสู่ระบบในขณะนี้ การจัดการเซสชันของ back4app back4app จัดการเซสชันในหลายวิธี การจัดเก็บเซสชันอัตโนมัติ sdk ของ parse จะจัดเก็บโทเค็นเซสชันโดยอัตโนมัติหลังจากเข้าสู่ระบบ การเข้าถึงผู้ใช้ปัจจุบัน คุณสามารถเข้าถึงผู้ใช้ปัจจุบันด้วย parse user current() การหมดอายุของเซสชัน เซสชันมักจะหมดอายุหลังจากระยะเวลาที่กำหนด (สามารถกำหนดค่าใน back4app) ออกจากระบบ คุณสามารถสิ้นสุดเซสชันด้วย parse user logout() ในแอปพลิเคชันที่ใช้งานจริงเช่น back4gram การจัดการเซสชันมักจะซับซ้อนมากขึ้น ในไฟล์ messagespage js ของ back4gram เราสามารถเห็นได้ว่าการตรวจสอบการรับรองความถูกต้องจะเกิดขึ้นที่จุดเริ่มต้นของคอมโพเนนต์ 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]); รูปแบบนี้ของการตรวจสอบการรับรองความถูกต้องที่ระดับคอมโพเนนต์เป็นเรื่องปกติในแอปพลิเคชัน react ที่ใช้ back4app ข้อพิจารณาด้านความปลอดภัยของเซสชัน เมื่อดำเนินการจัดการเซสชันด้วย back4app ให้พิจารณาข้อปฏิบัติด้านความปลอดภัยเหล่านี้ การทำให้เซสชันเป็นโมฆะโดยอัตโนมัติ กำหนดค่า back4app เพื่อทำให้เซสชันเป็นโมฆะหลังจากไม่มีการใช้งานเป็นระยะเวลาหนึ่ง การจัดเก็บที่ปลอดภัย ตรวจสอบให้แน่ใจว่าโทเค็นเซสชันถูกจัดเก็บอย่างปลอดภัย (parse sdk จะจัดการสิ่งนี้โดยอัตโนมัติ) เฉพาะ https ใช้ https เสมอเพื่อป้องกันการดักจับโทเค็นเซสชัน ออกจากระบบเมื่อทำการกระทำที่ละเอียดอ่อน ต้องการการยืนยันตัวตนใหม่สำหรับการดำเนินการที่ละเอียดอ่อน เช่น การเปลี่ยนรหัสผ่าน ตอนนี้เรามาดูวิธีการจัดการโปรไฟล์เพื่อทำให้ระบบการตรวจสอบสิทธิ์ของเราสมบูรณ์ โครงการ back4gram ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ โครงการตัวอย่างเครือข่ายสังคม ที่สร้างขึ้นด้วย back4app ขั้นตอนที่ 7 – การเพิ่มการจัดการโปรไฟล์ผู้ใช้ ชิ้นสุดท้ายของระบบการตรวจสอบสิทธิ์ของเราคือการจัดการโปรไฟล์ผู้ใช้ ซึ่งช่วยให้ผู้ใช้สามารถดูและอัปเดตข้อมูลโปรไฟล์ของตนได้ สร้างไฟล์ชื่อ 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()); } เมื่อคุณสร้าง parse file , back4app นำไฟล์ของคุณ (ภาพ, เอกสาร, ฯลฯ) อัปโหลดไปยังที่เก็บข้อมูลที่ปลอดภัย ส่งคืนการอ้างอิงที่สามารถเก็บไว้กับวัตถุผู้ใช้ของคุณ ทำให้ไฟล์เข้าถึงได้ผ่าน url การเพิ่มฟิลด์ผู้ใช้ที่กำหนดเอง back4app's parse user class สามารถขยายด้วยฟิลด์ที่กำหนดเองนอกเหนือจากฟิลด์เริ่มต้น ในตัวอย่างของเรา เราได้เพิ่ม bio ฟิลด์ข้อความสำหรับคำอธิบายผู้ใช้ avatar ฟิลด์ไฟล์สำหรับรูปโปรไฟล์ คุณสามารถเพิ่มฟิลด์ที่กำหนดเองใด ๆ ที่คุณต้องการสำหรับโปรไฟล์ผู้ใช้ในแอปพลิเคชันของคุณ user set('bio', bio); ในแอปพลิเคชัน back4gram, profilepage js มีการใช้งานฟังก์ชันการทำงานที่คล้ายกันแต่มีฟีเจอร์มากขึ้นและ ui ที่ซับซ้อนมากขึ้น รวมถึงฟิลด์เพิ่มเติมเช่นจำนวนผู้ติดตาม สถิติการโพสต์ และการจัดการภาพที่มีความแข็งแกร่งมากขึ้น back4gram project ค้นหา ที่นี่ โค้ดทั้งหมดสำหรับ ตัวอย่างโปรเจกต์เครือข่ายสังคม ที่สร้างขึ้นด้วย back4app ขั้นตอนที่ 8 – การทดสอบและการรักษาความปลอดภัยของระบบการตรวจสอบสิทธิ ตอนนี้เราสร้างระบบการตรวจสอบสิทธิของเราเสร็จแล้ว มาพูดคุยกันว่าจะแทนที่การทดสอบและรักษาความปลอดภัยอย่างไร การทดสอบการไหลของการตรวจสอบสิทธิ เมื่อทดสอบระบบการตรวจสอบสิทธิของคุณ คุณควรตรวจสอบแต่ละไหลเหล่านี้ การลงทะเบียนผู้ใช้ ทดสอบว่าผู้ใช้สามารถสร้างบัญชีด้วยข้อมูลรับรองที่ถูกต้อง การตรวจสอบข้อมูล ตรวจสอบว่าข้อผิดพลาดที่เหมาะสมปรากฏขึ้นสำหรับข้อมูลที่ไม่ถูกต้อง กระบวนการเข้าสู่ระบบ ตรวจสอบให้แน่ใจว่าผู้ใช้สามารถเข้าสู่ระบบด้วยข้อมูลรับรองที่ถูกต้อง การเข้าสู่ระบบล้มเหลว ตรวจสอบว่าข้อผิดพลาดที่เหมาะสมปรากฏขึ้นสำหรับข้อมูลรับรองที่ไม่ถูกต้อง การรีเซ็ตรหัสผ่าน ยืนยันว่ากระบวนการรีเซ็ตรหัสผ่านทำงานได้อย่างครบถ้วน การรักษาความต่อเนื่องของเซสชัน ตรวจสอบว่าผู้ใช้ยังคงเข้าสู่ระบบระหว่างการเยี่ยมชมหน้า กระบวนการออกจากระบบ ตรวจสอบให้แน่ใจว่าผู้ใช้สามารถออกจากระบบได้อย่างถูกต้องและเซสชันถูกยกเลิก ช่องโหว่ด้านความปลอดภัยทั่วไปที่ควรหลีกเลี่ยง เมื่อสร้างระบบการตรวจสอบตัวตน ให้ระวังปัญหาด้านความปลอดภัยทั่วไปเหล่านี้ การจัดเก็บรหัสผ่าน ห้ามจัดเก็บรหัสผ่านในรูปแบบข้อความธรรมดา back4app จะจัดการสิ่งนี้ให้คุณโดยอัตโนมัติ การโจมตีแบบ brute force ใช้การจำกัดอัตราสำหรับการพยายามเข้าสู่ระบบ back4app มีฟังก์ชันนี้ให้ การโจมตีแบบ cross site scripting (xss) ทำความสะอาดข้อมูลที่ผู้ใช้ป้อนเพื่อป้องกันการฉีดสคริปต์ การโจมตีแบบ cross site request forgery (csrf) ใช้โทเค็นที่เหมาะสมเพื่อตรวจสอบความถูกต้องของคำขอ การอ้างอิงวัตถุโดยตรงที่ไม่ปลอดภัย ห้ามเปิดเผย id หรือการอ้างอิงที่ละเอียดอ่อนใน url แนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุดของ back4app back4app มีฟีเจอร์ด้านความปลอดภัยหลายอย่างที่คุณควรใช้ประโยชน์ 1 การอนุญาตระดับคลาส (clps) ในแดชบอร์ด back4app ของคุณ คุณสามารถตั้งค่าการอนุญาตระดับคลาสเพื่อควบคุมว่าใครสามารถอ่าน เขียน และลบวัตถุได้ ไปที่แดชบอร์ด back4app ของคุณ ไปที่ฐานข้อมูล → เบราว์เซอร์ คลิกที่ปุ่ม "ความปลอดภัย" สำหรับคลาสผู้ใช้ของคุณ กำหนดค่าการอนุญาตให้เหมาะสม \[image หน้าจอการอนุญาตระดับคลาส back4app แสดงการตั้งค่าความปลอดภัยของคลาสผู้ใช้] สำหรับคลาสผู้ใช้ การตั้งค่าทั่วไปประกอบด้วย การเข้าถึงการอ่านสาธารณะเฉพาะสำหรับฟิลด์เฉพาะ (ชื่อผู้ใช้, อวตาร) ไม่มีการเข้าถึงการเขียนหรือการลบสาธารณะ ผู้ใช้ที่ผ่านการตรวจสอบเท่านั้นที่สามารถอัปเดตบันทึกของตนเองได้ 2 รายการควบคุมการเข้าถึง (acls) สำหรับวัตถุแต่ละรายการ คุณสามารถใช้ acls เพื่อควบคุมการเข้าถึง // 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(); นี่จะทำให้แน่ใจว่าผู้ใช้ที่สร้างวัตถุเท่านั้นที่สามารถเข้าถึงหรือแก้ไขได้ 3 การใช้ master key back4app ให้ master key ที่ข้ามการตรวจสอบความปลอดภัย อย่าเปิดเผยสิ่งนี้ในโค้ดฝั่งลูกค้า // never do this in client side code parse cloud usemasterkey(); // this should only be used in cloud code แทนที่จะทำเช่นนั้น สำหรับการดำเนินการที่ต้องการสิทธิ์ที่สูงขึ้น ให้ใช้ cloud functions 4 การตรวจสอบอีเมล เปิดใช้งานการตรวจสอบอีเมลในการตั้งค่า back4app ของคุณเพื่อให้แน่ใจว่าผู้ใช้ให้ที่อยู่อีเมลที่ถูกต้อง ไปที่แดชบอร์ด back4app ของคุณ ไปที่การตั้งค่าแอป → การตั้งค่าอีเมล กำหนดค่าตัวเชื่อมต่ออีเมลของคุณ เปิดใช้งานการตรวจสอบอีเมล \[image หน้าจอการกำหนดค่าการตั้งค่าอีเมล back4app] 5 การตรวจสอบสองขั้นตอน เพื่อความปลอดภัยเพิ่มเติม คุณสามารถใช้การตรวจสอบสองขั้นตอนโดยใช้ back4app cloud functions ซึ่งต้องการให้ผู้ใช้ให้รูปแบบการตรวจสอบที่สอง (โดยปกติจะเป็นรหัสที่ส่งไปยังโทรศัพท์หรืออีเมลของพวกเขา) เมื่อเข้าสู่ระบบ การดำเนินการจำกัดอัตรา เพื่อป้องกันการโจมตีแบบ brute force คุณสามารถดำเนินการจำกัดอัตราโดยใช้ cloud functions // 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; } }); บทสรุป ในบทเรียนนี้ คุณได้สร้างระบบการตรวจสอบสิทธิ์ที่ครอบคลุมสำหรับแอปพลิเคชันเครือข่ายสังคมโดยใช้ back4app คุณได้ดำเนินการลงทะเบียนผู้ใช้ การเข้าสู่ระบบ การรีเซ็ตรหัสผ่าน และฟีเจอร์การจัดการโปรไฟล์ทั้งหมดที่ขับเคลื่อนโดยความสามารถในการจัดการผู้ใช้ที่มีอยู่ใน back4app มาสรุปสิ่งที่คุณได้เรียนรู้กัน ระบบการจัดการผู้ใช้ของ back4app คุณได้เรียนรู้ว่า parse server ของ back4app ให้การตรวจสอบสิทธิ์ผู้ใช้ที่มีอยู่ด้วย parse user คลาส การลงทะเบียนผู้ใช้ คุณได้สร้างแบบฟอร์มลงทะเบียนที่สร้างบัญชีผู้ใช้ใหม่ในฐานข้อมูลของ back4app การเข้าสู่ระบบผู้ใช้ คุณได้สร้างระบบการเข้าสู่ระบบที่ตรวจสอบสิทธิ์ผู้ใช้และจัดการเซสชัน การรีเซ็ตรหัสผ่าน คุณได้เพิ่มฟีเจอร์การรีเซ็ตรหัสผ่านที่ปลอดภัยซึ่งส่งอีเมลการกู้คืน การจัดการเซสชัน คุณได้เรียนรู้วิธีการรักษาเซสชันของผู้ใช้และปกป้องเส้นทาง การจัดการโปรไฟล์ คุณได้สร้างหน้าโปรไฟล์ที่อนุญาตให้ผู้ใช้ปรับปรุงข้อมูลของตนและอัปโหลดรูปโปรไฟล์ แนวทางปฏิบัติด้านความปลอดภัยที่ดีที่สุด คุณได้สำรวจวิธีการรักษาความปลอดภัยระบบการตรวจสอบสิทธิ์ของคุณโดยใช้ฟีเจอร์ด้านความปลอดภัยของ back4app ด้วย back4app คุณสามารถมุ่งเน้นไปที่การสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยมแทนที่จะสร้างโครงสร้างพื้นฐานด้านหลังที่ซับซ้อน เซิร์ฟเวอร์ parse ที่ขับเคลื่อน back4app ได้จัดเตรียม api การตรวจสอบสิทธิ์ที่จำเป็นทั้งหมด ในขณะที่ยังคงทำให้ข้อมูลผู้ใช้ของคุณปลอดภัย ระบบการตรวจสอบสิทธิ์ที่คุณสร้างขึ้นเป็นพื้นฐานของแอปพลิเคชันเครือข่ายสังคมของคุณ ด้วยสิ่งนี้ คุณสามารถขยายแอปพลิเคชันของคุณโดยการเพิ่มฟีเจอร์ต่างๆ เช่น โพสต์ ความคิดเห็น ไลค์ และการส่งข้อความโดยตรง โดยใช้ back4app เป็นบริการแบ็คเอนด์ของคุณ ขั้นตอนถัดไป การรวมเข้าสู่ระบบด้วยโซเชียล เพิ่มการเข้าสู่ระบบด้วย google, facebook หรือผู้ให้บริการอื่นๆ โดยใช้ความสามารถ oauth ของ back4app ความปลอดภัยที่เพิ่มขึ้น ใช้การตรวจสอบสิทธิ์แบบสองปัจจัยเพื่อความปลอดภัยเพิ่มเติม บทบาทของผู้ใช้ ตั้งค่าการควบคุมการเข้าถึงตามบทบาทสำหรับผู้ใช้ประเภทต่างๆ ฟีเจอร์เรียลไทม์ เพิ่มการส่งข้อความและการแจ้งเตือนแบบเรียลไทม์โดยใช้ live query ของ back4app สำหรับโค้ดทั้งหมดของแอปพลิเคชันเครือข่ายสังคม back4gram คุณสามารถตรวจสอบได้ที่ ที่เก็บ github https //github com/templates back4app/back4gram บริการแบ็คเอนด์ที่ทรงพลังของ back4app และการรวม parse server ทำให้มันเป็นตัวเลือกที่ยอดเยี่ยมสำหรับการสร้างแอปพลิเคชันเครือข่ายสังคมที่ปลอดภัยและสามารถขยายได้ โดยการใช้ความสามารถในการจัดการผู้ใช้ที่มีอยู่ คุณสามารถสร้างระบบการตรวจสอบสิทธิ์ที่แข็งแกร่งด้วยความพยายามน้อยที่สุด ทำให้คุณสามารถมุ่งเน้นไปที่การสร้างฟีเจอร์ที่ไม่เหมือนใครซึ่งทำให้แอปพลิเคชันของคุณโดดเด่น