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:

Android Studio versi terakhir
sebuah akun Facebook

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.

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.

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

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

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.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

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.

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.

repositories {
    mavenCentral()
}

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

compile 'com.facebook.android:facebook-android-sdk:4.0.0'

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:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:padding="16dp"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/info"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:textSize="18sp"
        />

    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

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.

private TextView info;
private LoginButton loginButton;

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

private CallbackManager callbackManager;

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.

FacebookSdk.sdkInitialize(getApplicationContext());

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

callbackManager = 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.

setContentView(R.layout.main_activity);
info = (TextView)findViewById(R.id.info);
loginButton = (LoginButton)findViewById(R.id.login_button);

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.

loginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(LoginResult loginResult) {

    }

    @Override
    public void onCancel() {

    }

    @Override
    public void onError(FacebookException e) {

    }
});

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.

info.setText(
    "User ID: " 
    + loginResult.getAccessToken().getUserId() 
  + "\n" +
    "Auth Token: "
	+ loginResult.getAccessToken().getToken()
);

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

info.setText("Login attempt canceled.");

Begitu juga, tambahkan kode berikut di method onError.

info.setText("Login attempt failed.");

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.

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    callbackManager.onActivityResult(requestCode, resultCode, data);
}

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.

<string name="facebook_app_id">123456908761030</string>

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.

<activity android:name="com.hathy.fblogin.MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

Tambahkan application ID dalam tag meta-data.

<meta-data android:name="com.facebook.sdk.ApplicationId" 
   android:value="@string/facebook_app_id"/>

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

<activity android:name="com.facebook.FacebookActivity"
  android:configChanges=
         "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
  android:theme="@android:style/Theme.Translucent.NoTitleBar"
  android:label="@string/app_name" />

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

<uses-permission android:name="android.permission.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.

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

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

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.