Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Firebase
Code

Memulai Penggunaan Firebase Authentication di iOS

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Firebase adalah platform database ponsel realtime multi-platform yang mengizinkan pengembang untuk fokus pada apa yang mereka lakukan dengan sangat baik — menulis kode aplikasi mereka — tanpa perlu mengkhawatirkan hal-hal DevOps seperti infrastruktur server dan database modeling. Dikembangkan oleh Google, Firebase menghilangkan kerumitan saat berhadapan dengan back-end real-time database, otentikasi pengguna, dan penggunaan aoffline synchronization workflows.

Meskipun masih terdapat banyak solusi lain untuk BaaS, seperti Realm (cek panduan Realm.io saya di Envato Tuts+) Firebase tidak membutuhkan konfigurasi server infrastruktur apapun sebelumnya, karena platform-nya akan mengurus hosting dan mengekspos SDK.

Melampaui sebuah NoSQL real-time database, dengan Firebase kamu akan mendapatkan analytics, crash-reposting, user authentication, cloud messaging, push notifications dan lainnya. Biaya yang terasosiasi juga tergantung proyekmu —seiring kamu berkembang, kamu bisa pindah dari model freemium ke model berbasis penggunaan.

Pada panduan ini, saya akan menunjukan cara mengatur Firebase di iOS menggunakan CocoaPods, dan cara mengotentikasi pengguna menggunakan dua metode populer: email dan password atau melalui ponsel dengan SMS.

Untuk mempelajari mengenai Firebase untuk Android, cek panduan kami yang lainnya di Envato Tuts+.

Aplikasi Firebase Pertamamu

Prasyaarat

Kamu akan membutuhkan hal-hal berikut:

Pengetahuan yang Diasumsikan Telah Dimiliki

Panduan ini mengasumsikan kamu memiliki pengetahuan mengenai iOS dan Swift, dan juga dasar-dasar dari CocoaPods. Jika kamu ingin belajar lebih lanjut, cek panduan Swift dan CocoaPods kami.

Tujuan dari Panduan Ini

Di akhir panduan ini, kamu akan menjalankan sebuah aplikasi sederhana yang ditenagai Firebase dan menggunakan Firebase SDK untuk mengotentikasi pengguna, baik menggunakan email dan password maupun SMS. Seiring itu, kamu akan belajar mengenai:

  1. Mengatur Firebase dengan CocoaPods
  2. Mengatur App Delegate agar terhubung ke Firebase
  3. Mengatur penyediaan hak untuk pesan otentikasi pengguna
  4. Menggunakan FirebaseUI untuk mengotentikasi pengguna dengan mudah

Di panduan berikutnya dari seri ini, kamu akan belajar cara bekerja dengan aspek lainnya dari platform Firebase, seperti menggunakan real-time database untuk menyimpan data aplikasi.

Mempersiapkan Proyek-nya

Pada panduan ini, kita akan membuat sebuah to-do app bernama FirebaseDo. Mari mulai dengan mengklon proyek-nya dari GitHub:

Selanjutnya kita akan menginisialisasi proyek-nya untuk membuat sebuah PodFile baru sebagai berikut:

pod init

Kamu seharusnya melihat sebuah berkas baru bernama Podfile di direktori akar proyekmu. Berkas ini pada dasarnya mengatur pustaka-pustaka yang ingin kita gunakan dalam proyek kita. Buka dan tambahakan baris-baris deklarasi Firebase berikut:

Simpan lalu masukkan yang berikut ini ke terminal-mu untuk membuat pods-nya:

pod install

Kita akan menggunakan FirebaseDo.xcworkspace ketimbang FirebaseDo.xccodeproj, yang mengizinkan kita untuk bekerja dengan dependency libraries yang kita atur di CocoaPods, jadi lanjutkan dan buka workspace-nya lalu berpindahlah ke browser-mu.

Sekarang pergi ke Firebase panel dan buat sebuah proyek baru:

Creating a new project in Firebase

Selanjutnya, klik Add Firebase to your iOS app yang nanti-nya kita akan selami tahap demi tahap dari proses mendaftarkian aplikasi-mu ke Firebase.

Adding Firebase to your iOS app

Pada beberapa titik, dia akan menginstruksimu untuk menambahkan berkas GoogleService-info.plist ke proyek Xcode-mu:

 Adding GoogleService plist file to your iOS project

Kamu telah menambahkan pustaka-nya melalui CocoaPods sehingga kamu bisa melewatkan sisa instruksi-nya dan kembali ke konsol Firebase.

Mengontentikasi Pengguna

Otentikasi Firebase menyediakan jasa-jasa backend, SDK yang mudah digunakan, dan pustaka antarmuka yang telah terbuat untuk mengotentikasikan pengguna ke aplikasimu. Dia mendukung otentikasi menggunakan password, nomor telepon, penyedia identitas federasi terkenal seperti Google, Facebook dan Twitter, dan lainnya. (sumber: Firebase Authentication)

Sebelum kami demonstrasikan cara menggunakan FirebaseUI untuk mengotomatisasikan otentikasi penggunamu, kita akan menjelajahi terlebih dahulu metode-metode SDK yang Firebase ekspos sebagai bagian dari FirebaseAuth Framework Reference API untuk menangani pembuatan dan sign-in dari pengguna secara manual.

Pendaftaran, dan Keluar-Masuk Pengguna

Untuk membuat pengguna kamu, kamu menggunakan blok metode Auth.auth().createUser() sebagai berikut:

Menganggap objek error-nya kosong, pengguna tidak hanya akan terdaftar namun juga akan masuk. Untuk memasukkan sebuah pengguna yang telah ada secara eksplisit, kamu bisa memanggil:

Mengeluarkan seorang pengguna semudah memanggil try!FirebaseAuth.signOut():

Kita ingin bisa menangani aneka error potensial dengan baik, seperti dalam kasus pemangillan otentikasinya tersasar, dan saat objek error-nya tidak kosong (atau sebaliknya, objek user-nya kosong). Dalam kasus-kasus tersebut error telah terjadi. Lihat Firebase Documentation untuk mendapatkan daftar dari kode-kode error yang umum. Dalam kode kita, kita hanya perlu menangani beberapa error umum.

Mengatur Perubahan Keadaan Otentikasi

Dalam siklus hidup aplikasimu, keadaan (state) otentikasi-nya akan berubah sehingga kemampuan untuk mendeteksi saat pengguna telah terotentikasi atau sebauh sesi telah kadaluarsa penting untuk memastikan pengguna tidak memiliki akses ke bagian dari aplikasi-mu yang seharusnya tidak bisa diakses.

Dengan membuat sebuah handle .addStateDidChangeListener, kamu sekarang bisa mendeteksi keadaan pengguna-nya dan memicu panggilan tertentu berdasarkan itu.

Mengatur Pengguna

Setelah penggunanya telah terotentikasi, kamu bisa mengakses objek user dan mendapatkan informasi user seperti User ID, alamat email, dan foto avatar (jika ada). Metode berikut juga akan menyatakan bahwa pengguna-nya saat ini benar-benar terotentikasi dengan objek user yang tidak kosong:

Mengirim Email ke Pengguna

Firebase menyediakan dukungan baik untuk mengrim email verifications maupun email permintaan password reset.

Pengguna Anonymous

Firebase juga memiliki cara untuk mengatur alur kerja otentikasi anonymous yang pada intinya adalah sbeuah pengguna sementara yang bisa digunakan untuk mengotentikasi pengguna dan menyediakan mereka akses terbatas. Ide-nya ada pada beberapa saat, pengguna anonymous bisa memilih untuk mendaftar dan Firebase bisa menyediakan kredensial untuk masuk tanpa kehilangan yang telah ada selama keadaan anonymous mereka. Untuk membuat masuk pengguna anonymous, kamu bisa memanggil:

Untuk mentransisikan penggunakan dari akun anonymous ke pengguna terotentikasi (menggunakan email dan password), kamu bisa memanggil metode berikut dalam view controller layar registrasi, meminta email dan password-nya, dan memangil metode user.link().

Firebase juga mendukung metode-metode untuk mekanisme-mekanisme otentikasi terfederasi lainnya.

Dan kamu memilikinya —kita telah mendalami metode-metode API penting yang Firebase sediakan untuk menangani dan mengotentikasi pengguna. Meskipun kode yang saya tunjukkan padamu tidaklah rumit sama sekali. Firebase bahkan membuatnya menjadi lebih mudah dari ini, dengan dikenalkannya FirebaseUI. Di tengah kedua panduan ini, kita akan menambahkan otentikasi ke sampel aplikasi to-do kita:

Mengimplementasikan FirebaseUI

FirebaseUI menyediakan sebuah solusi otentikasi drop-in yang menangani alur antarmuka untuk memasukkan pengguna dengan email dan password, nomor telepon, dan penyedia identetas federasi terkenal termasuk Google Sign-In dan Facebook Login.

Selanjtunya, kita akan mendemonstrasikan cara mengimplementasikan otentikasi menggunakan FirebaseUI.

Dalam Firebase Console, pergi ke tab Authentication dan aktifkan mode-mode otentikasi berikut:

  • Email/Password
  • Phone
Adding EmailPassword and Phone support to app

Kita baru saja melihat cara mengatur dan mengotentikasi pengguna secara manual menggunakan SDK Firebase yang tersedia, Sekarang kita akan melihat cara membiarkan FirebaseUI melakukan semua-nya untuk ita. Dalam HomeViewController.swift, impor pustaka-pustaka berikut:

Dalam deklarasi UIViewController.swift, tambahkan FUIAuthDelegate.

Di bawah class deklarasi ini, kita akan mendeklarasikan tiga private variables yang akan kita gunakan. Ini akan menginzinkan kita mereferensikan objek otentikasi saat ini, instance AuthUI, dan authentication listeners kita:

Selanjtunya, mari hubungkan View Controller kita sehingga ketika dia memuat untuk pertama kalinya, kita menarik sebuah listener untuk mendeteksi saat keadaan otentikasinya berubah menggunakan sebuah handler. Ketika keadaan otentikasinya berubah, kita akan memanggil metode self.loginAction(sender: self) untuk membawa FirebaseUI authentication controller kita.

Dalam metode ini, kita juga mencotohkan private variables yang telah kita deklarasikan sebelumnya, atur delgate authUI ke class kita sendiri, dan terakhir atur daftar dari provider lain yang akan kita dukung, yang dalam kasus kita adalah FUIPhoneAuth.

Jika ingin mendukung Google, Facebook, dan layanan pihak ketiga lainnya, kita bisa menambhakan mereka ke daftar. Ingat juga, kita tidak perlu secara eksplisit menambahkan email dan password karena dia implisit dan telah diaktifkan dari konsol Firebase.

Menampilkan Login UI-nya

Selanjutnya kita tangani metode loginAction() yang akan dipanggil ketika event listener menemukan bahwa pengguna-nya saat ini tidak terotentikasi. Yang perlu kita lakukan dalam kasus ini adalah menghadirkan modal FirebaseUI authUI.authviewController dan dia akan memasukkan provider otentikasi yang telah kita deklarasikan sebelumnya.

Inilah saat sihirnya terjadi, ketika FirebaseUI menangani semuanya: menanyakan penggunanya untuk memasukkan alamat emailnya, menentukan apakah penggunanyaada (dalam kasus tersebut penggunanya akan ditanyakan password-nya) atau untuk pengguna baru, mengoleksi nama dan membuat sebuah password.

Jika kita mengimplementasikan metode-metode otentikasi secara manual, kita harus menangani aneka skenario tersebut, termasuk reset email, password, dan lainnya.

Menangani Perubahan Keadaan Otentikasi

Terkahir, kita mengimplementasikan protokol yang diperlukan untuk delegate FIRAuthUIDelegate kita yang akan mengizinkan kita untuk mendengarkan dan menangani keadaan otentikasi. Metode ini hanya akan diproses jika sebuah error benar-benar terjadi, walaupun bahkan kita bisa menangani otentikasi-otentikasi yang sukses.

Pengaturan Otentikasi Telepon

Sebelum kita mencoba aplikasinya, kita perlu menambahkan beberapa tahap lagi agar bisa menangani otentikasi berbasis telepon. Otentikasi telepon mengizinkan pengguna untuk memasukkan nomor telepon mereka, dan memverifikasi identitas mereka melalui sebuah pesan yang berisi kode sekali pakai.

Untuk mendapatkan token APN yang dibutuhkan pleh server Firebase, implementasikan hal berikut ke berkas AppDelegate.swift:

Karena kit telah mengaktifkan sign-in melalui nomor telepon di konsol Firebase, tugas kita yang selanjutnya adalah membuat FirebaseDo menerima APNs dari Firebase, sebuah tugas yang pada umumnya juga akan kamu lakukan jika kamu ingin mendukung push notification ke perangkat untuk memverifikasi permintaan masuk melalui nomor telepon.

Kamu tidak akan bisa mengetes metode otentikasi ini melalui simulator Xcode, kamu harus menghubungkan iPhone-mu untuk memasang dan menjalankan aplikasinya.

Di Xcode, pergi ke capabilities dan nyalakan Push Notifications. Aplikasi-nya akan secara otomoatis menyediakan dan membuat sebuah berkas FirebaseDo.entitlements seperti yang ditampilkan dalam project navigator.

Adding Push Notifications in Xcode

Selanjutnya, jika akan membuat sebuah Apple Push Notification Authentication Key untuk diunggah ke Firebase. Dalam Apple Developer Portal, di bawah Keys, ini nama proyekmu, pastikan untuk mencentenang APNs. Unduh semua berkas .p8 yang dihasilkan dan catat key ID-nya karena kita harus memasukkannya sesaat lagi.

Creating a new Key in the Developer Portal

Kembali ke konsol Firebase, di bawah Project Setting (ikon gerigi), pilih tab Cloud Messaging. Di bawah iOS App Configuration dan APNs Authentication Key, pilih tombol Upload dan unggah semua berkas .p8 bersama dengan key ID dan app ID. Layar pengaturan yang dihasilkan harusnya seperti berikut ini:

Adding APNs key in Firebase

Mengetes Aplikasinya

Dan itulah — kita tidak perlu menambahkan terlaku banyak kode tambahan ke aplikasi kita untuk mengatur alur kerja pendaftaran dan otentikasi masuk yang lengkap. Mari buat dan jalankan aplikasinya di Xcode untuk melihat aksi dari FirebaseUI. Saat pertma kamu menjalankan aplikasinya, kamu tidak akan terotentikasi sehingga kamu akan mendapat template generik dengan pilihan otentikasi yang telah kamu pilih di konsol Firebase.

Modal FirebaseUI authentication screen

Ini terlihat sedikit hambar, tapi kamu bisa mengostumisasi hampir tiap aspek dari template-nya.

Email sign-in prompt in FirebaseUI

Memasukkan sebuah alamat email pengguna baru akan menghadirkan layar Create Account, menanyakan nama da password-mu.

Firebase UI authentication determining the user is new prompting for the rest of the information

Menyelesaikan formulir ini akan mendaftarkanmu sebagai pengguna baru (meskpun aplikasinya hanya akan menampilkan sebuah layar kosong). Untuk mengonfirmasi sebuah pengguna baru telah dibuat, kamu bisa pergi ke Authentication > Users di konsol Firebase-mu.

Tes tiap metode otentikasi, ingat bahwa kamu harus log-out untuk bisa memicu perintah otentikasi kembali. Picu kembali otentikasi dengan menambahkan kode berikut pada baris pertama viewDidLoad() setelah semua super call-nya:

Ini akan memaksa aplikasinya kembali ke keadaan awal sehingga kamu bisa mengetes otentikasi melalui SMS. Jalankan aplikasinya lagi, kali ini pilih Sign in With Phone.

Kesimpulan

Dalam panduan ini, kamu tmendapatkan pengantar untuk menggunakan Firebase sebagai sebuah platform back-end untuk aplikasimu, dan kamu telah melihat cara mengotentikasi pengguna menggunakan kombinasi email dan password, maupun menggunakan telepon dan SMS, sebuah pendekatan yang dipopulerkan aplikasi-aplikasi seperti WhatsApp.

Lalu kita mulai membangun aplikasi FirebseD sederhana kita, dan meskipun dia belum memiliki fungsi pengingat sungguhan apapun, kita akan mulai mengerjakannya di panduan berikutnya. Namun, hanya dengan beberapa baris saja kita telah berhasil untuk menyelesaikan ha;-hal berikut:

  • mengintegrasikan Firebase untuk mengatur mekanisme otentikasi dengan email dan password
  • menambahkan kemampuan otentikasi melalui SMS
  • melacak keadaan otentikasi
  • menangani error dengan baik

Di sisa seri ini, kita akan melihat komponen-komponen lain dari Firebase.

Dan selagi kamu di sini, pastikan untuk mengecek kiriman kami yang lainnya mengenai pengembangan aplikasi iOS!

Advertisement
Advertisement
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.