React NativeでParseサーバーのメール認証設定方法

10 分

react nativeのユーザーメール認証はじめにユーザー登録が無制限のモバイルアプリは、アプリケーションサーバーにセキュリティ問題やスパムを引き起こす可能性があります。メール認証は、この状況を防ぐのに役立ち、アプリに登録されたユーザーが有効なメールアドレスを持っていることを要求します。このガイドでは、メール認証を設定する方法を学びます。 \back4app\ サーバーで自動的にこの認証を処理します。また、アプリケーション内でユーザーが実際に認証されていることを確認する方法も学びます。いつでも、このチュートリアルで構築された完全なandroidプロジェクトにアクセスできます。私たちのgithubリポジトリで kotlinの例リポジトリ https //github com/templates back4app/android parse sdk kotlin javaの例リポジトリ https //github com/templates back4app/android parse sdk java 目標 react nativeアプリのparseでappleサインインを使用してユーザーログイン機能を構築すること。前提条件このチュートリアルを完了するには、次のものが必要です：作成されたreact nativeアプリと back4appに接続された https //www back4app com/docs/react native/parse sdk/react native sdk 前のガイドを完了して、 parse userクラスについての理解を深めてください https //www back4app com/docs/react native/parse sdk/working with users/react native login 1 メール確認の設定これから、back4app上のparse serverを設定して、ユーザーのメール確認を要求します。あなたの back4appダッシュボード https //dashboard back4app com/apps を開き、サーバー設定のコントロールパネルに移動します。「 \確認メール\ 」機能を見つけて、「 \設定\ 」をクリックします。続けて、 \ユーザーのメールを確認する\ と \メールが確認されていない場合はログインを防ぐ\ のチェックボックスを確認してください。この画面の設定を自由に更新およびカスタマイズできます。たとえば、確認メールのメッセージ本文や返信先アドレスなどです。この設定を行った後、あなたの \parse\ サーバーインスタンスは、ユーザーのメール確認を自動的に処理します。注意： \メールが確認されていない場合はログインを防ぐ\ を有効にする必要はありませんが、新しいユーザーにアプリ内でのアクションを実行する前に確認を求めることは良い習慣です。 2 ユーザー登録コンポーネントを更新するユーザーのメール確認で正しくサインアップするために、あなたの \userregistration\ コンポーネントにいくつかの変更を加える必要があります。まず、ユーザーのメール値のための新しい入力フィールドを追加します。次に、 \userregistration js\ のユーザー登録関数を更新します（ \userregistration tsx\ typescriptを使用している場合）ファイルで、これでユーザーデータにメール属性を設定しています userregistration js 1 const dousersignup = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 const emailvalue = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; userregistration tsx 1 const dousersignup = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 const emailvalue string = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser parse user) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error object) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; ユーザーがメールを確認せずにログインすることがないように、登録後にユーザーをログアウトさせる必要があります。これにより、現在のアプリケーションでのエラーを避けることができます。 \セッション\ 。アプリケーションをテストし、新しいユーザーを登録した後にこのようなメッセージが表示されるはずです新しいユーザーを正常に登録した後、parseは確認リンクを含むメールを送信します。これは次のようになります 3 userloginコンポーネントを設定するあなたの \parse\ サーバーは、確認済みのユーザー以外からの自動ログイン試行をブロックしています。しかし、確認されていないユーザーがアプリケーションにアクセスできないようにすることも良い習慣ですので、あなたの \userlogin\ コンポーネントに新しい条件を追加しましょう。 \userlogin js\ （ \userlogin tsx\ typescriptを使用している場合）ファイル内 userlogin js 1 const douserlogin = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; userregistration tsx 1 const douserlogin = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser parse user) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser parse user = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error object) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 4 メール確認のテストアプリケーションをテストし、以前に作成した未承認のユーザーを使用してログインを試みてください。メールの確認リンクをクリックしなかった場合、次のようなエラーメッセージが表示されるはずです確認リンクをクリックすると、ログインでき、ホーム画面にリダイレクトされます。また、back4appダッシュボード内の \ユーザー\ テーブルを開いて、 \emailverified\ 列を手動で編集することで、ユーザーを確認することもできます結論このガイドの最後に、ユーザーのメール確認を要求するように \parse\ サーバーを設定し、react nativeアプリケーション内でこの制限を強制する方法を学びました。次のガイドでは、便利なユーザークエリの実行方法を示します。