Registrare nuovi utenti in React con Parse JS SDK

pagina di registrazione in react utilizzando parse introduzione al centro di molte app, gli account utente hanno una nozione che consente agli utenti di accedere in modo sicuro alle proprie informazioni parse fornisce una classe utente specializzata chiamata parse user parse user che gestisce automaticamente gran parte della funzionalità richiesta per la gestione degli account utente in questa guida, imparerai come funziona la parse user parse user creando una funzionalità di registrazione utente per la tua app react utilizzando il parse js sdk requisiti per completare questo tutorial, avrai bisogno di un'app react creata e connessa a back4app se desideri testare/utilizzare il layout dello schermo fornito da questa guida, dovresti configurare la ant design ant design libreria obiettivo costruire una funzionalità di registrazione utente utilizzando parse per un'app react 1 comprendere il metodo signup la gestione degli utenti di parse utilizza il parse user parse user tipo di oggetto, che estende il default parseobject parseobject tipo mentre contiene metodi helper unici, come current current e getusername getusername , che ti aiuteranno a recuperare i dati dell'utente all'interno della tua app puoi leggere di più sul parse user parse user oggetto qui nella documentazione ufficiale https //parseplatform org/parse sdk js/api/master/parse user html in questa guida, imparerai come utilizzare il signup signup metodo che crea un nuovo oggetto parse user parse user valido e unico sia localmente che sul server, prendendo come argomenti valori validi di username username e password password 2 crea il componente di registrazione dell'utente costruiamo ora il componente funzionale, che chiamerà il signup signup metodo nella nostra app prima, crea un nuovo file nella tua directory src chiamato userregistration js userregistration js ( userregistration tsx userregistration tsx se stai usando typescript) e aggiungi anche gli elementi di input necessari ( username username e password password input), utilizzando gli state hooks tramite usestate usestate per gestire i loro dati 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 crea una funzione di registrazione ora puoi creare la funzione di registrazione che chiamerà il signup signup metodo 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 }; nota creare un nuovo utente utilizzando signup signup rende anche l'utente attualmente connesso, quindi non è necessario che il tuo utente acceda di nuovo per continuare a utilizzare la tua app inserisci questa funzione all'interno del userregistration userregistration componente, appena prima della return return chiamata, per essere chiamata e testata ricorda di aggiornare l'azione del pulsante di registrazione del modulo onclick onclick a () => douserregistration() () => douserregistration() il tuo componente dovrebbe ora apparire così 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 }; aggiungi anche queste classi al tuo app css app css file per rendere completamente i layout 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 } la tua app ora dovrebbe apparire così dopo aver fornito le credenziali utente desiderate, vedrai questo messaggio dopo aver premuto su registrati registrati se tutto è andato a buon fine la gestione degli errori può essere testata se provi a registrare un utente con lo stesso nome utente di prima riceverai un altro errore se provi a registrarti senza password conclusione alla fine di questa guida, hai imparato come registrare nuovi utenti parse su react nella prossima guida, ti mostreremo come effettuare il login e il logout degli utenti