ReactでParseユーザーのパスワードリセットを実装する方法

reactのユーザーパスワードリセット はじめに システムにパスワードを導入すると、ユーザーはそれを忘れてしまうという事実があります。そのような場合、parseライブラリはユーザーが安全にパスワードをリセットできる方法を提供します。 メール確認と同様に、parseにはこれに対する実装がすでに用意されています、 parse user requestpasswordemail parse user requestpasswordemail このメソッドを使用することで、parseはパスワードリセットのすべての側面をシームレスに処理します。 前提条件 このチュートリアルを完了するには、次のものが必要です 作成されたreactアプリと back4appに接続された 前のガイドを完了して、 parse userクラスとparse user loginメソッド https //www back4app com/docs/react/working with users/react user login についてより良い理解を得てください。 このガイドで提供される画面レイアウトをテスト/使用したい場合は、 ant design ant design ライブラリを設定する必要があります。 目標 parseを使用してreactアプリにユーザーパスワードリセット機能を追加すること。 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 } このコンポーネントは、次のような画面にレンダリングされるはずです 結論 このガイドの最後に、あなたはreactでparseユーザーがパスワードをリセットできるようにする方法を学びました。次のガイドでは、役立つユーザークエリを実行する方法を示します。