Cara Membuat Login Facebook di Android
Apriliany Halimatus Sa'diyyah 13 September 2017
Seiring dengan maraknya berbagai aplikasi Android, banyak diantara mereka yang mengharuskan penggunanya melakukan proses pendaftaran terlebih dahulu untuk menggunakan fitur-fitur yang tersedia di dalam aplikasi tersebut. Namun, dengan hadirnya Facebook login, kini kita tidak perlu lagi repot-repot melakukan proses pedaftaran.
Untuk menambahkan fitur ini ke aplikasi, para pembaca hanya membutuhkan waktu yang singkat jika menggunakan versi terbaru dari SDK Facebook untuk Android. Dalam tutorial ini, para pembaca akan belajar bagaimana caranya untuk menambahkan Button Login facebook ke aplikasi Android dan menangani event-eventnya untuk login ke dalam aplikasi Android para pembaca menggunakan Facebook login. Berikut langkah-langkah cara membuat login Facebook di Android:
Daftarkan Aplikasi Anda
Pertama tentunya para pembaca yang menggunakan Facebook SDK harus memiliki akun facebook. Kemudian, daftarkan aplikasi yang ingin ditambahkan login Facebook. Caranya buka ke website Facebook Developer, lalu klik Tambahkan sebuah Aplikasi Baru.
Selanjutnya, akan muncul sebuah kotak dialog form Buat ID Aplikasi Baru yang menanyakan tentang display name dan email kontak. Setelah diisi, klik buat ID aplikasi dan akan muncul yang mengharuskan pembaca mengisi captcha untuk keamanan.
Di halaman berikutnya, pembaca akan diharuskan untuk memilih produk aplikasi apa yang akan pembaca buat. Karena artikel ini berjudul membuat login facebook, maka kita akan pilih masuk ke facebook.
Pilih platform apa yang akan digunakan, karena membuat login facebook di Android, kita akan pilih platform Android.
Tambahkan nama package dan nama class default aplikasi pembaca. Caranya dengan melihatnya pada Android Manifest bagian package untuk nama package dan untuk nama class default adalah activity dimana pembaca menambahkan login facebook.
Tambahkan key hash, fungsi key hash adalah untuk memastikan autentisitas interaksi antara aplikasi pembaca dan Facebook. Untuk mendapatkan key hash caranya buka command prompt.
Copy paste perintah cd C:\Program Files\Java\jdk1.8.0_144\bin ke command prompt untuk masuk ke dalam folder Java di Local Disk C. Tetapi, dengan catatan sudah menginstal Java JDK.
Klik enter. Setelah itu copy paste kembali perintah keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | "C:\OpenSSL\bin\openssl" sha1 -binary | "C:\OpenSSL\bin\openssl" base64 lalu klik enter kembali. Untuk mendapatkan key hash dengan catatan lagi sudah mendownload Open SSL dan saya menyimpan folder Open SSL di Local Disk C. Download Open SSL di sini atau di sini
Copy string** +J+3yf/mrgPgKeg1llIttpSjcws=** kemudian kembali ke browser, paste-kan string tersebut ke field Key Hashes seperti contoh di bawah.
Pastikan Masuk Tunggal (Single Sign On) di set ke On kemudian klik tombol Simpan. Aplikasi Anda telah terdaftar.
Baca juga: Potensi Pasar yang Besar dan Keuntungan Menjadi Android Developer
Tambahkan Facebook SDK ke Proyek Anda
Pada aplikasi pembaca, buka Gradle Scripts -> build.gradle (Project) dan tambahkan repositori berikut ini ke bagian buildscript
repositories {
jcenter()
mavenCentral()
}
Tambahkan Facebook SDK ke proyek Anda sebagai compile dependency. Tambahkan kode berikut ke dalam daftar dependencies:
'com.facebook.android:facebook-android-sdk:[4,5]'
Lalu Run project pembaca.
Tambahkan Application ID Facebook
Application ID yang pembaca terima ketika mendaftarkan aplikasi perlu ditambahkan sebagai string di dalam** res/values/strings.xml** dengan cara buka dasbor pada aplikasi facebook developer yang sudah pembaca daftarkan, selanjutnya copy paste id aplikasi pada bagian id aplikasi. Untuk tutorial ini, namakan string nya facebook_app_id.
<string name="facebook_app_id">603965929991414</string>
Edit file Manifest
Tambahkan application ID dalam tag meta-data.
<meta-data android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
Tambahkan juga internet permission agar dapat menghubungkan Facebook melalui internet.
<uses-permission android:name="android.permission.INTERNET"/>
Berikut tampilan baris code lengkap dalam Android Manifest:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.codepolitan.loginsample">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data
android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id" />
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Baca juga: Belajar Membuat Aplikasi Android dari 10 Aplikasi Open Source Ini
Buat Activity
Buat project baru pada Android Studio pembaca, lalu pada Layout MainActivity.xml tambahkan sebuah LoginButton agar pengguna bisa login ke Facebook. LoginButton merupakan elemen UI yang membungkus fungsi yang tersedia di LoginManager. Ketika seseorang mengeklik tombol tersebut, fitur masuk dimulai dengan izin yang ditetapkan di LoginManager.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:facebook="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.codepolitan.loginsample.MainActivity">
<com.facebook.login.widget.LoginButton
android:id="@+id/loginButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="80dp"
facebook:com_facebook_login_text="Login with Facebook"/>
</LinearLayout>
Selanjutnya, buka MainActivity.java dan tambahkan sebuah deklarasi CallbackManager. CallbackManager berfungsi untuk memanage callback-callback di dalam aplikasi.
CallbackManager callbackManager;
Kemudian panggil CallbackManager.Factory.create di dalam onCreate untuk membuat pengelola callback untuk menangani tanggapan masuk.
callbackManager = CallbackManager.Factory.create();
Selama proses memasuki akun Facebook pembaca, Facebook akan meminta izin akses informasi profil pembaca. Tambahkan baris code permission berikut ke dalam onCreate untuk meminta izin akses pada akun Facebook pembaca.
loginButton.setReadPermissions(Arrays.asList("email","public_profile"));
Jika Anda ingin aplikasi pembaca tetap yang terbaru dengan token akses dan profil saat ini, pembaca dapat menerapkan kelas AccessTokenTracker dan ProfileTracker. Kelas tersebut memanggil kode pembaca saat terjadi perubahan token akses atau profil. Dengan cara tambahkan kode berikut:
AccessTokenTracker accessTokenTracker = new AccessTokenTracker() {
@Override
protected void onCurrentAccessTokenChanged(AccessToken oldAccessToken, AccessToken currentAccessToken) {
}
};
ProfileTracker profileTracker = new ProfileTracker() {
@Override
protected void onCurrentProfileChanged(Profile oldProfile, Profile currentProfile) {
}
};
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 error) {
}
});
}
Untuk mengambil data pengguna dari token akses yang ditentukan kita menggunakan GraphRequest. Kelas GraphRequest memiliki metode newMeRequest, Secara default metode newMeRequest mengambil bidang default dari objek pengguna. Jika pembaca memerlukan info tambahan, pembaca dapat menambahkan parameter fields dan meminta bidang tertentu dan tambahan Toast untuk info pengguna jika pengguna berhasil Login akan keluar Toast Hi, (nama Facebook pengguna yang login). Tambahkan baris kode berikut di dalam public void onSuccess().
AccessToken accessToken = loginResult.getAccessToken();
Profile profile = Profile.getCurrentProfile();
GraphRequest request = GraphRequest.newMeRequest(loginResult.getAccessToken(),
new GraphRequest.GraphJSONObjectCallback() {
@Override
public void onCompleted(JSONObject object, GraphResponse response) {
Log.e("aa", ""+response.toString());
try {
Toast.makeText(getApplicationContext(), "Hi, " + object.getString("name"), Toast.LENGTH_LONG).show();
} catch(JSONException ex) {
ex.printStackTrace();
}
}
});
Bundle parameters = new Bundle();
parameters.putString("fields", "id,name");
request.setParameters(parameters);
request.executeAsync();
}
Jangan lupa untuk menambahkan baris kode Toast berikut ke dalam void onCancel() jika batal untuk login dan void onError() jika ada error saat login. Saat login batal akan muncul Toast "Login Cancelled" dan Saat login error akan muncul Toast "Login Error".
@Override
public void onCancel() {
Toast.makeText(getApplication(), R.string.cancel_login, Toast.LENGTH_SHORT).show();
}
@Override
public void onError(FacebookException error) {
Toast.makeText(getApplication(), R.string.error_login, Toast.LENGTH_SHORT).show();
}
});
Baca juga: Library yang Wajib Kamu Coba untuk Membuat Aplikasi Android
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) {
super.onActivityResult(requestCode, resultCode, data);
callbackManager.onActivityResult(requestCode, resultCode, data);
}
Berikut tampilan source code lengkap pada MainActivity.Java:
package com.codepolitan.loginsample;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;
import com.facebook.AccessToken;
import com.facebook.AccessTokenTracker;
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.GraphRequest;
import com.facebook.GraphResponse;
import com.facebook.Profile;
import com.facebook.ProfileTracker;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.Arrays;
public class MainActivity extends AppCompatActivity {
CallbackManager callbackManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
callbackManager = CallbackManager.Factory.create();
this.setTitle("Login Sample");
LoginButton loginButton = (LoginButton)findViewById(R.id.loginButton);
loginButton.setReadPermissions(Arrays.asList("email","public_profile"));
AccessTokenTracker accessTokenTracker = new AccessTokenTracker() {
@Override
protected void onCurrentAccessTokenChanged(AccessToken oldAccessToken, AccessToken currentAccessToken) {
}
};
ProfileTracker profileTracker = new ProfileTracker() {
@Override
protected void onCurrentProfileChanged(Profile oldProfile, Profile currentProfile) {
}
};
loginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
@Override
public void onSuccess(LoginResult loginResult) {
AccessToken accessToken = loginResult.getAccessToken();
Profile profile = Profile.getCurrentProfile();
GraphRequest request = GraphRequest.newMeRequest(loginResult.getAccessToken(),
new GraphRequest.GraphJSONObjectCallback() {
@Override
public void onCompleted(JSONObject object, GraphResponse response) {
Log.e("aa", ""+response.toString());
try {
Toast.makeText(getApplicationContext(), "Hi, " + object.getString("name"), Toast.LENGTH_LONG).show();
} catch(JSONException ex) {
ex.printStackTrace();
}
}
});
Bundle parameters = new Bundle();
parameters.putString("fields", "id,name");
request.setParameters(parameters);
request.executeAsync();
}
@Override
public void onCancel() {
Toast.makeText(getApplication(), R.string.cancel_login, Toast.LENGTH_SHORT).show();
}
@Override
public void onError(FacebookException error) {
Toast.makeText(getApplication(), R.string.error_login, Toast.LENGTH_SHORT).show();
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
callbackManager.onActivityResult(requestCode, resultCode, data);
}
}
Run project pembaca
Berikut adalah hasil output Membuat Login Facebook di Android:
Baca juga artikel Android menarik lainnya coder :
- Tips-tips Singkat untuk Menjadi Developer Android yang Lebih Baik
- Mudah Mencari Library dan Tools untuk Membuat Aplikasi Android di Situs Ini
- Bahasa-bahasa untuk Pemrograman Mobile
Kamu berminat untuk belajar lebih jauh pemrograman Android? CodePolitan menyediakan program pelatihan belajar coding intensif yang berorientasi pada kebutuhan industri selama satu minggu secara tatap muka dengan bimbingan mentor berpengalaman yang dilengkapi dengan fasilitas asrama selama belajar.
Buat aplikasi Androidmu dalam 1 minggu dan mulai karirmu sebagai Android Developer sekarang juga dengan bergabung dalam program Developer School.