Advertisement
  1. Code
  2. Ionic
Code

Memulai Dengan Ionic Service: Auth

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Salah satu kekuatan Ionic adalah pada layanan yang ditawarkannya selain frameworknya. Termasuk di sini adalah layanan untuk mengautentikasi pengguna aplikasi Anda, push notification, dan analitis. Dalam seri ini, kita akan belajar tentang tiga layanan tersebutdengan membuat aplikasi yang memanfaatkan kesemuanya.

Layanan pertama yang akan kita lihat adalah Auth service. Layanan ini memungkinkan implementasi autentikasi di aplikasi Ionic tanpa menulis kode back-end satu baris pun. Atau, jika Anda sudah memiliki sistem autentikasi yang sudah ada, Anda juga bisa menggunakannya. Layanan tersebut mendukung metode autentikasi berikut:

  • Email/Password: pengguna diregistrasi dengan menyediakan email dan kata sandi.
  • Social Login: pengguna diregistrasi dengan menggunakan profil media sosialnya. Termasuk di sini adalah Facebook, Google, Twitter, Instagram, LinkedIn, dan GitHub.
  • Custom: pengguna diregistrasi dengan memanfaatkan sistem autentikasi yang sudah ada.

Dalam tutorial ini, kita hanya akan membahas email/kata sandi dan social login dengan Facebook.

Yang Akan Anda Buat

Sebelum melanjutkan, sebaiknya Anda selalu memiliki ide umum tentang apa yang akan dibuat dan seperti apa alur aplikasinya. Aplikasi ini akan memiliki beberapa halaman berikut:

  • halaman beranda
  • halaman daftar (signup)
  • halaman pengguna

Halaman Beranda

Halaman beranda adalah halaman default aplikasi yang pengguna bisa masuk dengan email/password akun Facebook mereka.

home page

Apabila pengguna mengklik tombol Login with Facebook, akan tampil layar yang serupa dengan di bawah ini, dan begitu pengguna menyetujui, mereka akan masuk ke dalam aplikasinya:

Facebook login

Halaman Daftar

Halaman daftar adalah tempat pengguna bisa registrasi dengan memasukkan email dan kata sandinya. Login Facebook tidak mensyaratkan pendaftaran (signup) karena informasi pengguna dipasok oleh Facebook API.

Signup page

Halaman Pengguna

Halaman akhir adalah halaman pengguna, yang hanya bisa dilihat ketika pengguna sudah masuk.

Bootstrap Aplikasi Baru Ionic

Sekarang Anda tahu apa yang sedang dibuat, mari mulai membangun aplikasinya!

Pertama, kita bootstrap aplikasi ionic baru dengan menggunakan templat blank starter:

Jelajahi isi folder authApp yang baru dibuat. Folder ini berperan sebagai root directory proyeknya.

Untuk melakukan pengaturan awal UI aplikasi dengan cepat, saya membuat GitHub repo yang di situ Anda bisa menemukan file-file sumber untuk starter. Unduh reponya, jelajahi isi folder starter, dan salin folder src ke root proyek Ionic yang baru saja Anda buat. Ini berisi templat file untuk tiap halaman aplikasi. Akan saya jelaskan pada Anda secara lebih detail apa yang dilakukan tiap filenya di bagian selanjutnya.

Jalankan proyeknya supaya Anda bisa langsung melihat perubahan sambil mengembangkan aplikasinya:

Membuat Akun Ionic

Karena kita akan menggunakan back-end Ionic untuk menangani autentikasi pengguna, dibutuhkan cara untuk mengelola para pengguna aplikasinya. Di sinilah kegunaan akun Ionic. Akun akan mengizinkan Anda untuk mengelola aplikasi Ionic Anda dan layanan-layanan yang digunakannya. Termasuk juga adalah layanan Auth. Anda bisa membuat akun Ionic dengan mengunjungi halaman signup Ionic.

Hubungkan Aplikasinya ke Layanan Ionic

Berikutnya, jelajahi direktori root dan pasang plugin Ionic Cloud:

Plugin ini akan memungkinkan aplikasi Anda berinteraksi dengan mudah dengan layanan-layanan Ionic:

Setelah itu Anda bisa menginisialisasi aplikasinya untuk menggunakan layanan-layanan Ionic:

Selanjutnya Anda diarahkan untuk masuk dengan akun Ionic Anda. Begitu Anda memasukkan detail login yang benar, alat command-line akan secara otomatis membuat rekaman aplikasi baru di bawah akun Ionic Anda. Rekaman ini disambungkan ke aplikasi yang sedang Anda kembangkan.

Anda bisa memverifikasi bahwa langkah ini sudah berjalan dengan membuka file .io-config.json dan ionic.config.json di root proyek Anda. app_id-nya seharusnyaa sama dengan ID aplikasi yang diberikan ke aplikasi yang baru dibuat di dasbor Ionic Anda.

Halaman Beranda

Jelajahi isi direktori src/pages/home untuk melihat file-file untuk halaman berandanya. Buka file home.html dan Anda akan melihat yang berikut ini:

Halaman ini akan meminta pengguna email dan kata sandinya atau masuk dengan akun Facebook mereka. Jika pengguna belum punya akun mereka bisa mengklik tombol signup untuk mengakses halaman pendaftaran.  Kita akan membahas hal-hal spesifik tentang halaman ini lebih lanjut ketika memasuki bagian login. Saya sekeder menunjukkannya pada Anda supaya Anda bisa melihat kode untuk navigasi halaman signup.

Berikutnya, buka file home.ts. Untuk sat ini, isinya hanya beberapa kode boilerplate untuk menavigasi halaman signup dan user. Berikutnya, kita akan kembali ke halaman ini dan menambahkan kode untuk memasukkan pengguna

User Sign Up

Tata letak halaman signup ada di src/pages/signup-page/signup-page.html. Lihat file ini dan Anda akan menemukan formulir sederhana dengan isian email dan isian kata sandi.

Berikutnya, mari kita lihat file signup-page.ts.

Mari mengurai proses ini. Pertama, file ini mengimpor controller untuk membuat tanda dan pemuat (loader):

Selanjutnya mengimpor kelas-kelas yang dibutuhkan dari Cloud Client:

  • Layanan Auth yang berurusan dengan pendaftaran penguna, login (masuk), dan sign-out (keluar).
  • UserDetails adalah tipe yang digunakan untuk menetapkan detail pengguna ketika mendaftarkan atau memasukkan pengguna.
  • IDetailedError digunakan untuk menentukan alasan pasti kesalahan yang terjadi. Ini memungkinkan kita memberikan pesan kesalahan yang ramah pengguna bagi pengguna ketika terjadi kesalahan.

Deklarasikan variabel yang akan digunakan untuk menyimpan email dan kata sandi yang dimasukkan oleh pengguna. Ini harus sama dengan nama yang Anda berikan untuk atribut value dan ngModel di file tata letak.

Berikutnya adalah metode register, yang dipanggil ketika tombol Register ditekan. Mari menulis kode metode ini bersama-sama.

Pertama, metode ini akan menambakkan suatu loader dan membuatnya otomatis menutup setelah lima detik (jadi apabila terjadi kesalahan, pengguna tidak akan melihat animasi yang berputar selamanya).

Berikutnya, mari membuat objek untuk menyimpan detail pengguna:

Terakhir, kita memanggil metode signup() dari layanan Auth dan memasok detail pengguna sebagai argumennya. Ini akan kembali sebagai promise, yang kita unwrap dengan then(). Begitu diterima suatu respon yang sukses dari back-end, fungsi pertama yang Anda masukan ke then() akan dieksekusi; jika tidak maka fungsi kedua yang akan dieksekusi.

Jika diterima respon kesalahan dari Ionic Auth, kita akan memutar balik (loop) ke array kesalahan dan mengonstruksi pesan kesalahan berdasarkan jenis kesalahan yang diterima. Berikut adalah daftar kesalahan signup Auth yang mungkin terjadi.

Begitu ini selesai, Anda bisa mencoba aplikasinya di peramban Anda. Email/kata sandi untuk masuk tidak punya plugin atau dependensi perangkat keras, jadi Anda harus bisa mengujinya di peramban. Selanjutnya Anda bisa menemukan pengguna yang baru mendaftar di tab Auth atau dasbor aplikasi Ionic Anda.

Pengaturan Aplikasi Facebook

Langkah berikutnya adalah pengaturan awal aplikasi yang bisa menangani login native Facebook. Mula-mula, Anda harus membuat suatu aplikasi Facebook. Anda bisa melakukannya dengan masuk ke akun Facebook Anda dan kemudian membuka Facebok Developer Site. Dari sana, buat aplikasi baru.

Create Facebook App

Begitu aplikasinya selesai dibuat, klik tautan Add Product di sidebar dan pilih Facebook Login. Ini akan secara default membuka layar Quickstart. Kita tidak benar membutuhkannya saat ini, jadi lanjutkan dan klik tautan Settings di bawah Facebook Login. Tampilan di layar seharusnya seperti ini:

Facebook Settings

Di sini Anda harus mengaktifkan pengaturan Embeded Browser OAuth Login dan menambahkan https://api.ionic.io/auth/integrations/facebook sebagai nilai untuk Valid OAuth redirect URIs. Simpan perubahannya jika telah selesai.

Berikutnya, Anda harus menghubungkan Ionic Auth ke aplikasi Facebook yang baru saja dibuat. Buka dasbor Ionic Anda dan pilih aplikasi yang dibuat sebelumnya (lihat bagian "Menghubungkan Aplikasi ke Ionic Services"). Klik tab Settings dan kemudian User Auth. Di bawah Social Providers, klik tombol Setup di sebelah Facebook:

Ionic app settings social providers

Masukkan App ID dan App Secret-nya aplikasi Facebook yang Anda buat sebelumnya dan tekan Enable.

Pasang Plugin Facebook

Berikutnya, pasang plugin Facebook atau Cordova. Tidak seperti sebagian besar plugin, yang ini mensyaratkan Anda untuk memasukkan sedikit informasi: Facebook App ID dan nama aplikasi. Anda bisa menyalin informasi itu dari dasbor aplikasi Facebook.

Konfigurasi Layanan Facebook

Begitu langkah tersebut selesai, hal terakhir yang Anda harus lakukan adalah kembali ke proyek Anda, membuka file src/app/app.module.ts, dan menambahkan layanan CloudSettings serta CloudModule dari paket cloud-angular:

Deklarasikan objek cloudSetings. Ini berisi app_id aplikasi Ionic Anda dan izin-izin tambahan (scope) yang Anda ingin minta dari pengguna aplikasi Anda. Secara default, objek ini telah meminta email dan public_profile.

Jika Anda ingin meminta lebih banyak data dari pengguna Anda, ada sekumpulan izin di halaman ini: Facebook Login Permissions.

Sekarang, beritahu Ionic tentang cloudSettings yang baru saja Anda tambahkan:

Selanjutnya, ketika Anda menambahkan penyedia sosial lainnya ke aplikasi Anda, akan ada proses yang serupa.

Memasukkan Pengguna

Sekarang saatnya kembali ke halaman beranda dan melakukan sejumlah perubahan. Templat HTML-nya telah memiliki semua yang dibutuhkan, jadi kita hanya butuh memperbarui skripnya. Lanjutkan dan buka file src/pages/home/home.ts. Di bagian atas file, impor kode berikut ke yang sudah Anda miliki sebelumnya:

Di dalam konstruktor, tentukan apakah pengguna sudah masuk atau tidak. Jika pengguna sudah masuk, kita bisa secara otomatis menavigasinya ke Halaman Pengguna (User Page).

Berikutnya, apabila tombol Login ditekan, kita akan mulai dengan menampilkan animasi pemuatan.

Sebagaimana Anda lihat sebelumnya pada file src/pages/home/home.html, suatu string yang merepresentasikan tombol login mana yang ditekan (apakah tombol login email/kata sandi atau tombol login Facebook) yang dimasukkan ke fungsi login(). Hal itu memungkinkan untuk menentukan kode login mana yang dieksekusi. Jika tipenya 'fb' berarti tombol login Facebook ditekan, sehingga kita memanggil metode login() layanan FacebookAuth.

Jika yang ditekan adalah tombol login email/kata sandi, maka kita harus memasukkan pengguna dengan detail yang dimasukan pada formulir login.

Lihat versi akhir file home.ts untuk melihat bagaimana seharusnya tampilan keseluruhannya.

Halaman Pengguna

Halaman terakhir adalah halaman pengguna.

Tata letaknya, di file src/pages/user-page/user-page.html, menampilkan foto profil pengguna dan nama penggunanya. Jika pengguna mendaftar dengan email/kata sandi, nama penggunanya adalah alamat email pengguna dan foto profilnya adalah foto profil default yang diberikan oleh Ionic: Sedangkan apabila pengguna mendaftar dengan Facebook, foto profilnya adalah foro profil Facebook dan nama penggunanya adalah nama lengkap mereka.

Berikutnya, lihat file user-page.ts.

Di bawah paket ionic-angular, kita mengimpor layanan Platform selain NavControler. Ini digunakan untuk mendapatkan informasi tentang perangkat yang sedang dipakai. Paket ini juga memiliki metode untuk mendengarkan even perangkat keras seperti ketika tombol kembali di perangkat keras Android ditekan.

Dan untuk paket cloud-angular, kita membutuhkan layanan Auth, FacebookAuth, dan User:

Di dalam konstruktor kelas, tentukan apakah pengguna masuk dengan email/kata sandi pengguna atau akun Facebooknya. Masukkan username dan photo berdasarkan itu. Kemudian, di bawahnya, berikan fungsi yang akan dieksekusi apabila tombol kembali (back) di perangkat keras ditekan. registerBackButtonAction() menerima dua argumen: fungsi yang akan dieksekusi dan prioritasnya. Jika adalah lebih dari satu yang semacam ini di aplikasi, hanya prioritas tertinggi yang akan dieksekusi. Tetapi karena kita hanya membutuhkan ini di layar, kita akan memasukkan 1.

Metode logoutUser() mengandung logika untuk mengeluarkan pengguna. Hal pertama yang dilakukannya adalah menentukan apakah pengguna sungguh-sungguh masuk. Jika seorang pengguna masuk, kita akan menentukan apakah penggunanya adalah pengguna Facebook atau pengguna email/kata sandi.

Ini bisa dilakukan dengan mengecek properti email di bawah objek user.details. Jika propertinya ada, berarti penggunanya adalah pengguna email/kata sandi. Jika selain itu, asumsinya itu adalah pengguna Facebook. Memanggil metode logout() di Auth dan FacebookAuth akan membersihkan pengguna aplikasi saat ini.

Menjalankan Aplikasi di Suatu Perangkat

Sekarang kita akan mencoba aplikasinya! Pertama, atur platform dan buat debug.apk-nya.

Supaya Facebook Login bekerja, Anda harus memasukkan tanda file apk aplikasi Facebook. Anda bisa menentukan tandanya dengan mengeksekusi perintah berikut:

Selanjutnya, buka pengaturan dasar aplikasi Facebook Anda dan klik tombol Add Platform di bagian dasar layar. Pilih Android sebagai platformnya. Anda akan melihat formulir berikut:

Android platform settings

Isi Goole Play Package Name dan Key Hashes. Anda bisa menempatkan apa saja sebagai nilai untuk Google Play Package Name selama mengikuti format yang sama dengan aplikasi di Google Play (misalnya com.ionicframework.authapp316678). Untuk Key Hashes, Anda harus meletakkan hash yang dikembalikan sebelumnya. Jangan lupa menekan Save Changes apabila selesai.

Begitu selesai, Anda bisa menyalin android-debug.apk dari folder platforms/android/build/outputs/apk ke perangkat Anda, pasang dan kemudian jalankan.

Kesimpulan dan Langkah Berikutnya

Nah selesai! Dalam tutorial ini Anda telah belajar bagaimana memanfaatkan layanan Ionic Auth untuk dengan mudah mengimplementasikan autentikasi ke aplikasi Ionic Anda. Kita telah menggunakan autentikasi login email/kata sandi dan Facebook dalam tutorial ini, tetapi ada opsi-opsi lainnya, dan semestinya mudah bagi Anda untuk menambahkannya ke aplikasinya.

Berikut adalah beberapa langkah yang bisa Anda coba sendiri, yang akan membawa aplikasi Anda selangkah lebih maju.

  • Menyimpan informasi tambahan tentang pengguna—selain email dan kata sandi, Anda juga bisa menyimpan informasi tambahan untuk para pengguna Anda.
  • Menggunakan penyedia login sosial lainnya—sebagaimana disebutkan di awal artikel, Anda juga bisa mengimplementasikan login sosial dengan layanan berikut: Google, Twitter, Instagram, LinkedIn, dan GitHub.
  • Menambahkan fungsionalitas reset kata sandireset kata sandi bisa diimplementasikan dengan menggunakan formulir reset kata sandi, atau Anda bisa membuat formulir Anda sendiri.
  • Autentikasi sesuaian (custom)—jika Anda telah menggunakan back-end yang ada untuk menangani autentiikasi pengguna untuk layanan Anda, kemungkin Anda harus menerapkan autentikasi sesuaian.

Demikian untuk saat ini. Tetaplah bersama kami untuk lebih banyak artikel tentang menggunakan layanan-layanan Ionic! Dan untuk sementara waktu, silakan cek beberapa kiriman hebat kami tentang pengembangan aplikasi selular lintas platform.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.