React ลงทะเบียนผู้ใช้ด้วย Parse: คู่มือสำหรับนักพัฒนา

หน้าเข้าสู่ระบบใน react โดยใช้ parse บทนำ ที่แกนกลางของแอปพลิเคชันหลายๆ ตัว บัญชีผู้ใช้มีแนวคิดที่ช่วยให้ผู้ใช้เข้าถึงข้อมูลของตนได้อย่างปลอดภัย parse มีคลาสผู้ใช้เฉพาะที่เรียกว่า parse user parse user ซึ่งจัดการฟังก์ชันการทำงานที่จำเป็นสำหรับการจัดการบัญชีผู้ใช้โดยอัตโนมัติ ในคู่มือนี้ คุณจะได้เรียนรู้ว่าคลาส parse user parse user ทำงานอย่างไรโดยการสร้างฟีเจอร์การลงทะเบียนผู้ใช้สำหรับแอป react ของคุณโดยใช้ parse js sdk ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react ที่สร้างขึ้นและ https //www back4app com/docs/react/quickstart หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่าห้องสมุด https //ant design/docs/react/introduce เป้าหมาย เพื่อสร้างฟีเจอร์การลงทะเบียนผู้ใช้โดยใช้ parse สำหรับแอป react 1 การเข้าใจวิธีการลงทะเบียน parse user management ใช้ parse user parse user ประเภทอ็อบเจ็กต์ ซึ่งขยายประเภท parseobject parseobject เริ่มต้นในขณะที่มีวิธีช่วยเหลือเฉพาะ เช่น current current และ getusername getusername , ซึ่งจะช่วยให้คุณดึงข้อมูลผู้ใช้ตลอดทั้งแอปของคุณ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ parse user parse user อ็อบเจ็กต์ https //parseplatform org/parse sdk js/api/master/parse user html ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการใช้ signup signup วิธีการที่สร้าง parse user parse user อ็อบเจ็กต์ใหม่ที่ถูกต้องและไม่ซ้ำกันทั้งในเครื่องและบนเซิร์ฟเวอร์ โดยใช้ค่า username username และ password password ที่ถูกต้อง 2 สร้างส่วนประกอบการลงทะเบียนผู้ใช้ ตอนนี้เรามาสร้างคอมโพเนนต์ฟังก์ชันที่เรียกใช้ signup signup เมธอดในแอปของเรา ก่อนอื่นให้สร้างไฟล์ใหม่ในไดเรกทอรี src ของคุณชื่อ userregistration js userregistration js ( userregistration tsx userregistration tsx หากคุณใช้ typescript) และยังเพิ่มองค์ประกอบอินพุตที่จำเป็น ( username username และ password password อินพุต) โดยใช้ state hooks ผ่าน usestate usestate เพื่อจัดการข้อมูลของพวกเขา userregistration js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5&#x9; 6 export const userregistration = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 return ( 12 \<div> 13 \<div classname="header"> 14 \<img 15 classname="header logo" 16 alt="back4app logo" 17 src={ 18 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 19 } 20 /> 21 \<p classname="header text bold">{'react on back4app'}\</p> 22 \<p classname="header text">{'user registration'}\</p> 23 \</div> 24 \<div classname="container"> 25 \<h2 classname="heading">{'user registration'}\</h2> 26 \<divider /> 27 \<div classname="form wrapper"> 28 \<input 29 value={username} 30 onchange={(event) => setusername(event target value)} 31 placeholder="username" 32 size="large" 33 classname="form input" 34 /> 35 \<input 36 value={password} 37 onchange={(event) => setpassword(event target value)} 38 placeholder="password" 39 size="large" 40 type="password" 41 classname="form input" 42 /> 43 \</div> 44 \<div classname="form buttons"> 45 \<button 46 onclick={() => douserregistration()} 47 type="primary" 48 classname="form button" 49 color={'#208aec'} 50 size="large" 51 > 52 sign up 53 \</button> 54 \</div> 55 \</div> 56 \</div> 57 ); 58 }; userregistration tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5&#x9; 6 export const userregistration fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 return ( 12 \<div> 13 \<div classname="header"> 14 \<img 15 classname="header logo" 16 alt="back4app logo" 17 src={ 18 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 19 } 20 /> 21 \<p classname="header text bold">{'react on back4app'}\</p> 22 \<p classname="header text">{'user registration'}\</p> 23 \</div> 24 \<div classname='container'> 25 \<h2 classname="heading">{'user registration'}\</h2> 26 \<divider /> 27 \<div classname="form wrapper"> 28 \<input 29 value={username} 30 onchange={(event) => setusername(event target value)} 31 placeholder="username" 32 size="large" 33 classname="form input" 34 /> 35 \<input 36 value={password} 37 onchange={(event) => setpassword(event target value)} 38 placeholder="password" 39 size="large" 40 type="password" 41 classname="form input" 42 /> 43 \</div> 44 \<div classname="form buttons"> 45 \<button 46 onclick={() => douserregistration()} 47 type="primary" 48 classname="form button" 49 color={'#208aec'} 50 size="large" 51 > 52 sign up 53 \</button> 54 \</div> 55 \</div> 56 \</div> 57 ); 58 }; 3 สร้างฟังก์ชันการลงทะเบียน คุณสามารถสร้างฟังก์ชันการลงทะเบียนที่เรียกใช้ signup signup วิธีการ javascript 1 const douserregistration = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 try { 6 // since the signup method returns a promise, we need to call it using await 7 const createduser = await parse user signup(usernamevalue, passwordvalue); 8 alert( 9 `success! user ${createduser getusername()} was successfully created!` 10 ); 11 return true; 12 } catch (error) { 13 // signup can fail if any parameter is blank or failed an uniqueness check on the server 14 alert(`error! ${error}`); 15 return false; 16 } 17 }; typescript 1 const douserregistration = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 try { 6 // since the signup method returns a promise, we need to call it using await 7 const createduser parse user = await parse user signup(usernamevalue, passwordvalue); 8 alert( 9 `success! user ${createduser getusername()} was successfully created!`, 10 ); 11 return true; 12 } catch (error any) { 13 // signup can fail if any parameter is blank or failed an uniqueness check on the server 14 alert(`error! ${error}`); 15 return false; 16 }; 17 }; หมายเหตุ การสร้างผู้ใช้ใหม่โดยใช้ signup signup ยังทำให้เป็นผู้ใช้ที่เข้าสู่ระบบอยู่ในขณะนี้ ดังนั้นจึงไม่มีความจำเป็นที่ผู้ใช้ของคุณจะต้องเข้าสู่ระบบอีกครั้งเพื่อใช้แอปของคุณต่อไป แทรกฟังก์ชันนี้ภายใน userregistration userregistration คอมโพเนนต์ ก่อนที่จะมีการเรียก return return เพื่อให้สามารถเรียกใช้และทดสอบได้ อย่าลืมอัปเดตปุ่มลงทะเบียนในฟอร์ม onclick onclick ให้เป็น () => douserregistration() () => douserregistration() คอมโพเนนต์ของคุณควรมีลักษณะดังนี้ userregistration js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5&#x9; 6 export const userregistration = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 // functions used by the screen components 12 const douserregistration = async function () { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue = username; 15 const passwordvalue = password; 16 try { 17 // since the signup method returns a promise, we need to call it using await 18 const createduser = await parse user signup(usernamevalue, passwordvalue); 19 alert( 20 `success! user ${createduser getusername()} was successfully created!` 21 ); 22 return true; 23 } catch (error) { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert(`error! ${error}`); 26 return false; 27 } 28 }; 29&#x9; 30 return ( 31 \<div> 32 \<div classname="header"> 33 \<img 34 classname="header logo" 35 alt="back4app logo" 36 src={ 37 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 38 } 39 /> 40 \<p classname="header text bold">{'react on back4app'}\</p> 41 \<p classname="header text">{'user registration'}\</p> 42 \</div> 43 \<div classname="container"> 44 \<h2 classname="heading">{'user registration'}\</h2> 45 \<divider /> 46 \<div classname="form wrapper"> 47 \<input 48 value={username} 49 onchange={(event) => setusername(event target value)} 50 placeholder="username" 51 size="large" 52 classname="form input" 53 /> 54 \<input 55 value={password} 56 onchange={(event) => setpassword(event target value)} 57 placeholder="password" 58 size="large" 59 type="password" 60 classname="form input" 61 /> 62 \</div> 63 \<div classname="form buttons"> 64 \<button 65 onclick={() => douserregistration()} 66 type="primary" 67 classname="form button" 68 color={'#208aec'} 69 size="large" 70 > 71 sign up 72 \</button> 73 \</div> 74 \</div> 75 \</div> 76 ); 77 }; userregistration tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5&#x9; 6 export const userregistration fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 // functions used by the screen components 12 const douserregistration = async function () promise\<boolean> { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue string = username; 15 const passwordvalue string = password; 16 try { 17 // since the signup method returns a promise, we need to call it using await 18 const createduser parse user = await parse user signup(usernamevalue, passwordvalue); 19 alert( 20 `success! user ${createduser getusername()} was successfully created!`, 21 ); 22 return true; 23 } catch (error any) { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert(`error! ${error}`); 26 return false; 27 }; 28 }; 29&#x9; 30 return ( 31 \<div> 32 \<div classname="header"> 33 \<img 34 classname="header logo" 35 alt="back4app logo" 36 src={ 37 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 38 } 39 /> 40 \<p classname="header text bold">{'react on back4app'}\</p> 41 \<p classname="header text">{'user registration'}\</p> 42 \</div> 43 \<div classname='container'> 44 \<h2 classname="heading">{'user registration'}\</h2> 45 \<divider /> 46 \<div classname="form wrapper"> 47 \<input 48 value={username} 49 onchange={(event) => setusername(event target value)} 50 placeholder="username" 51 size="large" 52 classname="form input" 53 /> 54 \<input 55 value={password} 56 onchange={(event) => setpassword(event target value)} 57 placeholder="password" 58 size="large" 59 type="password" 60 classname="form input" 61 /> 62 \</div> 63 \<div classname="form buttons"> 64 \<button 65 onclick={() => douserregistration()} 66 type="primary" 67 classname="form button" 68 color={'#208aec'} 69 size="large" 70 > 71 sign up 72 \</button> 73 \</div> 74 \</div> 75 \</div> 76 ); 77 }; ยังเพิ่มคลาสเหล่านี้ลงใน app css app css ไฟล์ของคุณเพื่อแสดงรูปแบบเลย์เอาต์อย่างสมบูรณ์ app css 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6&#x9; 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14&#x9; 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 font weight bold; 23 } 24&#x9; 25 p { 26 margin 0; 27 } 28&#x9; 29 body { 30 margin 0; 31 background color #fff; 32 } 33&#x9; 34 container { 35 width 100%; 36 max width 500px; 37 margin auto; 38 padding 20px 0; 39 text align left; 40 } 41&#x9; 42 header { 43 align items center; 44 padding 25px 0; 45 background color #208aec; 46 } 47&#x9; 48 header logo { 49 height 55px; 50 margin bottom 20px; 51 object fit contain; 52 } 53&#x9; 54 header text bold { 55 margin bottom 3px; 56 color rgba(255, 255, 255, 0 9); 57 font size 16px; 58 font weight bold; 59 } 60&#x9; 61 header text { 62 color rgba(255, 255, 255, 0 9); 63 font size 15px; 64 } 65&#x9; 66 heading { 67 font size 22px; 68 } 69&#x9; 70 form wrapper { 71 margin top 20px; 72 margin bottom 10px; 73 } 74&#x9; 75 form input { 76 margin bottom 20px; 77 } 78&#x9; 79 form button { 80 width 100%; 81 } แอปของคุณตอนนี้ควรมีลักษณะดังนี้ หลังจากที่คุณให้ข้อมูลประจำตัวของผู้ใช้ที่ต้องการแล้ว คุณจะเห็นข้อความนี้หลังจากกดที่ ลงทะเบียน ลงทะเบียน หากทุกอย่างสำเร็จ การจัดการข้อผิดพลาดสามารถทดสอบได้หากคุณพยายามลงทะเบียนผู้ใช้ด้วยชื่อผู้ใช้เดียวกันกับก่อนหน้านี้ คุณจะได้รับข้อผิดพลาดอีกครั้งหากคุณพยายามลงทะเบียนโดยไม่มีรหัสผ่าน บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการลงทะเบียนผู้ใช้ใหม่ใน parse บน react ในคู่มือต่อไป เราจะแสดงให้คุณเห็นวิธีการเข้าสู่ระบบและออกจากระบบผู้ใช้