Flutter’da Bloc(Cubit) ile Facebook Login(Firebase)
Kullandığımız mobil uygulamaların birçoğunda kayıt olma ve giriş yapma işlemleri bulunuyor. Bu yazımda da Flutter’da Cubit kullanarak Firebase aracılığıyla Facebook ile giriş yapma yönteminden bahsedeceğim.
Birinci Kısım
Öncelikle bir Flutter projesi oluşturuyoruz. Ardından ise Firebase Console üzerinden yeni bir Firebase projesi oluşturuyoruz.
Firebase projemizi oluşturduktan sonra açılan Overview sayfasından Flutter simgesine tıklayarak Firebase projemizi Flutter projemize entegre ediyoruz.
Flutter simgesine tıkladıktan sonra artık yapılması gereken adımları zaten bize anlatan bir ekran karşılıyor. Burada Firebase CLI kullanarak kolayca Firebase projemizi Flutter projemize entegre edebiliriz.
Firebase CLI ile Flutter ve Firebase projelerimizi birbirine bağladıktan sonra oluşturduğumuz Flutter projesine gelip pubspec.yaml dosyamıza kullanacağımız paketlerimizi ekliyoruz.
Paketleri de ekleme işleminden sonra main.dart dosyamıza gelerek Firebase’i projemizde kullanabilmek için gerekli kodları ekliyoruz.
Şimdi ise Facebook Developer sayfası üzerinden uygulamamızı oluşturup gerekli entegrasyonları yapacağız.
Öncelikle Meta for Developers adlı siteye giderek sağ üstteki Log In yazısına tıklıyoruz ve Facebook hesabımızla giriş yapıyoruz.
Giriş yaptıktan sonra açılan sayfada sağ üstte bulunan My Apps yazısına tıklıyoruz.
Ardından açılan sayfadan Create App tuşuna tıklayarak yeni bir proje oluşturma aşamasına geçiyoruz.
Bizden ilk olarak ne tür bir uygulama olacağını isteyen bir ekranla karşılaşıyoruz. Buradan amacımıza uygun olan seçeneği seçtikten sonra Next tuşuna basıyoruz.
İkinci aşamada ise uygulama ile ilgili detayları isteyen bir sayfayla karşılaşıyoruz. Buradaki seçeneklerin detayları ise şu şekilde:
- Display Name: Uygulamamızın adını girdiğimiz kısım.
- App Contact Email: Email’imizi girdiğimiz kısım.
- Business Account: Belirli izinlere veya özelliklere erişmek için uygulamaların bir İşletme Hesabına bağlı olması gerekiyor ve burada da işletme hesabınız bulunuyorsa seçebilirsiniz. Opsiyonel bir seçenektir.
Bu kısımları doldurduktan sonra Next tuşuna basıyoruz ve artık uygulamamız oluştu.
Uygulamamızı oluşturduktan sonra bizi karşılayan ekranda Facebook Login başlığı altındaki Set Up tuşuna basıyoruz.
Ardından Android’i seçiyoruz.
Android seçeneğini seçtikten sonra yaklaşık 9–10 adımlık bir sayfa karşılayacak ama burada bazı kısımları uygulamamız gerekmiyor. Bu yüzden sadece uygulamamız gereken kısımları şimdi size anlatacağım.
İlk olarak Flutter projemizde build.gradle(android/app/build.gradle) dosyamıza giderek dependencies bloğu içine gerekli kodlarımızı ekliyoruz:
Gerekli kodları build.gradle dosyamıza ekledik ve Facebook sayfamıza geri dönüyoruz. Burada üçüncü adımı gerçekleştirmemiz gerekiyor. Bizden istenilen Package Name ve Default Activity Class Name bölümleri bulunuyor. Package Name kısmına Flutter projemizin paket ismini yazacağız.
Bunun için de AndroidManifest.xml (android/app/src/main/AndroidManifest.xml) dosyamıza gidiyoruz. Burada en üst kısımda bulunan package içerisinden paket ismimizi kopyalıyoruz ve Package Name kısmına yapıştırıyoruz. Default Activity Class Name kısmına ise paket ismimizin sonuna .MainActivity ekinin eklenmiş halini yazıyoruz.
Örnek Package Name ve Default Activity Class Name şu şekildedir:
- Package Name: com.example.myapp
- Default Activity Class Name: com.example.myapp.MainActivity
Bu kısımları doldurduktan sonra Save tuşuna tıklayarak kaydediyoruz.
Şimdi ise dördüncü adımda bizden bir key oluşturmamızı istiyor. Bu key’i oluşturabilmek için öncelikle bilgisayarımıza Java SDK ve Openssl’i indirmemiz gerekiyor. İndirdiklerimizi kurma işlemini gerçekleştirelim.
Java SDK’i indirmek için buraya,
Openssl’i indirmek için buraya tıklayarak kendinize uygun olanları seçerek indirebilirsiniz. Bu dosyaları indirip kurma işlemlerini gerçekleştirdikten sonra şimdi terminalimizi açarak kurduğumuz Java SDK dosyamızın içindeki bin dosyasına gidelim.
Java dosya yolunun içine eriştikten sonra şimdi ise altta verilen koddaki dosya yollarını kendi dosya yollarımıza göre değiştirelim ve Enter tuşuna basarak kodu çalıştıralım. Çalıştırdıktan sonra Enter Keystore Password: ifadesi ile karşılaştık ve burada da hiçbir şey yazmadan tekrar Enter tuşuna basalım.
Enter tuşuna bastıktan sonra alt kısımda bize bir key(kırmızı ile işaretlenen) verdi onu kopyalayalım.
Bu kodu kopyaladıktan sonra tekrar Meta for Developers sayfamıza dönelim ve dördüncü adımın sonundaki Key Hashes kısmına bu kodu yapıştırıp Save tuşuna basalım.
Şimdi ise Flutter projemize App ID, Client Token gibi değerleri ekleyeceğiz.
App ID için uygulama anasayfamızın sol tarafında bulunan menüden Settings/Basic kısmına tıklıyoruz ve karşımıza çıkan ekrandan App ID kısmındaki ID’yi kopyalıyoruz.
Ardından yine sol taraftaki menüden Settings/Advanced kısmına giriyoruz ve açılan sayfada Security başlığı altında bulunan Client Token’ı kopyalıyoruz.
App ID ve Client Token’ımızı kopyaladıktan sonra Flutter projemize dönüp android/app/src/main/res/values dosya yolunun içine strings.xml adında bir yeni XML dosyası oluşturuyoruz ve buraya gerekli kodları ekliyoruz.
- App Name: Uygulamamızın ismini buraya yazıyoruz.
- Facebook App Id: Bu kısma biraz önce kopyaladığımız App ID’imizi yazıyoruz.
- Fb Login Protocol Scheme: Buraya ise yine App ID’imizi başına fb ekleyerek yazıyoruz.
- Facebook Client Token: Son olarak buraya ise biraz önce kopyaladığımız Client Token’ı yazıyoruz.
Şimdi ise Flutter projemiz üzerinden AndroidManifest.xml dosyamıza giderek sırasıyla şu kodları ekliyoruz:
Burada da gerekli kodları ekledikten sonra Meta for Developer sayfamızda Settings kısmına tekrar giriş yaparak App ID ve App Secret kısmındaki değerleri kopyalıyoruz.
Ardından Firebase Console üzerinden Authentication kısmına girip Sign-in method bölümüne giriş yapıyoruz.
Buradan Facebook’u seçiyoruz ve sağ üstten Enable tuşuna basarak aktif hale getiriyoruz. Biraz önce kopyaladığımız App ID ve App Secret değerlerini buradaki gerekli yerlere yapıştırıyoruz.
Son olarak ise açılan pencerenin en alt kısmında bulunan OAuth linkini kopyaladıktan sonra Save tuşuna basarak kaydediyoruz. Ardından Meta for Developer sayfamızdaki Facebook Login → Settings → Valid OAuth Redirect URIs kısmına giderek kopyaladığımız linki yapıştırıyoruz.
Gerekli ayarları yaptığımız bölümün artık sonuna geldik. Şimdi kodlarımızı yazmaya geçebiliriz.
İkinci Kısım
İlk olarak servis isteklerimizi gerçekleştirdiğimiz metotlarımızı tutacağımız auth_repository.dart dosyamızı oluşturuyoruz ve burada bir abstract sınıf oluşturuyoruz ardından ise içerisine şu an kullanacağımız metot olan Future<UserCredential> signInWithFacebook()’u ekliyoruz.
Şimdi ise Facebook ile giriş yapabilmemiz için gereken metodu yazacağımız auth_service.dart dosyamızı oluşturuyoruz. Buraya AuthService adında, AuthRepository sınıfını implement eden bir sınıf yazıyoruz ve içerisine servis isteğimizi gerçekleştirdiğimiz metodumuzu ekliyoruz.
Servis sınıfımızı da yazdıktan sonra artık Cubit dosyalarımızı oluşturmaya başlayabiliriz. Öncelikle auth_state.dart adında State dosyamızı oluşturuyoruz. Burada loading, authenticated, unauthenticated, error gibi durumları ele alacağız ve bunun için AuthStatus adında bir enum oluşturduk. Ardından State sınıfımız içerisine bu AuthStatus’u ve uygulamaya giriş yaptıktan sonra Facebook kullanıcı adımızı görebilmemiz için String bir userName değişkeni ekledik. (Burada giriş yaptığımızı doğrulamak amaçlı userName gibi bir parametre ekledim)
State sınıfımızı oluşturup gerekli eklemeleri yaptık sıra geldi Cubit dosyamızı oluşturup gerekli kodları eklemeye. İlk olarak auth_cubit.dart adında yeni bir dosya oluşturuyoruz. Burada ise yeni bir signInWithFacebook() fonksiyonu oluşturuyoruz. Sonra bu fonksiyonun içinde ilk önce yüklenme durumunu ele alarak status’u loading olarak güncelliyoruz ardından servis isteğimizi gerçekleştirdikten sonra eğer başarılı bir şekilde giriş yapıldıysa status’u authenticated olarak güncelliyoruz. Herhangi bir hata çıkması durumunda ise bu hatayı yakalayarak status’u error olarak güncelliyoruz.
Lojik kısımları hallettikten sonra şimdi de bu kısımları UI ile birleştirme kısmına geçelim. Burada tasarımın nasıl olacağı konusu tamamen size veya çalıştığınız projeye bağlı. Öncelikle login_screen.dart adında bir dosya oluşturuyoruz. Bu kısım uygulama açıldığında bizi karşılayacak olan ve içerisinde “Facebook ile Giriş Yap” butonu içerecek olan sayfa. Burada giriş yaptığımızı algılayabilmek için bir listener’a ihtiyacımız var ve bu yüzden body kısmında BlocConsumer kullandık ve içerisine Cubit ve State sınıflarımızı yazdık. Sayfamızda bir ElevatedButton bulunuyor ve bu butona tıklandığında Cubit sınıfımız içerisindeki signInWithFacebook() fonksiyonunu çalıştırdık. Giriş bilgilerimizi girdikten sonra yüklenme aşamalarında state’i loading olarak güncellediğimiz için loading durumlarında CircularProgressIndicator kullandık. Giriş yaptığımızda ise state’i authenticated olarak güncelliyoruz ve artık ana sayfamıza yönlendirme işlemini gerçekleştiriyoruz.
Şimdi ise giriş yaptıktan sonra gideceğimiz ana sayfamızı oluşturalım. Öncelikle home_screen.dart adında bir dosya oluşturuyoruz. Dosyamızı oluşturduktan sonra body kısmında BlocBuilder kullanıyoruz ve burada ekranın ortasında Facebook kullanıcı adımızı yazdırıyoruz.
Son olarak ise main.dart dosyamıza bazı eklemeler yapacağız. Burada Cubit’i aktif hale getirmek için BlocProvider ekliyoruz ve create parametresine AuthenticationCubit sınıfımızı ekleyerek projemizi hazır hale getiriyoruz.
Son Söz
Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.
Bizi aşağıdaki linklerden takip edebilirsiniz.
- Twitter hesabım
- Team Kraken Twitter hesabı
