Yazılımcılar, mobil uygulama içinde kullanıcının sosyal medya ağlarıyla (Facebook, Twitter vb.) bağlantı kurmalarını sağlayarak kullanıcıya kolaylıklar sağlamaktadır.
Bu makalede, Kotlin dili ile Android uygulamasına Facebook API’sini entegre ederek, kullanıcının Facebook hesabına giriş ve profil bilgilerini gösterme işlemlerinin nasıl yapılacağını anlatacağım.
Örneğimizin çıktısı:
Bu uygulamayı oluşturabilmek için sırasıyla adımlarımızı anlatmaya başlayalım.
1-Facebook’da App Oluşturma
developers.facebook.com sayfasını açıp, facebook hesabınıza giriş yaptıktan sonra menüdeki My Apps linkine tıklayın. Açılan sayfada resimde belirttiğim butonu seçmelisiniz.
Sonrasında açılan pencerede “Select an app type” sorusuna cevap olarak Tüketici seçeneğini seçip, continue butonuna basın. Sonrasında Şekil-1 resminde belirttiğim şekilde App’i oluşturun.
Şekil-1
App oluşturulduktan sonra aşağıdaki resmi göreceksiniz. Facebook Login bölümünde Setup butonuna basmalısınız.
Ve açılan ekranda Android ikonunu seçmelisiniz. Yeni açılan sayfada yapılması gereken farklı farklı adımlar göreceksiniz. 1. ve 2. adım bölümlerinde hiç birşey yapmadan Next diyerek 3. adıma geliniz.
3.adımda Android projenizin paket ismini ve kullanıcı uygulamanızı başlattığında açılacak activity sınıfını belirtiniz ve kaydedin. (Şekil-2)
Şekil-2
Not: Uygulamanızı henüz Google Play mağazasında yayınlamadıysanız, sistemin mağazada uygulamanızı bulamadığını belirten bir açılır pencere görürsünüz. Use this package name butonunu seçip, devam ediniz.
4.adımda uygulamanızın debug ve release versiyonları için hash oluşturacağız.
Uygulamanızı henüz yayınlamadıysanız, yalnızca Debug Key Hash oluşturmalısınız. Daha sonra uygulamayı Google play’e yükleyecekseniz, bu adıma geri dönüp Release Key Hash oluşturmalısınız.
Debug Key Hash Oluşturma
Bu key hash değerini oluşturabilmek için bilgisayarınızda Openssl olması gerekir. Eğer yoksa download linkindeki siteden indirip, exe yi kurabilirsiniz. Bilgisayarınızdaki JDK-> bin dizinin içindeki keytool dosyasını kullanarak hash oluşturacağız. cmd dosyasını açıp, aşağıdaki resimde belirttiğim gibi kendi JDK yolunuzu kullanarak bin dizinine gidin.
Sonra openssl ve .android dosya yollarını aşağıdaki komut da yerleştirip, çalıştırın.
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64
Release Key Hash Oluşturma
Uygulamanızın Apk dosyasını oluştururken ALIAS ve jks uzantılı dosyayı oluştururuz. ALIAS değerini ve jks dosya yolunu aşağıdaki komut da yerleştirip, çalıştırın.
keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64
Debug ve Release Key Hash başlıklarındaki bilgiyi uyguladığınızda oluşan key değerini, 4. adımdaki Key Hashes alanına yerleştirip, Save butonuna basın. 5. adım bölümünde hiç bir şey yapmadan Next diyerek 6. adıma geliniz.
6. adımda Facebook App ID ve scheme değerlerinin bulunduğu kodu kopyalayıp, projenizdeki string xml dosyasına ekleyin. Her oluşturulan facebook app de bu değerler farklı olacaktır.AndroidManifest.xml dosyanıza <uses-permission android:name=”android.permission.INTERNET” /> kodunu ekleyerek internet izni verin ve aşağıdaki meta-data ve activity kodunu ekleyin.
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> <activity android:name="com.facebook.FacebookActivity" android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:label="@string/app_name" />
Burada yapacağımız işlemler bitti. Diğer adımları Next butonuna basarak geçebilirsiniz.
2-Facebook Login Button Oluşturma
Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek facebook-login ve Picasso kütüphanelerini yüklüyoruz.
implementation 'com.facebook.android:facebook-login:6.+' implementation 'com.squareup.picasso:picasso:2.71828'
Ben Facebook’un hazır butonuna kullanmayı tercih etmedim. Bunun sebebi tasarımcınızın farklı buton tasarımlarını kullanması durumunda, tasarımı kolaylıkla arayüze aktarmayı göstermektir. MainActivity sınıfında ilişkilendireceğimiz arayüz kodları:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" android:background="#25221D" tools:context=".MainActivity"> <Button android:id="@+id/facebook_login_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:backgroundTint="#1778F2" android:drawableStart="@drawable/facebook_icon" android:text="Log in with Facebook" android:textAllCaps="false" android:textColor="@android:color/white" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
3. Facebook Login Kontrolü ve Verileri Alma
İlk öncelikle Kotlin’de arayüz elementlerinin id bilgilerini kullanarak, elemente kolayca erişmek için id ‘kotlin-android-extensions’ kodunu projemin app dizinin altındaki build.gradle dosyasının plugins alanının içine eklemeliyiz. Bu durumu projede uyguladım.
MainActivity, Facebook hesabına giriş yapıp yapamadığının kontrolünü yaptıktan sonra kullanıcının bazı verilerine ulaşabilmemize sağlayan sınıfdır. Aldığımız bilgileri tasarımda göstermek için DetailsActivity sınıfına aktardım. Daha detaylı açıklama yorum(comment) tag larında bulunmaktadır.
import android.annotation.SuppressLint import android.content.Intent import android.os.Bundle import android.util.Log import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import com.facebook.* import com.facebook.AccessToken import com.facebook.login.* import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { lateinit var callbackManager: CallbackManager var id = "" var firstName = "" var lastName = "" var name = "" var email = "" var accessToken = "" //Bu uygulamayı test etmek için strings.xml dosyasına kendi App ID ve Protocol Scheme eklemeyi unutmayın! override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) callbackManager = CallbackManager.Factory.create() facebook_login_btn.setOnClickListener { LoginManager.getInstance() .logInWithReadPermissions(this, listOf("public_profile", "email")) } //Facebook hesabına giriş yapıp yapamadığının kontrolü LoginManager.getInstance() .registerCallback(callbackManager, object : FacebookCallback<LoginResult?> { override fun onSuccess(loginResult: LoginResult?) { //Giriş başarılı olduğunda kullanıcı bilgilerini getiren metodu çağırdım getUserProfile(loginResult?.accessToken, loginResult?.accessToken?.userId) } override fun onCancel() { Toast.makeText(this@MainActivity, "Login Cancelled", Toast.LENGTH_LONG).show() } override fun onError(exception: FacebookException) { Toast.makeText(this@MainActivity, exception.message, Toast.LENGTH_LONG).show() } }) } //Facebook kullanıcısının bilgilerini getiren metod @SuppressLint("LongLogTag") fun getUserProfile(token: AccessToken?, userId: String?) { //Kullanıcının hangi bilgilerini getireceğini belirtiyoruz val parameters = Bundle() parameters.putString( "fields", "id, first_name, last_name, name, email" ) GraphRequest(token, "/$userId/", parameters, HttpMethod.GET, GraphRequest.Callback { response -> val jsonObject = response.jsonObject // Facebook Access Token //Access Token sadece Debug mode'da görebilirsiniz.Kullanıcının access token'nın sızmasını önlemek için yapıldı if (BuildConfig.DEBUG) { FacebookSdk.setIsDebugEnabled(true) FacebookSdk.addLoggingBehavior(LoggingBehavior.INCLUDE_ACCESS_TOKENS) } accessToken = token.toString() // Facebook Name if (jsonObject.has("name")) { val facebookName = jsonObject.getString("name") Log.i("Facebook Name: ", facebookName) name = facebookName } else { Log.i("Facebook Name: ", "Not exists") name = "Not exists" } // Facebook Email if (jsonObject.has("email")) { val facebookEmail = jsonObject.getString("email") Log.i("Facebook Email: ", facebookEmail) email = facebookEmail } else { Log.i("Facebook Email: ", "Not exists") email = "Not exists" } openDetailsActivity() }).executeAsync() } //Login süresinin dolup dolmadığını görmek için AccessToken'ı kontrol ederek // kullanıcının Login durumunu kontrol eden method fun isLoggedIn(): Boolean { val accessToken = AccessToken.getCurrentAccessToken() val isLoggedIn = accessToken != null && !accessToken.isExpired return isLoggedIn } //Kullanıcının logOut(çıkış) yapmasını sağlayan metod fun logOutUser() { LoginManager.getInstance().logOut() } override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { callbackManager.onActivityResult(requestCode, resultCode, data) super.onActivityResult(requestCode, resultCode, data) } //Kullanıcı bilgilerini DetailsActivity sınıfına aktaran metod private fun openDetailsActivity() { val myIntent = Intent(this, DetailsActivity::class.java) myIntent.putExtra("facebook_name", name) myIntent.putExtra("facebook_email", email) startActivity(myIntent) } }
4- Facebook Kullanıcı Bilgilerini Tasarımda Gösterme
Örnek deki detay sayfasının tasarımını yapabilmek için github linkinde bulunan proje içindeki activity_details xml dosyasını kullanabilirsiniz. DetailsActivity sınıfında da activity_details xml’ini kullandık. DetailsActivity sınıfında ise kullanıcı bilgilerini MainActivity sınıfından alıp, arayüz tasarımına aktardık. Profil resmini de Picasso kütüphanesini kullanarak arayüz de gösterilmesini sağladım.
import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import com.squareup.picasso.Picasso import kotlinx.android.synthetic.main.activity_details.* import com.facebook.Profile; class DetailsActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_details) //facebook name ve email bilgilerini MainActivity'den aldım. val facebookName = intent.getStringExtra("facebook_name") val facebookEmail = intent.getStringExtra("facebook_email") //Bilgileri arayüze aktardım facebook_name_textview.text = facebookName facebook_email_textview.text = facebookEmail //Facebook kullanıcısının profil fotoğrafını alıp, //Picasso sınıfı ile arayüzde gösterdim Picasso.get().load(Profile.getCurrentProfile().getProfilePictureUri(400, 400)).into(profil_pic); } }
Projenin tüm dosya ve kodlarına github linkinden ulaşabilirsiniz.