Saturday, November 30, 2019

Membuat Login menggunakan Akun Google dengan Firebase dan Flutter

Login menggunakan akun Google dengan Flutter dan Firebase
Cara membuat Login dengan Google Menggunakan Flutter dan Firebase - Ketika kita membuat sebuah produk atau aplikasi fasilitas atau fitur untuk pendaftaraan (register) dan sign-in (login) adalah hal yang sangat wajib karena dengan fitur tersebut kita bisa membagi akses dan privasi dengan ruang lingkup pengguna masing-masing.

Pada aplikasi tradisional, pendaftaraan dan sign-in biasanya dilakukan secara kustom dengan mengisi data pengguna dari awal. Akan tetapi hal tersebut dinilai tidak efektif dan efisien, dimana hampir semua (calon) pengguna aplikasi / pengguna internet bisa dikatakan memiliki akun email atau sosial media seperti google (gmail), twitter, facebook, ataupun instagram.

Dengan demikian penggabungan fitur pendaftaraan (register) dan sign-in (login) menggunakan akun email atau media sosial yang sudah ada dinilai menjadi langkah yang terbaik untuk bisa menarik pengguna untuk melakukan pendaftaraan ke aplikasi yang kita buat. hal ini sangat wajar dikarenakan tidak semua pengguna mau membuat pendaftaraan akun dari awal untuk mengakses suatu aplikasi sehingga mereka akan memiliki banyak akun dan sulit untuk mengingatnya kembali.

Sebagai seorang developer tentu saja kita perlu mempelajari teknik integrasi register / login menggunakan akun meda sosial atau email yang ada. Pada kesempatan kali ini, saya akan memberikan contoh bagaimana cara membuat login aplikasi menggunakan akun Google dengan API Firebase dan Flutter.

Menggapa menggunakan Firebase?

Firebase dirancang oleh google sebagai BaaS (Backend-as-a-Service) dengan segudang fitur dan kemudahan yang mendukung integrasi login API dengan berbagai akun email seperti google, yahoo dan akun media-media sosial seperti facebook, dan twitter. Sehingga dengan library Firebase pada Flutter kita cukup menambahkan library-library dari masing-masing tipe akun dan kunci-kunci yang dibutuhkan dengan tanpa banyak perubahan kode. Hal ini tentu saja bisa menjadi alternatif yang sangat efektif, efisien, dan fleksibel.


Untuk itu silahkan simak langkah-langkah secara urut dan kode-kode berikut ini untuk Membuat Login menggunakan akun Google dengan Firebase dan Flutter.

1. Membuat Project pada Firebase

Membuat project pada Firebase adalah langkah pertama yang harus anda lakukan, caranya yaitu dengan login Firebase menggunakan akun Google anda, lalu pilih menu Add Project.
Menambahkan Project pada Firebase
Lalu isikan data pada input yang diminta sampai Project pada Firebase berhasil ditambahkan.

2. Menambahkan Aplikasi pada Project Firebase

Setelah kita berhasil menambahkan Project pada Firebase, langkah selanjutnya adalah menambahkan target Aplikasi pada Project Firebase yang kita buat tadi. Cara menambahkan Aplikasi pada Project Firebase adalah dengan cara memilih salah satu Project Firebase yang telah kita buat. Lalu akan muncul detail / dashboard project tersebut dan pilih tombol Add App seperti gambar dibawah ini:
Menambahkan Aplikasi pada Project Firebase
Setelah anda menekan tombol Add App secara default akan ada 4 pilihan lagi yang merupakan tipe Aplikasi dimana target aplikasi yang akan kita buat nantinya. Misalnya pada kasus ini kita akan membuat aplikasi Android, maka pilih ikon atau menu untuk tipe aplikasi Android. Lalu anda akan diminta untuk melakukan pengisian informasi terkait aplikasi anda tersebut.
Mengisi infromasi Android App
Isikan nama package sesuai nama package aplikasi androdi yang akan anda buat nanti, misalnya net.eduprog.eduprog_login_with_google. Lalu isikan App nickname sesuai kesukaan anda misalnya Eduprog Flutter, lalu biarkan isian SHA certificate fingerprints kosong untuk saat ini.
Setelah itu tekan tombol Register app untuk menuju langkah selanjutnya.

Download config file

Langkah selanjutnya adalah mengunduh file google-services.json untuk ditaruh pada folder android->app dalam projek Flutter anda nantinya.
Download config file google-services.json

3. Mengaktifkan Sign-in method

Setelah anda mendownload dan menyimpan file google-services.json berari anda telah menyelesaikan langkah Menambahkan Aplikasi pada Project Firebase, lalu langkah selanjutnya adalah mengaktifkan Sign-in method dengan cara memilih projek tersebut lalu pilih menu Authentication -> Sign-in method seperti pada gambar dibawah ini.
Sign-in method

Membuat Projek Flutter untuk Login dengan Akun Google

Setelah kita mempersiapkan semua konfigurasi projek Firebase pada langkah sebelumnya, saatnya kita mulai mengimplementasikan pembuatan kode atau projek Flutter untuk melakukan Login dengan Akun Google dengan Firebase.

1. Membuat Projek Flutter

Buatlah projek Flutter melalu Android Studio dengan nama package sama seperti yang anda buat saat mengatur projek Firebase pada langkah sebelumnya, misalnya "net.eduprog.eduprog_login_with_google".

2. Menambahkan Package

Tambahkan 2 library (package) pada file pubspec.yaml, yaitu firebase_auth dan google_sign_in seperti gambar dibawah ini:
File Package Flutter
Setelah anda menambahkan package, lakukan proses Packages get dengan menekan menu aplikasi Android Studio anda.

3. Membuat file-file Source Code

Setelah anda menambahkan package yang diperlukan untuk projek Flutter kita kali ini, saatnya untuk membuat file-file Source Code dengan struktu sebagai berikut ini:
  • main.dart (file utama)
  • util\screen_util.dart (file source untuk class bantuan screen)
  • page\login_page.dart (file source untuk halaman login)
Kode masing-masing file:

4. File google-services.json dan Konfigurasi SDK

Setelah anda menuliskan kode-kode seperti file di atas, langkah selanjutnya adalah melakukan menaruh file google-services.json pada folder [android\app] dan melakukan konfigurasi pada SDK untuk mengkompilasi APK melalui file-file berikut ini:

1. File: android\build.gradle
Tambahkan classpath 'com.google.gms:google-services:4.3.2' pada dependencies seperti gambar dibawah ini:
file build.gradle

2. File: android\app\build.gradle
Tambahkan kode apply plugin: 'com.google.gms.google-services' pada baris terakhir di file tersebut, seperti gambar dibawah ini:
file build.grade pada folder app

5. SHA certificate fingerprints

Tambahkan kode SHA-1 pada projek Firebase yang kita buat sebelumnya untuk versi debug / release agar aplikasi berjalan tanpa error saat kompile di virtual / physical device android yang kita gunakan untuk menjalankan aplikasi.

Bagaimana cara mendapatkan kode SHA-1 aplikasi kita?
Agar library firebase_auth dan google_sign_in dapat berjalan dengan baik setelah APK dikompile, maka anda perlu menambahkan fingerprint sertifikat kode SHA-1 yang bisa anda generate melalui Android Studio dengan cara membuka projek Flutter anda lalu buka salah satu file di folder android (misal file : build.gradle) lalu pilih menu Open for Editing in Android Studio.
Open for Editing in Android Studio

Lalu setelah projek terbuka di Android Studio, pilih menu khusus untuk gradle di pojok kanan atas, seperti pada gambar dibawah ini:
Menu Gradle

Setelah itu akan muncul beberapa menu yang memiliki sub menu masing-masing, untuk melakukan sign-in report, anda harus buka menu app->Tasks->android->signingReport seperti pada gambar dibawah ini:
Signing Report
Lalu lakukan double klik pada signingReport untuk memulai proses generate kode sertifikat untuk aplikasi APK anda. Jika proses signing berhasil, maka akan muncul kode-kode MD5, SHA-1, dan SHA-256 pada window tab Run seperti gambar dibawah ini :
Hasil signingReport
Lalu salin kode SHA-1 yang muncul pada proses signingReport seperti di atas, untuk anda masukan kedalam projek Firebase yang anda buat sebelumnya. Contohnya pada gambar diatas kode SHA-1 nya adalah FE:49:10:A9:F3:1E:54:F2:7D:88:14:45:E3:E6:95:68:7B:04:F3:3D.

6. Menambahkan kode SHA pada projek Firebase

Setelah anda melakukan signingReport pada langkah sebelumnya, saatnya melakukan langkah terakhir sebelum anda menjalankan projek Flutter ke virtual / physical device anda. Caranya adalah dengan cara membuka projek Firebase anda, lalu memilih konfig untuk aplikasi (type) android yang anda tambahkan pada langkah sebelumnya.

Tambahkan kode SHA-1 dari hasil signingReport kedalam projek Firebase tersebut,seperti gambar berikut ini:
Menambahkan SHA-1 di projek Firebase

7. Menjalankan projek Flutter ke Virtual Device

Setelah menyeleaikan semua langkah-langkah sebelumnya, sekarang anda bisa memulai mencoba hasil program / apliaksi mobile yang kita buat dari Flutter di atas.
Hasil aplikasi Android
Catatan:
Untuk kompilasi pada aplikasi iOS caranya lebih sederhana, tidak serumit seperti pada aplikasi android di atas.


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: