Penerapan Verifikasi Email di Ionic Framework

pendaftaran pengguna dengan verifikasi email pendahuluan bagian ini menjelaskan bagaimana anda dapat membuat aplikasi dengan pendaftaran pengguna dan verifikasi email menggunakan https //www back4app com/product/parse server melalui back4app inilah tampilan yang akan terlihat kapan saja, anda dapat mengakses proyek ionic lengkap yang dibangun dengan tutorial ini di https //github com/back4app/ionic email verification prasyarat untuk menyelesaikan quickstart ini, anda memerlukan https //code visualstudio com/download (atau ide web apa pun yang anda suka) https //ionicframework com/getting started/ sebuah aplikasi yang dibuat di back4app ikuti https //www back4app com/docs/get started/new parse app untuk belajar cara membuat aplikasi parse di back4app mengikuti https //www back4app com/docs/js framework/ionic/ionic framework login tutorial untuk belajar cara mengimplementasikan pendaftaran, login, dan keluar dengan back4app 1 siapkan dalam tutorial ini, kita akan mulai dari tempat kita tinggalkan di https //www back4app com/docs/ionic/ionic framework login screen sebelumnya 2 aktifkan verifikasi email pergi ke aplikasi anda di https //www back4app com/ dan klik pada pengaturan server pengaturan server temukan blok “email verifikasi” dan klik pada pengaturan pengaturan blok “email verifikasi” terlihat seperti ini 3\ klik pada verifikasi email pengguna verifikasi email pengguna ini ada di sini 4\ isi kolom yang kosong dan modifikasi yang sudah terisi sesuai dengan preferensi anda 5\ klik pada tombol simpan simpan 3 daftar dua atribut dasar dari parseuser parseuser kelas adalah username dan password ada atribut khusus ketiga yang juga harus anda atur, yaitu email untuk mengimplementasikan pendaftaran dengan verifikasi email, anda akan menggunakan metode yang sama seperti pendaftaran pengguna dasar tetapi kali ini, alih alih mengirim pengguna ke halaman beranda, anda akan meminta dia untuk memverifikasi emailnya untuk masuk setelah pembuatan pengguna selesai, ia secara otomatis ditambahkan ke parse dashboard dashboard dan atribut boolean emailverified diatur sebagai false pada titik ini, pengguna tidak boleh diizinkan untuk masuk ke platform anda setelah dia memverifikasi emailnya, dengan mengklik tautan yang dikirim ke kotak suratnya, boolean emailverified akan secara otomatis diatur menjadi true , memungkinkan dia untuk mengakses platform anda sepenuhnya untuk membuat signupactivity signupactivity berfungsi, ikuti langkah langkah ini tambahkan issigningup issigningup dan email email variabel ke login ts login ts untuk mengalihkan dan menahan input email login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; buat signup() signup() metode untuk mengirim alamat e mail ke user signup() user signup() fungsi login ts 1 signup() { 2 parse user signup(this username, this password, {email this email}) then((resp) => { 3 console log('signed up successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 this email = ''; 9 10 this toastctrl create({ 11 message 'account created successfully', 12 duration 2000 13 }) present(); 14 15 this issigningup = false; 16 }, err => { 17 console log('error signing in', err); 18 19 this toastctrl create({ 20 message err message, 21 duration 2000 22 }) present(); 23 }); 24 } sekarang, mari kita refleksikan perubahan tersebut ke tampilan login html login html dengan menambahkan ngif ngif untuk menampilkan/menyembunyikan elemen html kapan saja pengguna mendaftar ( issigningup sama dengan true ) atau masuk ( issigningup sama dengan false ) login html 1 2 e mail 3 4 5 6 7 8 sign up 9 10 11 12 sign in 13 14 15 16 17 18 sign up 19 20 4 masuk sekarang, mari kita tambahkan verifikasi boolean emailverified sebelum mengirim pengguna ke halaman beranda beranda catatan meskipun pengguna masuk saat fungsi parse user login() parse user login() dipanggil, dia/tidak dapat mengakses aplikasi sampai verifikasi e mail selesai juga, karena objek sesi dibuat di database saat memanggil login(), penting untuk memanggil parse user logout() parse user logout() setiap kali pengguna yang belum memverifikasi e mailnya mencoba mengakses aplikasi agar tidak meninggalkan sesi sesi yang terbuka sekarang, mari kita terapkan verifikasi emailverified untuk memutuskan apakah pengguna masuk atau mendapatkan peringatan bahwa e mail harus diverifikasi login ts 1 // parse dependencies 2 signin() { 3 parse user login(this username, this password) then((user) => { 4 console log('logged in successfully', user); 5 6 if(user get('emailverified')) { 7 // if you app has tabs, set root to tabspage 8 this navctrl setroot('homepage') 9 } else { 10 parse user logout() then((resp) => { 11 console log('logged out successfully', resp); 12 }, err => { 13 console log('error logging out', err); 14 }); 15 16 this alertctrl create({ 17 title 'e mail verification needed', 18 message 'your e mail address must be verified before logging in ', 19 buttons \['ok'] 20 }) present(); 21 } 22 }, err => { 23 console log('error logging in', err); 24 25 this toastctrl create({ 26 message err message, 27 duration 2000 28 }) present(); 29 }); 30 } 5 uji aplikasi anda uji aplikasi anda dengan menjalankan ionic serve ionic serve dan membuat beberapa pengguna, juga coba masuk setelah mendaftar tanpa memverifikasi email untuk melihat apakah kesalahan benar benar ditampilkan masuk di https //www back4app com/ temukan aplikasi anda dan klik dasbor dasbor > inti inti > peramban peramban > pengguna pengguna untuk melihat pengguna yang telah anda buat! selesai! pada tahap ini, anda dapat masuk, mendaftar atau keluar dari aplikasi anda menggunakan verifikasi email dengan fitur inti parse server melalui back4app!