Implementação de Redefinição de Senha no React com Parse

redefinição de senha do usuário para react 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 usando 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 criado e conectado ao back4app complete o guia anterior para que você possa ter uma melhor compreensão de a classe parse user e o método parse user login https //www back4app com/docs/react/working with users/react user login se você quiser testar/utilizar o layout da tela fornecido por este guia, você deve configurar a ant design ant design biblioteca objetivo adicionar um recurso de redefinição de senha do usuário a um app react 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 parse, 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 ao seu componente de redefinição de senha lembre se de adicionar um campo de entrada de texto para o e mail do seu usuário ao seu componente javascript 1 const dorequestpasswordreset = async function () { 2 // note that this value come from state variables linked to your text input 3 const emailvalue = email; 4 try { 5 await parse user requestpasswordreset(emailvalue); 6 alert(`success! please check ${email} to proceed with password reset `); 7 return true; 8 } catch(error) { 9 // error can be caused by lack of internet connection 10 alert(`error! ${error}`); 11 return false; 12 } 13 };1 const dorequestpasswordreset = async function () promise\<boolean> { 2 // note that this value come from state variables linked to your text input 3 const emailvalue string = email; 4 try { 5 await parse user requestpasswordreset(emailvalue); 6 alert(`success! please check ${email} to proceed with password reset `); 7 return true; 8 } catch(error any) { 9 // error can be caused by lack of internet connection 10 alert(`error! ${error}`); 11 return false; 12 } 13 }; vá em frente e teste seu componente após solicitar um e mail de redefinição de senha, você deve ter recebido o e mail, então 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 será assim é isso, após alterar a senha neste formulário, seu usuário poderá fazer login novamente em sua aplicação 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 do nosso guia anterior, se desejar userresetpassword 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 userpasswordreset = () => { 7 // state variables 8 const \[email, setemail] = usestate(''); 9&#x9; 10 // functions used by the screen components 11 const dorequestpasswordreset = async function () { 12 // note that this value come from state variables linked to your text input 13 const emailvalue = email; 14 try { 15 await parse user requestpasswordreset(emailvalue); 16 alert(`success! please check ${email} to proceed with password reset `); 17 return true; 18 } catch (error) { 19 // error can be caused by lack of internet connection 20 alert(`error! ${error}`); 21 return false; 22 } 23 }; 24&#x9; 25 return ( 26 \<div> 27 \<div classname="header"> 28 \<img 29 classname="header logo" 30 alt="back4app logo" 31 src={ 32 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 33 } 34 /> 35 \<p classname="header text bold">{'react on back4app'}\</p> 36 \<p classname="header text">{'user password reset'}\</p> 37 \</div> 38 \<div classname="container"> 39 \<h2 classname="heading">{'request password reset email'}\</h2> 40 \<divider /> 41 \<div classname="form wrapper"> 42 \<input 43 value={email} 44 onchange={(event) => setemail(event target value)} 45 placeholder="your account email" 46 size="large" 47 classname="form input" 48 /> 49 \</div> 50 \<div classname="form buttons"> 51 \<button 52 onclick={() => dorequestpasswordreset()} 53 type="primary" 54 classname="form button" 55 color={'#208aec'} 56 size="large" 57 > 58 request password reset 59 \</button> 60 \</div> 61 \</div> 62 \</div> 63 ); 64 }; userresetpassword 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 userpasswordreset fc<{}> = () reactelement => { 7 // state variables 8 const \[email, setemail] = usestate(''); 9&#x9; 10 // functions used by the screen components 11 const dorequestpasswordreset = async function () promise\<boolean> { 12 // note that this value come from state variables linked to your text input 13 const emailvalue string = email; 14 try { 15 await parse user requestpasswordreset(emailvalue); 16 alert(`success! please check ${email} to proceed with password reset `); 17 return true; 18 } catch(error any) { 19 // error can be caused by lack of internet connection 20 alert(`error! ${error}`); 21 return false; 22 } 23 }; 24&#x9; 25 return ( 26 \<div> 27 \<div classname="header"> 28 \<img 29 classname="header logo" 30 alt="back4app logo" 31 src={ 32 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 33 } 34 /> 35 \<p classname="header text bold">{'react on back4app'}\</p> 36 \<p classname="header text">{'user password reset'}\</p> 37 \</div> 38 \<div classname="container"> 39 \<h2 classname="heading">{'request password reset email'}\</h2> 40 \<divider /> 41 \<div classname="form wrapper"> 42 \<input 43 value={email} 44 onchange={(event) => setemail(event target value)} 45 placeholder="your account email" 46 size="large" 47 classname="form input" 48 /> 49 \</div> 50 \<div classname="form buttons"> 51 \<button 52 onclick={() => dorequestpasswordreset()} 53 type="primary" 54 classname="form button" 55 color={'#208aec'} 56 size="large" 57 > 58 request password reset 59 \</button> 60 \</div> 61 \</div> 62 \</div> 63 ); 64 }; adicione essas classes ao seu app css app css arquivo para renderizar completamente os elementos de layout do componente app css 1 @import ' antd/dist/antd css'; 2&#x9; 3 app { 4 text align center; 5 } 6&#x9; 7 html { 8 box sizing border box; 9 outline none; 10 overflow auto; 11 } 12&#x9; 13 , 14 before, 15 after { 16 margin 0; 17 padding 0; 18 box sizing inherit; 19 } 20&#x9; 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin 0; 28 font weight bold; 29 } 30&#x9; 31 p { 32 margin 0; 33 } 34&#x9; 35 body { 36 margin 0; 37 background color #fff; 38 } 39&#x9; 40 container { 41 width 100%; 42 max width 500px; 43 margin auto; 44 padding 20px 0; 45 text align left; 46 } 47&#x9; 48 header { 49 align items center; 50 padding 25px 0; 51 background color #208aec; 52 } 53&#x9; 54 header logo { 55 height 55px; 56 margin bottom 20px; 57 object fit contain; 58 } 59&#x9; 60 header text bold { 61 margin bottom 3px; 62 color rgba(255, 255, 255, 0 9); 63 font size 16px; 64 font weight bold; 65 } 66&#x9; 67 header text { 68 color rgba(255, 255, 255, 0 9); 69 font size 15px; 70 } 71&#x9; 72 heading { 73 font size 22px; 74 } 75&#x9; 76 form wrapper { 77 margin top 20px; 78 margin bottom 10px; 79 } 80&#x9; 81 form input { 82 margin bottom 20px; 83 } 84&#x9; 85 form button { 86 width 100%; 87 } 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 no próximo guia, mostraremos como realizar consultas úteis de usuários