Implementación de Restablecimiento de Contraseña en React Native

9 min

restablecimiento de contraseña de usuario para react native introducción es un hecho que tan pronto como introduces contraseñas en un sistema, los usuarios las olvidarán en tales casos, la biblioteca parse proporciona una forma de permitirles restablecer su contraseña de manera segura al igual que con la verificación de correo electrónico, parse ya tiene una implementación lista para esto, parse user requestpasswordemail parse user requestpasswordemail al usar este método, parse manejará todos los aspectos del restablecimiento de contraseñas de manera fluida requisitos previos para completar este tutorial, necesitarás una aplicación de react native creada y conectada a back4app completa las guías anteriores para que puedas tener una mejor comprensión de la clase de usuario de parse objetivo para agregar una función de restablecimiento de contraseña de usuario a una aplicación de react native utilizando parse 1 personalizando los correos electrónicos de restablecimiento de contraseña antes de llamar al parse user requestpasswordemail parse user requestpasswordemail método, puedes personalizar el mensaje que tu usuario recibirá después de solicitar un restablecimiento de contraseña inicia sesión en el panel de tu aplicación, ve a configuración >correos electrónicos de verificación y cambia el asunto o el mensaje de tu correo electrónico de restablecimiento de contraseña asegúrate de que tu usuario reciba un correo electrónico que contenga instrucciones claras e indicando que realmente proviene de tu aplicación 2 usando requestpasswordemail llamar al parse user requestpasswordemail parse user requestpasswordemail método solo requiere el correo electrónico de la cuenta de tu usuario como parámetro, así que adelante y agrega la siguiente función a tu pantalla de restablecimiento de contraseña recuerda agregar un campo de texto para el correo electrónico de tu usuario en tu pantalla javascript 1 const douserpasswordreset = async function () { 2 // note that this value come from state variables linked to your text input 3 const emailvalue = email; 4 return await parse user requestpasswordreset(emailvalue) 5 then(() => { 6 // login returns the corresponding parseuser object 7 alert alert( 8 'success!', 9 `please check ${email} to proceed with password reset `, 10 ); 11 return true; 12 }) 13 catch((error) => { 14 // error can be caused by lack of internet connection 15 alert alert('error!', error message); 16 return false; 17 }); 18 };1 const douserpasswordreset = async function () promise\<boolean> { 2 // note that this value come from state variables linked to your text input 3 const emailvalue string = email; 4 return await parse user requestpasswordreset(emailvalue) 5 then(() => { 6 // login returns the corresponding parseuser object 7 alert alert( 8 'success!', 9 `please check ${email} to proceed with password reset `, 10 ); 11 return true; 12 }) 13 catch((error object) => { 14 // error can be caused by lack of internet connection 15 alert alert('error!', error message); 16 return false; 17 }); 18 }; adelante, prueba tu pantalla y componente verás un mensaje como este después de solicitar un correo electrónico para restablecer la contraseña deberías haber recibido el correo electrónico, así que adelante, revisa tu bandeja de entrada ten en cuenta que el mensaje contendrá cualquier cambio que hayas configurado anteriormente en tu panel de control de parse el formulario de restablecimiento de contraseña se verá así eso es todo, después de cambiar la contraseña en este formulario, tu usuario podrá iniciar sesión nuevamente en tu aplicación 3 creando un componente de solicitud de contraseña como se dijo antes, deberías crear un componente que contenga la función mostrada en el paso 2 y también un campo de entrada de texto para el correo electrónico de tu cuenta de usuario para habilitar el restablecimiento de contraseña en tu aplicación aquí hay un ejemplo completo de este componente puedes integrarlo en el proyecto de inicio de sesión de usuario de nuestras guías anteriores si lo deseas userresetpassword js 1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6	 7 export const userresetpassword = () => { 8 const navigation = usenavigation(); 9	 10 // your state variable 11 const \[email, setemail] = usestate(''); 12	 13 const douserpasswordreset = async function () promise\<boolean> { 14 // note that this value come from state variables linked to your text input 15 const emailvalue = email; 16 return await parse user requestpasswordreset(emailvalue) 17 then(() => { 18 // login returns the corresponding parseuser object 19 alert alert( 20 'success!', 21 `please check ${email} to proceed with password reset `, 22 ); 23 // redirect user to your login screen 24 navigation navigate('login'); 25 return true; 26 }) 27 catch((error) => { 28 // error can be caused by lack of internet connection 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 33	 34 return ( 35 \<view style={styles login wrapper}> 36 \<view style={styles form}> 37 \<text>{'please enter your account email to reset your password '}\</text> 38 \<textinput 39 style={styles form input} 40 value={email} 41 placeholder={'your account email'} 42 onchangetext={(text) => setemail(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<touchableopacity onpress={() => douserpasswordreset()}> 47 \<view style={styles button}> 48 \<text style={styles button label}>{'request password reset'}\</text> 49 \</view> 50 \</touchableopacity> 51 \</view> 52 \</view> 53 ); 54 }; userresetpassword tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6	 7 export const userresetpassword fc<{}> = ({}) reactelement => { 8 const navigation = usenavigation(); 9	 10 // your state variable 11 const \[email, setemail] = usestate(''); 12	 13 const douserpasswordreset = async function () promise\<boolean> { 14 // note that this value come from state variables linked to your text input 15 const emailvalue string = email; 16 return await parse user requestpasswordreset(emailvalue) 17 then(() => { 18 // login returns the corresponding parseuser object 19 alert alert( 20 'success!', 21 `please check ${email} to proceed with password reset `, 22 ); 23 // redirect user to your login screen 24 navigation navigate('login'); 25 return true; 26 }) 27 catch((error object) => { 28 // error can be caused by lack of internet connection 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; 33	 34 return ( 35 \<view style={styles login wrapper}> 36 \<view style={styles form}> 37 \<text>{'please enter your account email to reset your password '}\</text> 38 \<textinput 39 style={styles form input} 40 value={email} 41 placeholder={'your account email'} 42 onchangetext={(text) => setemail(text)} 43 autocapitalize={'none'} 44 keyboardtype={'email address'} 45 /> 46 \<touchableopacity onpress={() => douserpasswordreset()}> 47 \<view style={styles button}> 48 \<text style={styles button label}>{'request password reset'}\</text> 49 \</view> 50 \</touchableopacity> 51 \</view> 52 \</view> 53 ); 54 }; este componente debería renderizarse en una pantalla como esta conclusión al final de esta guía, aprendiste cómo permitir que tus usuarios de parse restablezcan su contraseña en react native en la próxima guía, te mostraremos cómo realizar consultas útiles de usuarios