Login dengan Facebook di aplikasi Flutter [android] [ios]

Now Reading
Login dengan Facebook di aplikasi Flutter [android] [ios]

Kali ini kita akan belajar bagaimana cara login dengan menggunakan SDK dari Facebook sehingga pengguna tidak perlu melakukan registrasi dengan form panjang jika sudah memiliki Akun facebook untuk masuk ke dalam aplikasi kita.

 

– Android

Untuk membuat login dengan facebook, kita akan menggunakan salah satu library populer yang ada di dalam repositori flutter berikut ini

pub.dev/packages/flutter_facebook_login

1. Tambahkan dependensi library ke dalam pubspec.yaml

flutter_facebook_login: ^2.0.1

2. Lalu install dengan perintah

flutter pub get

3. Setelah itu kita menggunakan library tersebut dengan menggunakan import lib berikut

 

Persiapan untuk setup facebook SDK

4. Buat aplikasi baru untuk menambahkan App ID dari facebook melalui link berikut

https://developers.facebook.com/docs/facebook-login/android

 

 

 

 

5. Tambahkan sdk facebook login ke dalam build gradle android. Pilih sdk dengan menggunakan maven.
Pada build.gradle level project tambahkan repository

jcenter()

Lalu tambahkan dependensi facebook login ke dalam build.gradle level app

 

6. Setelah itu buka file /app/res/values/strings.xml atau buat file tersebut jika belum ada di folder res android. Lalu masukan app id facebook dan protocol scheme nya

 

7. Buka file manifest android di /app/manifest/AndroidManifest.xml. Lalu tambahkan permisi internet ke dalamnya

8. Tambahkan elemen meta-data ke dalam element application di android manifest.

 

9. Tambahkan package name aplikasi yang kamu buat beserta package MainActivity yang digunakan di dalam aplikasi. Lalu simpan

com.techatmosphere.petualangalam

com.techatmosphere.petualangalam.MainActivity

 

10. Terakhir generate development hash key untuk facebook sdk dengan menggunakan perintah berikut

dan jangan lupa masukan password android untuk debug key store.

Hash key yang digenerate di console tersebut, copy paste ke dalam key hashes facebook lalu simpan.

 

11. Kita mulai dengan versi android. Pertama kita buat sebuah screen sederhana dengan menggunakan statefull dan tombol login Facebook didalamnya.

 

 

 

 

 

 

 

12. Didalamnya kita sudah membuat fungsi untuk melakukan login dan logout menggunakan facebook sdk berikut

Dan berikut fungsi logout

 

– iOS

Selanjutnya kita akan setup untuk kebutuhan di ios

Persiapan untuk setup facebook SDK

1. Buat aplikasi baru di facebook sdk atau pilih dari yang telah dibuat

2. Skip langkah kedua di facebook sdk. “Set up Your Development Environment”
3. Tambahkan bundle identifier aplikasi “com.techatmosphere.petualangalams“. Lalu simpan
4. Lalu salin dict key facebook id di facebook sdk ke dalam info.plist di folder ios

 

5. And we are done. Its more simple right 🙂
Lalu run projek sehingga menampilkan tampilan berikut 🙂

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Kurang lebih begitu cara untuk menggunakan login dengan SDK Facebook. Contoh disini hanya tombol sederhana untuk menunjukan pergantian state antara sudah login atau belum saja. Kalian bisa berkreasi dengan berbagai macam tampilan dan UX yang lebih keren lagi :).

 

Happy creation. Happy coding 🙂

What's your reaction?
Love It
0%
Like It
33%
Want It
33%
Had It
33%
Hated It
0%
About The Author
Tech Atmosphere
Enjoy Tech