Redefina Senhas em React Native com Parse

redefinição de senha do usuário para react native introdução é um fato que assim que você introduz senhas em um sistema, os usuários as esquecerão em tais casos, a biblioteca parse fornece uma maneira de permitir que eles redefinam sua senha de forma segura assim como na verificação de e mail, o parse já tem uma implementação pronta para isso, parse user requestpasswordemail parse user requestpasswordemail ao usar este método, o parse cuidará de todos os aspectos da redefinição de senha para você de forma transparente pré requisitos para completar este tutorial, você precisará um app react native criado e https //www back4app com/docs/react native/parse sdk/react native sdk complete os guias anteriores para que você possa ter uma melhor compreensão de https //www back4app com/docs/react native/parse sdk/working with users/react native login objetivo para adicionar um recurso de redefinição de senha de usuário a um aplicativo react native usando parse 1 personalizando e mails de redefinição de senha antes de chamar o parse user requestpasswordemail parse user requestpasswordemail método, você pode personalizar a mensagem que seu usuário receberá após solicitar uma redefinição de senha faça login no painel do seu aplicativo, vá para configurações >e mails de verificação e altere o assunto ou a mensagem do seu e mail de redefinição de senha certifique se de que seu usuário receberá um e mail contendo instruções claras e indicando que é realmente do seu aplicativo 2 usando requestpasswordemail chamar o parse user requestpasswordemail parse user requestpasswordemail método requer apenas o e mail da conta do seu usuário como parâmetro, então vá em frente e adicione a seguinte função à sua tela de redefinição de senha lembre se de adicionar um campo de texto para o e mail do seu usuário à sua tela 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 }; vá em frente e teste sua tela e componente você verá uma mensagem como esta após solicitar um e mail de redefinição de senha você deve ter recebido o e mail, então vá em frente e verifique sua caixa de entrada observe que a mensagem conterá quaisquer alterações que você tenha configurado anteriormente no seu painel parse o formulário de redefinição de senha terá esta aparência é isso, após alterar a senha neste formulário, seu usuário poderá fazer login novamente em seu aplicativo 3 criando um componente de solicitação de senha como mencionado anteriormente, você deve criar um componente contendo a função mostrada no passo 2 e também um campo de entrada de texto para o e mail da sua conta de usuário para habilitar a redefinição de senha em seu aplicativo aqui está um exemplo completo deste componente você pode integrá lo ao projeto de login de usuário de nossos guias anteriores, se desejar 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&#x9; 7 export const userresetpassword = () => { 8 const navigation = usenavigation(); 9&#x9; 10 // your state variable 11 const \[email, setemail] = usestate(''); 12&#x9; 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&#x9; 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&#x9; 7 export const userresetpassword fc<{}> = ({}) reactelement => { 8 const navigation = usenavigation(); 9&#x9; 10 // your state variable 11 const \[email, setemail] = usestate(''); 12&#x9; 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&#x9; 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 deve ser renderizado em uma tela como esta conclusão no final deste guia, você aprendeu como permitir que seus usuários do parse redefinam suas senhas no react native no próximo guia, mostraremos como realizar consultas úteis de usuários