Kotlin ile Android’de Facebook Login

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.

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.

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.

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.

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ı:

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.

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.

 

Projenin tüm dosya ve kodlarına github linkinden ulaşabilirsiniz.

 

 

Tavsiye Edilen Yazılar

Henüz yorum yapılmamış, sesinizi aşağıya ekleyin!


Bir Yorum Ekle

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir