Sistem Autentikasi untuk Jaringan Sosial Anda

pendahuluan dalam tutorial ini, anda akan belajar bagaimana mengimplementasikan sistem autentikasi yang komprehensif untuk aplikasi web jejaring sosial anda menggunakan back4app sebagai layanan backend anda anda akan membangun fungsionalitas untuk pendaftaran pengguna, login, reset kata sandi, dan manajemen sesi fitur penting untuk aplikasi sosial modern back4app adalah platform backend as a service (baas) yang dibangun di atas parse server yang memungkinkan pengembang untuk membuat aplikasi yang dapat diskalakan tanpa mengelola infrastruktur server kemampuan autentikasi pengguna bawaan membuatnya sempurna untuk dengan cepat mengimplementasikan sistem manajemen pengguna yang aman pada akhir tutorial ini, anda akan telah membuat sistem autentikasi yang sepenuhnya fungsional mirip dengan yang digunakan di back4gram, sebuah aplikasi jejaring sosial anda akan mengimplementasikan pendaftaran pengguna dengan validasi, login yang aman, pemulihan kata sandi, dan sesi yang persisten di seluruh aplikasi, memberikan pengalaman yang mulus bagi pengguna anda sambil menjaga akun mereka tetap aman proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jejaring sosial yang dibangun dengan back4app prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan akun back4app anda dapat mendaftar untuk akun gratis di back4app com https //www back4app com proyek back4app yang sudah disiapkan anda dapat belajar cara membuat proyek baru dengan mengikuti panduan memulai dengan back4app https //www back4app com/docs/get started/welcome node js terinstal di mesin lokal anda pengetahuan dasar tentang javascript, react js, dan konsep restful api keterampilan dengan konsep pengembangan web modern (komponen, manajemen status, dll ) langkah 1 – memahami sistem manajemen pengguna back4app sebelum terjun ke kode, penting untuk memahami bagaimana back4app menangani manajemen pengguna back4app dibangun di atas parse server, yang menyediakan parse user kelas yang dirancang khusus untuk otentikasi kelas parse user kelas parse user di back4app memperluas objek parse standar dengan fungsionalitas khusus untuk otentikasi pengguna ini mencakup beberapa bidang bawaan username pengidentifikasi unik untuk pengguna (diperlukan) password kata sandi pengguna (diperlukan untuk pendaftaran tetapi tidak disimpan dalam bentuk yang dapat diambil kembali) email alamat email pengguna (opsional tetapi disarankan) emailverified boolean yang menunjukkan apakah pengguna telah memverifikasi email mereka authdata data otentikasi untuk otentikasi pihak ketiga anda juga dapat menambahkan bidang kustom untuk menyimpan informasi pengguna tambahan, seperti foto profil, bio, atau data spesifik pengguna lainnya manajemen sesi ketika seorang pengguna masuk, back4app membuat token sesi yang mengidentifikasi sesi pengguna token ini digunakan untuk mengautentikasi permintaan berikutnya tanpa memerlukan pengguna untuk masuk lagi token sesi dikelola secara otomatis oleh parse sdk tetapi juga dapat dikontrol secara manual jika diperlukan berikut adalah cara kerja alur sesi pengguna memberikan kredensial (nama pengguna/email dan kata sandi) back4app memvalidasi kredensial jika valid, back4app membuat token sesi token disimpan secara lokal (biasanya di localstorage atau mekanisme serupa) token disertakan dalam permintaan api berikutnya untuk mengautentikasi pengguna mari kita lihat bagaimana ini diimplementasikan dalam aplikasi back4gram kode inisialisasi parse biasanya terlihat seperti ini // initialize parse with your back4app credentials parse initialize("your app id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; pengaturan ini dalam aplikasi back4gram memungkinkan semua komponen untuk mengakses sdk parse dan melakukan permintaan yang terautentikasi setelah pengguna masuk fitur keamanan back4app menyediakan beberapa fitur keamanan untuk manajemen pengguna penyimpanan kata sandi yang aman kata sandi tidak pernah disimpan dalam teks biasa tetapi di hash dan di salt secara otomatis manajemen sesi sesi pengguna dapat dikelola dan dicabut melalui dasbor back4app daftar kontrol akses (acl) anda dapat mengontrol siapa yang dapat membaca atau menulis objek tertentu verifikasi email back4app dapat mengirim email verifikasi kepada pengguna reset kata sandi fungsionalitas bawaan untuk reset kata sandi yang aman sekarang kita memahami dasar dasarnya, mari kita lanjutkan untuk mengatur proyek kita proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 2 – mengatur proyek anda untuk menunjukkan cara mengimplementasikan otentikasi dengan back4app, kita akan membuat versi sederhana dari aplikasi jaringan sosial back4gram membuat aplikasi react baru pertama, mari kita buat aplikasi react baru buka terminal anda dan jalankan npx create react app social network auth cd social network auth menginstal paket yang diperlukan selanjutnya, kita akan menginstal paket yang diperlukan npm install parse react router dom @chakra ui/react @emotion/react @emotion/styled framer motion paket paket ini menyediakan parse sdk javascript untuk back4app react router dom untuk routing halaman @chakra ui/react perpustakaan komponen untuk membangun ui struktur proyek mari kita atur struktur file dasar untuk sistem otentikasi kita src/ ├── components/ │ └── ui/ │ ├── field js │ └── toaster js ├── pages/ │ ├── signuppage js │ ├── loginpage js │ ├── resetpasswordpage js │ ├── profilepage js │ └── feedpage js ├── app js └── index js mengonfigurasi parse sdk sekarang, mari kita inisialisasi parse di aplikasi kita buat file bernama 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; ganti your app id dan your javascript key dengan kredensial proyek back4app anda anda dapat menemukannya di dasbor back4app anda di bawah pengaturan aplikasi > keamanan & kunci selanjutnya, mari kita perbarui src/index js untuk mengimpor konfigurasi parse kita 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> ); mengatur rute sekarang, mari kita atur struktur routing dasar di 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; membuat komponen ui sebelum kita mulai membangun halaman otentikasi, mari kita buat beberapa komponen ui yang dapat digunakan kembali pertama, mari kita buat 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 } }; kemudian, buat 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> ); }; sekarang kita siap untuk mengimplementasikan sistem autentikasi kita! proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 3 – membuat sistem pendaftaran pengguna mari kita mulai dengan mengimplementasikan halaman pendaftaran halaman ini akan memungkinkan pengguna baru untuk membuat akun dengan memberikan nama pengguna, email, dan kata sandi buat file bernama 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; kode ini membuat formulir pendaftaran dengan fitur fitur berikut validasi formulir memeriksa bahwa semua kolom yang diperlukan diisi dengan benar sebelum pengiriman pengalihan visibilitas kata sandi memungkinkan pengguna untuk melihat apa yang mereka ketik penanganan kesalahan menampilkan pesan kesalahan yang sesuai untuk kegagalan validasi dan pendaftaran status memuat menampilkan indikator pemuatan selama proses pendaftaran memahami proses pendaftaran pengguna back4app bagian kunci dari kode ini adalah handlesignup fungsi, yang menggunakan parse user kelas back4app untuk membuat pengguna baru const user = new parse user(); user set('username', username); user set('email', email); user set('password', password); await user signup(); ketika anda memanggil signup() , back4app memvalidasi data yang diberikan menghash kata sandi dengan aman membuat pengguna baru di database membuat dan mengembalikan token sesi token sesi secara otomatis disimpan oleh parse sdk setelah pendaftaran berhasil, pengguna secara otomatis masuk, sehingga kita dapat mengarahkan mereka langsung ke halaman feed dalam aplikasi back4gram, ini diimplementasikan dengan cara yang mirip di signuppage js perbedaan utama adalah bahwa implementasi back4gram menggunakan komponen ui yang lebih canggih dan mungkin mencakup bidang tambahan atau logika validasi dengan fungsionalitas pendaftaran selesai, mari kita lanjutkan untuk mengimplementasikan fungsionalitas login proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 4 – mengimplementasikan login pengguna sekarang, mari kita buat halaman login yang akan memungkinkan pengguna untuk mengautentikasi dengan kredensial mereka buat file bernama 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; halaman login ini memiliki fitur fitur berikut pengalihan otomatis jika pengguna sudah masuk, mereka secara otomatis dialihkan ke halaman umpan validasi formulir memastikan bahwa nama pengguna dan kata sandi disediakan sebelum pengiriman penanganan kesalahan menampilkan pesan kesalahan yang sesuai untuk upaya login yang gagal status memuat menampilkan indikator pemuatan selama proses login tautan reset kata sandi menyediakan tautan ke halaman reset kata sandi memahami proses login back4app bagian kunci dari kode ini adalah memeriksa pengguna yang sudah masuk menggunakan parse user current() masuk sebagai pengguna dengan parse user login(username, password) ketika seorang pengguna masuk dengan back4app kredensial dikirim ke server untuk validasi jika valid, token sesi dihasilkan dan dikembalikan sdk parse secara otomatis menyimpan token ini objek pengguna dikembalikan dengan data pengguna saat ini token sesi yang disimpan kemudian digunakan secara otomatis oleh sdk parse untuk semua permintaan berikutnya, memungkinkan pengguna tetap masuk dalam aplikasi back4gram, sistem login diimplementasikan dengan cara yang mirip di loginpage js , tetapi dengan komponen ui yang lebih canggih dan kemungkinan fitur tambahan seperti opsi login sosial sekarang mari kita lanjutkan untuk mengimplementasikan fungsi reset kata sandi proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 5 – fungsi reset kata sandi selanjutnya, mari kita buat halaman reset kata sandi yang akan memungkinkan pengguna untuk memulihkan akun mereka jika mereka lupa kata sandi buat file bernama 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; halaman reset kata sandi ini mencakup validasi email memastikan bahwa format email yang valid disediakan status sukses menampilkan pesan sukses setelah email reset dikirim penanganan kesalahan menampilkan pesan kesalahan yang sesuai jika permintaan reset gagal status memuat menampilkan indikator pemuatan selama proses permintaan reset memahami proses reset kata sandi back4app bagian kunci dari kode ini adalah menggunakan parse user requestpasswordreset(email) metode back4app untuk mengirim email reset kata sandi kepada pengguna ketika seorang pengguna meminta reset kata sandi dengan back4app back4app memverifikasi bahwa email tersebut ada di database jika email ditemukan, email reset dikirim kepada pengguna email tersebut berisi tautan dengan token yang aman ketika pengguna mengklik tautan, mereka diarahkan ke halaman reset kata sandi setelah mengatur kata sandi baru, mereka dapat masuk dengan kredensial baru mereka dalam aplikasi back4gram, fungsionalitas reset kata sandi diimplementasikan dengan cara yang sama di resetpasswordpage js , menggunakan metode api back4app yang sama tetapi mungkin dengan komponen ui yang lebih canggih atau fitur tambahan sekarang kita telah mengimplementasikan fitur otentikasi inti, mari kita fokus pada manajemen sesi proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 6 – manajemen dan persistensi sesi salah satu aspek kunci dari sistem otentikasi mana pun adalah manajemen sesi yang tepat ini memastikan bahwa pengguna tetap masuk saat menjelajahi aplikasi anda dan bahwa sesi mereka aman mari kita buat versi sederhana dari halaman umpan untuk mendemonstrasikan pemeriksaan dan manajemen sesi buat file bernama 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; halaman feed ini mengimplementasikan pemeriksaan autentikasi memverifikasi bahwa pengguna telah masuk sebelum menampilkan konten pengalihan otomatis mengalihkan ke halaman login jika tidak ada sesi pengguna yang ditemukan fungsi logout memungkinkan pengguna untuk keluar dan menghapus sesi mereka tampilan informasi pengguna menampilkan informasi tentang pengguna yang saat ini masuk memahami manajemen sesi back4app back4app menangani sesi dengan beberapa cara penyimpanan sesi otomatis sdk parse secara otomatis menyimpan token sesi setelah login akses pengguna saat ini anda dapat mengakses pengguna saat ini dengan parse user current() kedaluwarsa sesi sesi biasanya kedaluwarsa setelah periode tertentu (dapat dikonfigurasi di back4app) keluar anda dapat mengakhiri sesi dengan parse user logout() dalam aplikasi produksi seperti back4gram, manajemen sesi seringkali lebih kompleks di file messagespage js dari back4gram, kita dapat melihat bagaimana autentikasi diperiksa di awal komponen 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]); pola memeriksa autentikasi di tingkat komponen ini umum dalam aplikasi react yang menggunakan back4app pertimbangan keamanan sesi saat menerapkan manajemen sesi dengan back4app, pertimbangkan praktik keamanan berikut invalidasi sesi otomatis konfigurasikan back4app untuk menginvalidasi sesi setelah periode ketidakaktifan tertentu penyimpanan aman pastikan token sesi disimpan dengan aman (sdk parse menangani ini secara otomatis) hanya https selalu gunakan https untuk mencegah intersepsi token sesi logout pada tindakan sensitif memerlukan otentikasi ulang untuk operasi sensitif seperti mengubah kata sandi mari kita lihat bagaimana menerapkan manajemen profil untuk melengkapi sistem otentikasi kita proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 7 – menambahkan manajemen profil pengguna bagian terakhir dari sistem otentikasi kami adalah manajemen profil pengguna ini memungkinkan pengguna untuk melihat dan memperbarui informasi profil mereka buat file bernama 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()); } ketika anda membuat parse file , back4app mengambil file anda (gambar, dokumen, dll ) mengunggahnya ke penyimpanan yang aman mengembalikan referensi yang dapat disimpan dengan objek pengguna anda membuat file dapat diakses melalui url menambahkan bidang pengguna kustom kelas parse user dari back4app dapat diperluas dengan bidang kustom di luar yang default dalam contoh kami, kami telah menambahkan bio sebuah bidang teks untuk deskripsi pengguna avatar sebuah bidang file untuk foto profil anda dapat menambahkan bidang kustom apa pun yang anda butuhkan untuk profil pengguna aplikasi anda user set('bio', bio); dalam aplikasi back4gram, profilepage js menerapkan fungsionalitas serupa tetapi dengan lebih banyak fitur dan antarmuka pengguna yang lebih kompleks ini mencakup bidang tambahan seperti jumlah pengikut, statistik pos, dan penanganan gambar yang lebih kuat proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 8 – menguji dan mengamankan sistem autentikasi anda sekarang kita telah membangun sistem autentikasi kita, mari kita bahas bagaimana cara menguji dan mengamankannya dengan benar mengujicoba alur autentikasi saat menguji sistem autentikasi anda, anda harus memverifikasi masing masing alur ini pendaftaran pengguna uji bahwa pengguna dapat membuat akun dengan kredensial yang valid validasi input verifikasi bahwa kesalahan yang sesuai muncul untuk input yang tidak valid proses login pastikan pengguna dapat login dengan kredensial yang benar login gagal periksa bahwa kesalahan yang sesuai muncul untuk kredensial yang salah reset kata sandi konfirmasi bahwa alur reset kata sandi berfungsi dari awal hingga akhir persistensi sesi verifikasi bahwa pengguna tetap login antara kunjungan halaman proses logout pastikan pengguna dapat logout dengan benar dan sesi dihentikan kerentanan keamanan umum yang harus dihindari saat membangun sistem otentikasi, waspadai masalah keamanan umum ini penyimpanan kata sandi jangan pernah menyimpan kata sandi dalam teks biasa back4app menangani ini secara otomatis untuk anda serangan brute force terapkan pembatasan laju untuk upaya login back4app menyediakan fungsionalitas ini cross site scripting (xss) sanitasi input pengguna untuk mencegah injeksi skrip cross site request forgery (csrf) gunakan token yang tepat untuk memverifikasi keaslian permintaan referensi objek langsung yang tidak aman jangan mengekspos id atau referensi sensitif dalam url praktik terbaik keamanan back4app back4app menyediakan beberapa fitur keamanan yang harus anda manfaatkan 1 izin tingkat kelas (clp) di dasbor back4app anda, anda dapat mengatur izin tingkat kelas untuk mengontrol siapa yang dapat membaca, menulis, dan menghapus objek pergi ke dasbor back4app anda navigasi ke database → browser klik tombol "keamanan" untuk kelas pengguna anda konfigurasikan izin dengan tepat \[gambar layar izin tingkat kelas back4app yang menunjukkan pengaturan keamanan kelas pengguna] untuk kelas pengguna, pengaturan yang umum termasuk akses baca publik hanya untuk bidang tertentu (nama pengguna, avatar) tidak ada akses publik untuk menulis atau menghapus hanya pengguna yang terautentikasi yang dapat memperbarui catatan mereka sendiri 2 daftar kontrol akses (acls) untuk objek individu, anda dapat menggunakan acl untuk mengontrol akses // 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(); ini memastikan bahwa hanya pengguna yang membuat objek yang dapat mengakses atau memodifikasinya 3 penggunaan kunci utama back4app menyediakan kunci utama yang melewati pemeriksaan keamanan jangan pernah mengekspos ini dalam kode sisi klien // never do this in client side code parse cloud usemasterkey(); // this should only be used in cloud code sebagai gantinya, untuk operasi yang memerlukan hak istimewa yang lebih tinggi, gunakan fungsi cloud 4 verifikasi email aktifkan verifikasi email di pengaturan back4app anda untuk memastikan pengguna memberikan alamat email yang valid masuk ke dasbor back4app anda navigasi ke pengaturan aplikasi → pengaturan email konfigurasi adaptor email anda aktifkan verifikasi email \[gambar layar konfigurasi pengaturan email back4app] 5 autentikasi dua faktor untuk keamanan tambahan, anda dapat menerapkan autentikasi dua faktor menggunakan fungsi cloud back4app ini mengharuskan pengguna untuk memberikan bentuk verifikasi kedua (biasanya kode yang dikirim ke ponsel atau email mereka) saat masuk menerapkan pembatasan laju untuk melindungi dari serangan brute force, anda dapat menerapkan pembatasan laju menggunakan fungsi cloud // 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; } }); kesimpulan dalam tutorial ini, anda telah membangun sistem autentikasi yang komprehensif untuk aplikasi jejaring sosial menggunakan back4app anda telah mengimplementasikan pendaftaran pengguna, login, reset kata sandi, dan fitur manajemen profil, semuanya didukung oleh kemampuan manajemen pengguna bawaan back4app mari kita ringkas apa yang telah anda pelajari sistem manajemen pengguna back4app anda telah belajar bagaimana parse server back4app menyediakan autentikasi pengguna bawaan dengan parse user kelas pendaftaran pengguna anda telah mengimplementasikan formulir pendaftaran yang membuat akun pengguna baru di database back4app login pengguna anda telah membuat sistem login yang mengautentikasi pengguna dan mengelola sesi reset kata sandi anda telah menambahkan fitur reset kata sandi yang aman yang mengirimkan email pemulihan manajemen sesi anda telah belajar bagaimana menjaga sesi pengguna dan melindungi rute manajemen profil anda telah membangun halaman profil yang memungkinkan pengguna memperbarui informasi mereka dan mengunggah foto profil praktik terbaik keamanan anda telah menjelajahi cara mengamankan sistem autentikasi anda menggunakan fitur keamanan back4app dengan back4app, anda dapat fokus pada menciptakan pengalaman pengguna yang hebat daripada membangun infrastruktur backend yang kompleks parse server yang mendukung back4app menyediakan semua api autentikasi yang diperlukan, sambil memastikan data pengguna anda tetap aman sistem otentikasi yang telah anda bangun membentuk dasar dari aplikasi jejaring sosial anda dengan ini, anda sekarang dapat memperluas aplikasi anda dengan menambahkan fitur seperti pos, komentar, suka, dan pesan langsung, semuanya menggunakan back4app sebagai layanan backend anda langkah selanjutnya integrasi login sosial tambahkan login dengan google, facebook, atau penyedia lainnya menggunakan kemampuan oauth dari back4app keamanan yang ditingkatkan terapkan otentikasi dua faktor untuk keamanan tambahan peran pengguna siapkan kontrol akses berbasis peran untuk berbagai jenis pengguna fitur waktu nyata tambahkan pesan waktu nyata dan notifikasi menggunakan live query dari back4app untuk kode lengkap dari aplikasi jejaring sosial back4gram, anda dapat memeriksa repositori github https //github com/templates back4app/back4gram layanan backend yang kuat dari back4app dan integrasi parse server menjadikannya pilihan yang sangat baik untuk membangun aplikasi jejaring sosial yang aman dan dapat diskalakan dengan memanfaatkan kemampuan manajemen pengguna bawaan, anda dapat membuat sistem otentikasi yang kuat dengan usaha minimal, memungkinkan anda untuk fokus pada pembuatan fitur unik yang membuat aplikasi anda menonjol