React NativeでのParseユーザーのパスワードリセット手順

react nativeのユーザーパスワードリセット はじめに システムにパスワードを導入すると、ユーザーはそれを忘れてしまうという事実があります。そのような場合、parseライブラリはユーザーが安全にパスワードをリセットできる方法を提供します。 メール確認と同様に、parseはこれに対する実装をすでに用意しています、 parse user requestpasswordemail parse user requestpasswordemail 。このメソッドを使用することで、parseはパスワードリセットのすべての側面をシームレスに処理します。 前提条件 このチュートリアルを完了するには、 作成されたreact nativeアプリと https //www back4app com/docs/react native/parse sdk/react native sdk 前のガイドを完了して、 https //www back4app com/docs/react native/parse sdk/working with users/react native login についての理解を深めてください。 目標 parseを使用してreact nativeアプリにユーザーパスワードリセット機能を追加する。 1 パスワードリセットメールのカスタマイズ 「 parse user requestpasswordemail parse user requestpasswordemail 」メソッドを呼び出す前に、パスワードリセットをリクエストした後にユーザーが受け取るメッセージをカスタマイズできます。アプリのダッシュボードにログインし、設定 >確認メールに移動して、パスワードリセットメールの件名またはメッセージを変更してください。ユーザーが明確な指示を含むメールを受け取り、それが実際にあなたのアプリケーションからのものであることを示すことを確認してください。 2 requestpasswordemailの使用 「 parse user requestpasswordemail parse user requestpasswordemail 」メソッドを呼び出すには、ユーザーアカウントのメールアドレスをパラメータとして指定するだけで済みますので、パスワードリセット画面に次の関数を追加してください。ユーザーのメールアドレス用のテキスト入力を画面に追加することを忘れないでください。 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 }; 画面とコンポーネントをテストしてください。パスワードリセットメールをリクエストした後、次のようなメッセージが表示されます メールを受け取ったはずですので、受信トレイを確認してください。メッセージには、parseダッシュボードで以前に設定した変更が含まれます。 パスワードリセットフォームは次のようになります これで完了です。このフォームでパスワードを変更した後、ユーザーは再びアプリケーションにログインできるようになります。 3 パスワードリクエストコンポーネントの作成 前述のように、ステップ2で示した機能を含むコンポーネントを作成し、ユーザーアカウントのメール用のテキスト入力フィールドを追加して、アプリでのパスワードリセットを可能にする必要があります。こちらがこのコンポーネントの完全な例です。希望があれば、以前のガイドのユーザーログインプロジェクトに組み込むことができます。 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 }; このコンポーネントは、このような画面にレンダリングされるべきです 結論 このガイドの最後に、react nativeでparseユーザーがパスワードをリセットできるようにする方法を学びました。次のガイドでは、便利なユーザークエリを実行する方法をお見せします。