리액트에서 Parse 비밀번호 재설정 구현 방법

리액트를 위한 사용자 비밀번호 재설정 소개 비밀번호를 시스템에 도입하면 사용자가 비밀번호를 잊어버리는 것은 사실입니다 이러한 경우, parse 라이브러리는 사용자가 안전하게 비밀번호를 재설정할 수 있는 방법을 제공합니다 이메일 인증과 마찬가지로, parse는 이미 이를 위한 구현을 준비해 두었습니다, parse user requestpasswordemail parse user requestpasswordemail 이 방법을 사용하면 parse가 비밀번호 재설정의 모든 측면을 원활하게 처리합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 리액트 앱이 생성되고 https //www back4app com/docs/react/quickstart 이전 가이드를 완료하여 https //www back4app com/docs/react/working with users/react user login 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면 https //ant design/docs/react/introduce 목표 parse를 사용하여 리액트 앱에 사용자 비밀번호 재설정 기능을 추가하는 것입니다 1 비밀번호 재설정 이메일 사용자 정의 비밀번호 재설정 요청 후 사용자가 받을 메시지를 사용자 정의할 수 있습니다 parse user requestpasswordemail parse user requestpasswordemail 메서드를 호출하기 전에 parse 앱 대시보드에 로그인하고 설정 >검증 이메일로 이동하여 비밀번호 재설정 이메일 제목이나 메시지를 변경하세요 사용자가 명확한 지침이 포함된 이메일을 받고, 그것이 실제로 귀하의 애플리케이션에서 온 것임을 나타내는지 확인하세요 2 requestpasswordemail 사용하기 다음과 같이 parse user requestpasswordemail parse user requestpasswordemail 메서드를 호출하는 것은 사용자 계정 이메일만 매개변수로 필요하므로, 비밀번호 재설정 구성 요소에 다음 함수를 추가하세요 사용자 이메일을 위한 텍스트 입력을 구성 요소에 추가하는 것을 잊지 마세요 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 }; 구성 요소를 테스트하세요 비밀번호 재설정 이메일을 요청한 후 이메일을 받았는지 확인하세요 받은 편지함을 확인하세요 메시지에는 이전에 parse 대시보드에서 설정한 변경 사항이 포함될 것입니다 비밀번호 재설정 양식은 다음과 같이 보일 것입니다 그게 전부입니다 이 양식에서 비밀번호를 변경한 후, 사용자는 다시 귀하의 애플리케이션에 로그인할 수 있습니다 3 비밀번호 요청 컴포넌트 만들기 앞서 언급했듯이, 비밀번호 재설정을 가능하게 하기 위해 사용자 계정 이메일을 위한 텍스트 입력 필드와 함께 2단계에서 보여준 기능을 포함하는 컴포넌트를 만들어야 합니다 다음은 이 컴포넌트의 완전한 예입니다 원하신다면 이전 가이드의 사용자 로그인 프로젝트에 연결할 수 있습니다 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 }; 이 클래스를 app css app css 파일에 추가하여 구성 요소 레이아웃 요소를 완전히 렌더링하세요 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 } 이 구성 요소는 다음과 같은 화면에 렌더링되어야 합니다 결론 이 가이드의 끝에서, 당신은 parse 사용자가 react에서 비밀번호를 재설정할 수 있도록 하는 방법을 배웠습니다 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다