Guía técnica para registro de usuario con Parse en React

página de registro en react usando parse introducción en el núcleo de muchas aplicaciones, las cuentas de usuario tienen una noción que permite a los usuarios acceder de forma segura a su información parse proporciona una clase de usuario especializada llamada parse user parse user que maneja automáticamente gran parte de la funcionalidad requerida para la gestión de cuentas de usuario en esta guía, aprenderás cómo funciona la parse user parse user creando una función de registro de usuario para tu aplicación react usando el sdk de parse js requisitos previos para completar este tutorial, necesitarás una aplicación react creada y conectada a back4app si deseas probar/utilizar el diseño de pantalla proporcionado por esta guía, deberías configurar la ant design ant design biblioteca objetivo construir una función de registro de usuario usando parse para una aplicación react 1 entendiendo el método signup parse user management utiliza el parse user parse user tipo de objeto, que extiende el parseobject parseobject por defecto mientras contiene métodos auxiliares únicos, como current current y getusername getusername , que te ayudarán a recuperar datos de usuario a lo largo de tu aplicación puedes leer más sobre el parse user parse user objeto aquí en la documentación oficial https //parseplatform org/parse sdk js/api/master/parse user html en esta guía, aprenderás cómo usar el signup signup método que crea un nuevo parse user parse user válido y único tanto localmente como en el servidor, tomando como argumentos valores válidos de username username y password password 2 crear el componente de registro de usuario ahora construyamos el componente funcional, que llamará al signup signup método en nuestra app primero, crea un nuevo archivo en tu directorio src llamado userregistration js userregistration js ( userregistration tsx userregistration tsx si estás usando typescript) y también agrega los elementos de entrada necesarios ( nombre de usuario nombre de usuario y contraseña contraseña inputs), utilizando hooks de estado a través de usestate usestate para gestionar sus datos 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 crear una función de registro ahora puedes crear la función de registro que llamará al signup signup método 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 crear un nuevo usuario usando signup signup también lo convierte en el usuario actualmente conectado, por lo que no es necesario que su usuario inicie sesión nuevamente para continuar usando su aplicación inserte esta función dentro del userregistration userregistration componente, justo antes de la return return llamada, para ser llamada y probada recuerde actualizar la acción del botón de registro del formulario onclick onclick a () => douserregistration() () => douserregistration() su componente ahora debería verse así 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 }; también agrega estas clases a tu app css app css archivo para renderizar completamente los estilos de diseño 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 } tu aplicación ahora debería verse así después de proporcionar las credenciales de usuario deseadas, verás este mensaje después de presionar en registrarse registrarse si todo fue exitoso el manejo de errores se puede probar si intentas registrar un usuario con el mismo nombre de usuario que antes recibirás otro error si intentas registrarte sin contraseña conclusión al final de esta guía, aprendiste cómo registrar nuevos usuarios de parse en react en la próxima guía, te mostraremos cómo iniciar y cerrar sesión de usuarios