Wednesday, December 13, 2017

[Tutorial] Login With Facebook User Detail

December 13, 2017 0 Comments
Assalamualaikum Warahmatullah... Halo temen-temen... balik lagi bersama saya Ramadhany si programmer ganteng... HeHeHe.. Nah guys kali ini saya akan membagi tutorial tentang "Login With Facebook User Detail". Sekarang-sekarang ini banyak aplikasi yang penggunanya untuk membuat akun pada aplikasi tersebut. Ada banyak cara yang dapat digunakan untuk membuat akun (yang disediakan aplikasi), antara lain : Menggunakan email, Facebook, Google, Yahoo, Dll



Pada umumnya para programmer menggunakan akun Facebook dan Google untuk membuat akun, selain menggunakan email.

Informasi di ambil dari Google dan Facebook pada umumnya adalah nama, email, photo profile dan informasi public lainnya.

Pada kesempatan kali ini saya akan membuat aplikasi login dengan menggunakan akun facebook. Kalian bisa membuatnya juga, keren kan? Tunggu apa lagi? Langsung saja ikuti Tutorial saya berikut ini

Pertama

Untuk dapat mengintegrasikan aplikasi yang teman-teman buat dengan facebok, pertama harus meng-genarated APP ID. Untuk mendapatkan APP ID, kalian harus punya HASH KEY 

Berikut adalah kode untuk menampilkan HASH KEY


Berikut adalah gambar yang telah di ganerated


Berikut ini juga hasil mengambil hash key dengan cmd commander


Kedua

Setelah kode hash key sudah di dapatkan, langkah selanjutnya adalah buka web Developer Facebook.
Dan buatlah project baru sesuai keinginan teman-teman semua.


Ketiga

Setelah teman-teman semua klik menu "Tambahkan Aplikas Batu" maka akan muncul gambar seperti di bawah ini. Di sini teman-teman semua di minta untuk memberi nama aplikasi yang di buat, masukan alamat email, lalu klik tombol Buat ID Aplikasi

Keempat

Langkah selanjutnya adalah, Klik menu pengaturan di sebelah kiri, lalu klik tombol tambahkan platform

Kelima

Setelah itu akan muncul gambar seperti di bawah ini, pada gambar ini teman-teman di minta untuk memilih platform yang akan di gunakan, pilih platform android.

Keenam

Setelah kalian memilih platform, langkah selanjutnya adalah teman-teman isi nama package android studionya, lalu tuliskan tempat proses login facebook yang akan di buat, dan masukan hash key nya, lalu hidupkan Single Sign On, lalu klik tombol Simpan Perubahan.


Ketujuh

Setelah itu, langkah selanjutnya adalah klik menu Tinjauan Aplikasi, lalu Turn On akses untuk membuat aplikasi bersifat publik

Kedelapan

Copy AppID ke android studio, simpan kode app id di dalam folder string

Mari kita mulai ngoding :) 

Pertama

Tambahkan gradle repo facebooknya di build.gradle(Module:app)


Tambahkan gradle repo CircleImageView, supaya tampilan gambar profilenya berbentuk lingkaran


Kedua

Tambahkan juga mavenCentral() di dalam gradle repositories, lalu setelah itu di sync project

Ketiga

Kemudian langkah selanjutnya adalah, buka AndroidManifast.xml lalu tambahkan user-permission INTERNET

Kemudian Tambahkan kode berikut di bawah tag penutup activity pada AndroidManifast.xml

Keempat

Kemudian kita mulai membuat design layoutnya, buka activity_main.xml buat design layout seperti di bawah ini,

Kelima

Kamudian buka MainActivity.java, (kode login menggunakan facebook)
dalam methode onCreate tambahkan code berikut di atas code setContenView


Kemudian deklarasikan koten-konten yang ada pada layout activity_main.xml
Setelah di deklarasiakan, langkah selanjutnya adalah buat callbackmanager nya
Lalu, teman-teman tambahkan setReadPermission nya ("public_profile", "email")
Langkah selanjutnya adalah, beri action pada Login Button nya, dan akan muncul 3 method, yaitu onSuccess, onCancel, dan onError. Di dalam method onSucces kita beri 4 field yaitu name,email,gander,cover dan juga picture. Tujuan nya adalah supaya kita bisa menampilkan Nama lengkapnya, emailnya dan juga foto profile nya. Dan nanti akan kita panggil di method setProfileToView. Dan di dalam method onCancel dan onError kita kita tambahkan toast saja. Untuk memberi tau ketika kita gagal login atau login nya di cancel. Berikut adalah kodingan nya.
Lalu tambahkan method onActivityResult, dan panggil variable callbackmanager nya
Dan yang terakhir, tampilkan email,nama dan gambar di dalam method setProfileToView

Keeman

Berikut adalah Full code pada Activity MainActivity.java. 
Berikut ini adalah vidio demo aplikasinya
------------------------------------------------------------------------------------------------------------------------

Bila ada yang ingin di tanyakan.. Silahkan hubungi saya melalui kontak di bawah ini

Wa    : 081322579702 - 085776744756
Fb     : Ramadhany As-Salafy
Ig      : ramadhany_12
Line  : rikat_homreh2

------------------------------------------------------------------------------------------------------------------------

Mungkin cukup sekian yang bisa saya sampaikan pada hari ini.... Semoga bisa bermanfaat bagi saya dan kita semua Amin... Apabila ada kesalahan kata mohon di maafkan... Karena kesalahan itu datang nya dari Syaitan dan Kebaikan itu datang nya dari Allah Ta'ala... Sekaian Dari saya Wasslamualaikum Warahmarullah