Implementasi Verifikasi Email di React Native dengan Parse

verifikasi email pengguna untuk react native pendahuluan memiliki aplikasi mobile dengan pendaftaran pengguna yang tidak terbatas dapat menyebabkan masalah keamanan dan spam di server aplikasi anda verifikasi email dapat membantu anda mencegah situasi ini, dengan mengharuskan setiap pengguna yang terdaftar di aplikasi anda memiliki alamat email yang valid dalam panduan ini, anda akan belajar bagaimana cara mengatur verifikasi email di back4app back4app server anda, yang akan secara otomatis menangani verifikasi ini anda juga akan belajar bagaimana memastikan di aplikasi anda bahwa pengguna benar benar terverifikasi kapan saja, anda dapat mengakses proyek android lengkap yang dibangun dengan tutorial ini di repositori github kami repositori contoh kotlin repositori contoh java tujuan untuk membangun fitur login pengguna menggunakan apple sign in di parse untuk aplikasi react native prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react native yang dibuat dan terhubung ke back4app selesaikan panduan sebelumnya agar anda dapat memiliki pemahaman yang lebih baik tentang kelas pengguna parse 1 konfigurasi verifikasi email anda sekarang akan mengonfigurasi server parse anda di back4app untuk memerlukan verifikasi email pengguna buka dasbor back4app https //dashboard back4app com/apps anda dan navigasikan ke panel kontrol pengaturan server anda temukan fitur email verifikasi email verifikasi dan klik pada pengaturan pengaturan silakan periksa verifikasi email pengguna verifikasi email pengguna dan cegah login jika email tidak terverifikasi cegah login jika email tidak terverifikasi checkbox silakan perbarui dan sesuaikan pengaturan apa pun di layar ini, seperti isi pesan email verifikasi dan alamat balasan setelah mengatur ini, instance server parse parse anda sekarang akan menangani verifikasi email pengguna secara otomatis catatan mengaktifkan cegah login jika email tidak terverifikasi cegah login jika email tidak terverifikasi tidak diwajibkan, tetapi merupakan praktik yang baik untuk meminta pengguna baru anda untuk memverifikasi sebelum melakukan tindakan apa pun di aplikasi anda 2 perbarui komponen userregistration anda anda perlu melakukan beberapa perubahan pada userregistration userregistration komponen anda untuk mendaftar pengguna dengan verifikasi email dengan benar pertama, tambahkan bidang input baru untuk nilai email pengguna anda perbarui fungsi pendaftaran pengguna di userregistration js userregistration js ( userregistration tsx userregistration tsx jika anda menggunakan typescript) file sehingga sekarang anda mengatur atribut email pada data pengguna 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 }; perhatikan bahwa karena pengguna anda tidak seharusnya masuk tanpa memverifikasi emailnya, anda perlu mengeluarkannya setelah pendaftaran untuk menghindari kesalahan dalam aplikasi saat ini sesi sesi uji aplikasi anda dan sekarang anda seharusnya melihat pesan seperti ini setelah mendaftar pengguna baru setelah berhasil mendaftarkan pengguna baru anda, parse akan mengirimkan email yang berisi tautan verifikasi, yang terlihat seperti ini 3 siapkan komponen userlogin anda server parse parse anda sekarang secara otomatis memblokir upaya login yang tidak berasal dari pengguna yang terverifikasi namun, ini juga merupakan praktik yang baik untuk memastikan bahwa tidak ada cara bagi pengguna yang tidak terverifikasi untuk mengakses aplikasi anda, jadi mari kita tambahkan kondisi baru di dalam userlogin userlogin komponen di userlogin js userlogin js ( userlogin tsx userlogin tsx jika anda menggunakan typescript) file 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 uji verifikasi email silakan uji aplikasi anda, mencoba untuk masuk menggunakan pengguna yang tidak terotorisasi yang dibuat sebelumnya jika anda tidak mengklik tautan verifikasi di email, anda harus mendapatkan pesan kesalahan seperti ini setelah mengklik tautan verifikasi, anda akan dapat masuk dan diarahkan ke layar beranda anda anda juga dapat memverifikasi pengguna anda dengan membuka pengguna pengguna tabel di dalam dasbor back4app anda dan mengedit kolom emailverified emailverified secara manual kesimpulan di akhir panduan ini, anda telah belajar bagaimana mengatur parse parse server anda untuk memerlukan verifikasi email pengguna dan juga untuk menegakkan pembatasan ini di dalam aplikasi react native anda di panduan berikutnya, kami akan menunjukkan kepada anda cara melakukan kueri pengguna yang berguna