Penerapan Verifikasi Email di Ionic Framework

10 mnt

pendaftaran pengguna dengan verifikasi email pendahuluan bagian ini menjelaskan bagaimana anda dapat membuat aplikasi dengan pendaftaran pengguna dan verifikasi email menggunakan fitur inti parse server 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 repositori github https //github com/back4app/ionic email verification prasyarat untuk menyelesaikan quickstart ini, anda memerlukan visual studio code https //code visualstudio com/download (atau ide web apa pun yang anda suka) ionic framework https //ionicframework com/getting started/ sebuah aplikasi yang dibuat di back4app ikuti tutorial aplikasi parse baru https //www back4app com/docs/get started/new parse app untuk belajar cara membuat aplikasi parse di back4app mengikuti pendaftaran pengguna 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 pendaftaran pengguna https //www back4app com/docs/ionic/ionic framework login screen sebelumnya 2 aktifkan verifikasi email pergi ke aplikasi anda di situs web back4app https //www back4app com/ dan klik pada \pengaturan server\ temukan blok “email verifikasi” dan klik pada \pengaturan\ blok “email verifikasi” terlihat seperti ini 3\ klik pada \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\ 3 daftar dua atribut dasar dari \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\ 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\ berfungsi, ikuti langkah langkah ini tambahkan \issigningup\ dan \email\ variabel ke \login ts\ untuk mengalihkan dan menahan input email login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; buat \signup()\ metode untuk mengirim alamat e mail ke \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 \ dengan menambahkan \ 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\ catatan meskipun pengguna masuk saat fungsi \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()\ setiap kali pengguna yang belum memverifikasi e mailnya mencoba mengakses aplikasi agar tidak meninggalkan \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\ dan membuat beberapa pengguna, juga coba masuk setelah mendaftar tanpa memverifikasi email untuk melihat apakah kesalahan benar benar ditampilkan masuk di situs web back4app https //www back4app com/ temukan aplikasi anda dan klik \dasbor\ > \inti\ > \peramban\ > \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!