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

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