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

Tip: Menambahkan Login Facebook ke Aplikasi Android Anda

Indonesian (Bahasa Indonesia) translation by Amri Shodiq (you can also view the original English article)

Login Facebook memberikan cara yang aman dan nyaman bagi pengguna untuk login ke dalam aplikasi tanpa harus repot-repot melakukan proses pendaftaran dulu. Untuk menambahkan fitur ini ke aplikasi Anda, hanya membutuhkan beberapa menit jika menggunakan versi terbaru dari SDK Facebook untuk Android.

Dalam tip pendek kali ini, Anda akan belajar bagaimana menambahkan tombol login Facebook ke aplikasi Android dan menangani event-event nya untuk login ke dalam aplikasi Anda menggunakan Facebook Login.

Kebutuhan

Sebelum mulai, pastikan Anda memiliki:

1. Daftarkan Aplikasi Anda

Setiap aplikasi yang menggunakan Facebook SDK harus didaftarkan di Facebook. Caranya, login ke website Facebook Developers kemudian klik Create a New App di sebelah kanan atas.

Facebook Developers WebsiteFacebook Developers WebsiteFacebook Developers Website

Anda akan dihadapkan pada form yang menanyakan Display Name, Namespace dan Category untuk aplikasi Anda. Masukkkan informasi-informasi yang dibutuhkan ke dalam field-field nya kemudian klik Create App ID.

Form for creating a new app IDForm for creating a new app IDForm for creating a new app ID

Di halaman berikutnya, Anda akan bisa melihat Application ID Anda. Catat Application ID tersebut, sebab Anda akan membutuhkannya nanti dalam tutorial ini.

App ID and app secretApp ID and app secretApp ID and app secret

Buka Settings dari menu di sebelah kiri, kemudian klik tombol Add Platform. Dari pop-up, pilih Android.

Select Platform dialogSelect Platform dialogSelect Platform dialog

Di form berikutnya, masukkan nama package aplikasi Anda dan nama Activity Anda. Jika Anda belum membuat aplikasi atau Activity Anda, pastikan Anda ingat apa yang Anda masukkan tadi.

Untuk mengisi field Key Hashes, buka window terminal atau DOS prompt kemudian jalankan keytool untuk meng-generate key hash menggunakan debug keystore yang (di sistem *Nix) terletak di ~/.android/debug.keystore.  Perintahnya kira-kira seperti baris berikut.

Password default debug keystore adalah android. Masukkan password tersebut ketika ditanya. Output dari perintah tersebut mestinya berupa string sepanjang 28 karakter. Copy string tersebut, kemudian kembali ke browser, paste-kan string tersebut ke field Key Hashes seperti contoh di bawah.

Android app detailsAndroid app detailsAndroid app details

Pastikan Single Sign On di set ke Yes kemudian klik tombol Save Changes. Aplikasi Anda telah terdaftar.

2. Tambahkan Facebook SDK ke Proyek Anda

Facebook SDK tersedia di Maven Central. Untuk menggunakan repository ini, edit file build.gradle di dalam direktori app proyek Anda dan tambahkan kode berikut sebelum daftar dependencies.

Sekarang Anda dapat menambahkan Facebook SDK ke proyek Anda sebagai compile dependency. Tambahkan kode berikut ke dalam daftar dependencies:

3. Buat Activity

Langkah 1: Tentukan Layout-nya

Buat sebuah file layout baru bernama main_activity.xml di dalam res/layout. Ini akan jadi sangat sederhana hanya dengan dua widget:

  • sebuah LoginButton agar pengguna bisa login ke Facebook
  • sebuah TextView untuk menampilkan hasil dari percobaan login terakhir

Anda dapat menempatkan keduanya di dalam sebuah RelativeLayout. Setelah memasukkan atribut untuk padding dan posisi widget, isi XML layout akan menjadi seperti ini:

Langkah 2: Buat Class-nya

Buat sebuah class Java turunan dari Activity dan namakan MainActivity.java. Ingat bahwa nama class dan package ini harus sama dengan yang kita daftarkan di Facebook.

Deklarasikan widget-widget yang didefinisikan di layout activity sebagai field-field di class ini.

Deklarasikan sebuah CallbackManager sebagai field. CallbackManager, sesuai namanya, digunakan untuk me-manage callback-callback di dalam aplikasi.

SDK perlu diinisiasi sebelum menggunakan method-methodnya. Anda bisa melakukannya dengan memanggil sdkInitialize dan melempar context aplikasi sebagai parameternya. Tambahkan kode berikut ke method onCreate dari Activity Anda.

Berikutnya, inisiasi instance CallbackManager Anda menggunakan method CallbackManager.Factory.create.

Panggil setContentView untuk mengeset layout yang telah didefinisikan di langkah sebelumnya sebagai layout Activity ini kemudian gunakan findViewById untuk menginisiasi widget-widget.

Ini saatnya Anda buat callback untuk menangani hasil dari percobaan login dan mendaftarkannya dengan CallbackManager. Custom callback harus mengimplementasikan FacebookCallback. Interfacenya memiliki method untuk menangani setiap outcome yang mungkin dari percobaan login:

  • Jika login berhasil, maka onSuccess yang dipanggil.
  • Jika pengguna membatalkan percobaan login, onCancel akan dipanggil.
  • Jika ada error terjadi, onError akan dipanggil.

Untuk mendaftarkan custom callback, gunakan method registerCallback. Code untuk membuat dan mendaftarkan callback semestinya tampak seperti di bawah ini.

Anda sekarang bisa tambahkan kode ke dalam method-method ini untuk menampilkan pesan-pesan yang tepat menggunakan method setText milik TextView.

Ketika method onSuccess dipanggil, sebuah LoginResult akan diberikan sebagai parameter. Ambil access token yang dimilikinya menggunakan getAccessToken dan gunakan method getUserId untuk mendapatkan ID pengguna. Untuk mendapatkan token dalam bentuk String, gunakan method getToken. Tampilkan nilai-nilai ini di TextView dengan menambahkan kode berikut ke dalam method onSuccess.

Jika user membatalkan login, kita tampilkan pesan "Login attempt canceled". Tambahkan kode berikut di method onCancel.

Begitu juga, tambahkan kode berikut di method onError.

Menekan tombol login akan menampilkan Activity baru, yang mengembalikan hasil. Untuk menerima dan menangani hasilnya, override method onActivityResult di Activity dan berikan parameternya ke method onActivityResult milik CallbackManager.

4. Tambahkan Application ID Facebook

Application ID yang Anda terima ketika mendaftarkan aplikasi perlu ditambahkan sebagai string di dalam res/values/strings.xml. Untuk tutorial ini, namakan string nya facebook_app_id.

5. Edit file Manifest

Sebutkan Activity Anda di AndroidManifest.xml. Jika ini Activity pertama dalam aplikasi Anda, Anda seharusnya juga menambahkan intent-filter yang me-respon andoid.intent.action.MAIN.

Tambahkan application ID dalam tag meta-data.

Sebutkan FacebookActivity sebagai Activity lain milik aplikasi Anda. Ini menangani sebagian besar dari perubahan konfigurasi. Anda perlu menyebutkan bahwa Anda menggunakan atribut configChanges.

Akhirnya, Anda harus minta permission android.permission.INTERNET agar aplikasi dapat menghubungi server Facebook melalui internet.

6. Build dan Run

Aplikasi Anda selesai. Ketika Anda mem-build aplikasi ini dan menginstallnya ke perangkat Android, Anda akan lihat tombol Facebook Login.

The Log in with Facebook buttonThe Log in with Facebook buttonThe Log in with Facebook button

Menekan tombol tersebut akan membawa Anda ke halaman Facebook yang meminta Anda login dan memberikan otoritas untuk aplikasi Anda.

Authorization screenAuthorization screenAuthorization screen

Setelah berhasil login, TextView akan menampilkan user ID dan auth token.

Result of a successful loginResult of a successful loginResult of a successful login

Kesimpulan

Dalam tip pendek ini, Anda telah belajar bagaimana menggunakan Facebook SDK untuk menambahkan Facebook Login ke aplikasi Android Anda. Anda juga belajar bagaimana menangani beberapa outcome yang mungkin untuk sebuah percobaan login. Untuk mempelajari lebih jauh tentang Facebook Login, Anda dapat mempelajari Facebook SDK for Android.

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.