Flutter’a Firebase Entegrasyonu ve Temel İşlemler 1: Authentication

Barış Kodaş

Published in

Flutter Students Club

9 min readJan 3, 2022

Herkese merhaba,

Bu makale serisinde Firebase servislerinden bahsediyoruz ve serinin ilk konuğu Authentication servisi.

Başlamadan önce: Firebase nedir ve nasıl Flutter’a entegre edilir konusunda kafanızda soru işaretleri varsa bir önceki makalemde bunları ele aldım şuradan okuyabilirsiniz: Flutter’a Firebase Entegrasyonu ve Temel İşlemler 0: Bilgi ve Kurulum

Authentication nedir?

Authentication kelimesinin Türkçe karşılığı “kimlik doğrulama” anlamına gelmekte, programlama dünyasındaki karşılığının da bundan hiçbir farkı yok. Örneğin gerçek hayatta herhangi bir devlet kurumuna gittiğinizde istediğiniz işlemi yapmak için görevli kimlik ibrazı ister veya bir işyerine/okula girerken de aynı şekilde personel/öğrenci kartızı turnikeye okutursunuz ve o alana girmeye yetkili olduğunuz onaylanır. Programlama dünyasında da kullanımı tam olarak bu şekilde. Uygulamamızı kullanan kullanıcıların hangi verilere ve sayfalara erişebileceğini yetkilendirmek ve karışıklık olmaması için önce kimlik doğrulaması yapmamız gerekiyor. Örneğin herhangi bir sosyal medya uygulamasını kullanmaya başladığınızda size ilk önce kullanıcı adı ve şifrenizi sorar, eğer bilgileriniz doğruysa kimliğiniz doğrulanır ve daha sonra anasayfada bir akış olur, takip ettiğiniz insanların gönderilerini/mesajlarını görürsünüz çünkü o verileri görmeye yetkilendirilmişsinizdir, takip etmediğiniz kişilerin gönderilerini ise göremezsiniz çünkü yetkiniz yoktur. Dipnot: Yetkilendirme kelimesinin İngilizce karşılığı “autherization” dır, ileride karşınıza çıktığında bu iki kavramı birbirine karıştırmamaya dikkat edin.

İçindekiler:

E-mail ve şifre ile; kaydolma, doğrulama, şifre sıfırlama
Google ile giriş
Telefon numarası ile doğrulama
Oturum kontrolü

Kullanıcı nasıl doğrulanıyor?

Yaygın kullanan yöntem, kullanıcı sisteme bir e-mail adresi ve şifre ile kaydolur, oturum açmak istediğinde bu ikisiyle kimliğini doğrular oturum açardı. Akıllı telefonların ve sosyal medya platformlarının yaygınlaşması ile günümüzde yaygın kullanılan yöntemler ise; SMS doğrulama, Google/Apple/Facebook hesabı ile doğrulama, e-mail ile doğrulama vb. Firebase tam bu noktada devreye giriyor, normal şartlarda bunların her biri için ayrı servislere bağlanmanız gerekirken Firebase bizim yerimize back-end’i çoktan yazıp, otomatize ediyor ve bize sadece kullanmak kalıyor.

İşte Firebase’in bize sunduğu Authentication servisleri:

Authentication / Sign-in Providers menüsü

Bu yöntemlerin hepsine aşina olduğunuzu varsayıyorum ama yine de çalışma prensibini açıklayalım; Facebook ile kimlik doğrulamayı ele alalım, eğer uygulamanıza Facebook ile kayıt olunmasına izin vermek istiyorsanız önce buradan Facebook’u aktif hale getirmeniz gerekiyor. Kullanıcı uygulamanıza Facebook ile kaydolmaya çalıştığında Facebook hesabındaki bilgileri(ad soyad, email vb.) çekiyor ve sisteme kaydediyor. Anonymous hariç bütün platformlar için süreç böyle işliyor.

Anonymous: Uygulamanızı yükleyen henüz kaydolmamış veya giriş yapmamış olan kullanıcıya belirli içerikleri ve sayfaları göstermenize olanak tanıyan bir servis. Örneğin medium’u ele alalım, mobil uygulamasında kullanıcı girişi yapmadan makale okuyabilirsiniz fakat makaleyi beğenmek, yazarını takip etmek istediğinizde sizden oturum açmanızı ister. Anonymous servisi tam olarak böyle çalışıyor.

Biz bu makalede Mail, SMS ve Google ile doğrulama seçeneklerini inceleyeceğiz, bunları aktif edelim.

Hazırsak başlayalım 😎

Öncelikle Firebase entegrasyonunu tamamladıktan sonra main.dart dosyasına gelip paketlerimizi import etmemiz ve main fonksiyonumuzu düzenleyerek Firebase’i uygulama başlatılırken çağırmamız (initiliaze) gerekiyor. Firebase’i initialize etmek için firebase_core paketini çağırmamız elzem.

Bunu yaptıktan sonra uygulamanızı derleyin, eğer hata alırsanız bir önceki makalemde bahsettiğim “olası hatalar” kısımlarına bakabilirsiniz.

Uygulamamızı başarıyla derlediysek ne yapacağımızdan bahsedelim. Günümüzde genel olarak bir uygulamayı yüklediğinizde karşınıza bir giriş yap/kaydol sayfası çıkar ve daha sonra telefon doğrulaması yapmanızı ister, ben de bu senaryoyu baz alarak şöyle bir uygulama tasarladım:

Görüldüğü üzere bir adet Flutter uygulamamız var ve bizden giriş yapmamızı ya da kaydolmamızı bekliyor. Daha sonrasında ise oturum açacağız ve bizi Profil sayfasına yönlendirip telefon doğrulaması isteyecek. İlk önce sayfanın UI kısmı ile başlayalım.

Uygulama genelinde en çok kullanacağımız widget yuvarlatılmış TextField olacağı için bunu direkt theme içerisinde tanımlayarak başlıyorum.

Daha sonra lib/pages/login_page.dart dosyasını oluşturup içine Scaffold döndüren LoginPage() adında bir StatelessWidget oluşturuyorum ve main.dart’da MaterialApp’in home parametresine şimdilik bu sayfayı veriyorum.

Şimdi gelelim giriş ekranında sırasıyla kullanacağımız widgetlarımıza:

Flutter Logo
E-mail ve şifre, TextField
Giriş butonu, RawMaterialButton
“veya yazısı”, Text & Container
Google ile giriş, RawMaterialButton
Şifremi unuttum, TextButton
Kaydol, TextButton

Öncelikle sayfa düzenimizi ve sınırlarını oluşturarak başlayalım ve widgetlarımızı içine koyacağımız bir Column tanımlayalım:

en üste bir FlutterLogo widgetı atalım

Ardından build metodu altına TextFielddan alacağımız verilere eşitleyeceğimiz değişkenlerimizi tanımlayalım

TextFieldları oluşturalım. (8. ve 9. satırlara dikkat)

Giriş butonumuz, şimdilik onPress parametresini boş geçelim.

— veya — widget

Google ile giriş butonu (google logosunu bir url’den çekerek gösterebilirsiniz)

Giriş sayfamızın UI kısmını tamamladık, şimdi Kaydol sayfamızı tasarlayalım.

Kaydol sayfamız pek kalabalık değil fakat gerçek applerde burada kullanıcı adı, adres, telefon vs gibi daha fazla veri istenir, bu verileri de bir sonraki konumuz olan Cloud Firestore’da tutarız. Bundan dolayı ben buraya sadece mail ve şifre ekledim, normalde parola için 2 alan olur ve if yapısı ile birbirine eşit olma durumunu incelemeniz gerekir. Bunları size bırakıyorum ve devam ediyorum. 🤓

Bu sayfada kullanacağımız widgetlar sırayla:

Icon
E-mail şifre, TextField
Kaydol, RawMaterialButton

lib/pages/register_page.dart dosyamı oluşturdum ve yine Scaffold döndüren RegisterPage adında bir StatelessWidget tanımladım.

Scaffolduma bir AppBar tanımlıyorum,

ve ardından…

Kaydol sayfasının tasarımını da tamamladık.

Son olarak giriş yaptığımızda bizi yönlendireceği bir anasayfa yapalım ve bu sayfada kullanıcının giriş yaptığı mailini ve profil fotoğrafını gösterelim, daha sonra ise telefon doğrulaması isteyelim.

Icon
Text
Icon, TextField, ElevatedButton
TextButton

lib/pages/home_page.dart dosyamı oluşturuyorum ve HomePage() adında, Scaffold döndüren bir StatefulWidget tanımlıyorum.

Sayfa tasarımlarımız bitti, sırada servise bağlamak var.

UI kısmını hallettik, artık Authentication servislerimizi ayarlayabiliriz.

lib/services klasörü altına auth_services.dart dosyamı oluşturup MyAuthService sınıfımı oluşturuyorum.

Daha sonra MyAuthService sınıfımızın içerisine fonksiyonlarımızı yazmaya başlayabiliriz.

İlk olarak e-mail ve şifre ile kayıt fonksiyonumuzu yazalım.

burada print ile debug console’a sonuçları yazdırıyoruz fakat normal uygulamalarda kullanıcıya bir diyalog ekranı vs gösterilir, material kütüphanesini import edip widget içerisinde de yazdırabilirsiniz bu sonuçları, orasını size bırakıyorum.

Test edelim!

Kaydol sayfamızı daha önce tasarlamıştık.

“Kaydol” butonuna basıldığında oluşturduğumuz MyAuthService sınıfımızdan registerWithMail() fonksiyonumuz tetiklensin.

Öncelikle kayıt sayfama gelip sınıfımı import ediyorum.

Kaydol butonumun onPress metoduna geliyorum

ve uygulamamı build edip test ediyorum.

işlem başarıyla gerçekleşti, fonksiyonumuz çalışıyor. Sırada Giriş yap fonksiyonumuz var

Giriş yap fonksiyonumuzu yazalım.

Test edelim!

Giriş sayfamıza gelelim ve Giriş butonumuzda fonksiyonumuzu tetikleyelim.

cihazda test edelim.

Bilinmesi gerekenler:

Burada bilmemiz gereken en önemli nokta giriş yaptıktan sonra Firebase kullanıcı kimliği bilgisini kendi otomatik olarak tutuyor, yukarıda bahsettiğimiz <User> tipinde döndürdüğü nesneyi kendisi global bir değişken gibi tanımlayıp tüm bilgilerini tutuyor gibi düşünebilirsiniz. Kullanıcı uygulamayı kapattığında da tutulmaya devam ediyor, uygulamaya tekrar giriş yaptığında siz user bilgisine göre bir sayfaya yönlendirmeniz gerekiyor. Örneğin bir kaç adım sonra user bilgisi null ise giriş sayfasına, değilse anasayafaya yönlendireceğiz.

User bilgisini kullanarak işlem yapalım.

Giriş yaptıktan sonra, kullanıcı e-mail adresini profil fotoğrafı veya ikonunun altındaki TextWidget’a yazdıralım. Daha sonra da çıkış yaptıralım.

Çıkış yapalım

bu işlemden sonra, tutulan kullanıcı bilgimiz sıfırlanır.

Şifremi unuttum servisi

Kullanıcı şifresini yenilemek istiyorsa, Firebase sıfırlama maili gönderiyor. MyAuthService sınıfımıza fonksiyonumuzu yazalım.

Klasik olarak zorunlu mail parametremizi servise veriyoruz ve gerisini Firebase hallediyor.

Şifremi unuttum butonuna basılınca bir Modal Bottom Sheet çıkaralım ve mail bilgisini alıp servisimize aktaralım.

Google ile giriş

Bu yönteme hepimiz aşinayızdır, hemen her uygulama destekliyor. Çalışma mantığı ise şu şekilde; uygulamamıza google_sign_in paketini dahil ediyoruz ve auth_services.dart dosyamıza import ederek kullanmaya başlıyoruz.

ardından servisimizi yazmaya başlayalım.

ardından giriş sayfamıza dönüp “Google ile giriş” butonuna basıldığında servisimizi çağıralım.

Test edelim!

başarılı bir şekilde Google hesabımızla oturum açtık. Ben mail adresini yazdırdım sadece fakat siz ad soyad gibi diğer bilgileri de currentUser metodu üzerinden yazdırabilirsiniz.

Sırada SMS doğrulama var.

SMS Doğrulama

Öncelikle çalışma mantığından bahsedelim, fonksiyonu bir butona atayacağız ve basıldığında tetiklenecek. Bu servisi diğerleri gibi merkezileştirmeyeceğiz.

servisin nasıl çalıştığını kavradıysak uygulamamıza dahil edebiliriz.

Yapacağımız şey tam olarak şu: Kullanıcıdan numarasını alıp doğrula butonuna basıldığında servisimiz tetiklenecek ve duruma göre kod bloklarımız tetiklenecek. İster kendi telefon numaranızla deneyebilir, ister Firebase üzerinden bir test telefon numarası ve doğrulama kodu üretebilirsiniz. Ben Firebase üzerinden bir test telefon numarası yaratacağım fakat kendi gerçek numaramla da denedim, sorunsuz çalışıyor.

Firebase üzerinden test telefon numarası ve doğrulama kodu oluşturulması

Burayı hallettiysek, home_page.dart sayfamıza geçelim ve değişkenlerimizi tanımlayalım.

ardından Doğrula butonunun onPress kısmına gelelim.

Durumlara göre hangi kodlar tetiklenecek ayarladığımıza göre,

Test edelim!

görüldüğü üzere başarıyla doğrulandı.

Son rötuş: sayfa yönlendirmesi

Uygulama açıldığında kullanıcımız hangi sayfaya yönlendirilecek ayarlamamız gerekiyor. Makalemizin başında firebase’in sürekli olarak login bilgisini tuttuğunu söylemiştik, eğer kullanıcı oturum açmışsa anasayfaya, açmamışsa giriş sayfasına yönlendirelim.

Şimdilik bu kadar balık!

Bu makalede bahsedemediğim servisler oldu, örneğin doğrulama maili göndermek, e-mail değiştirmek gibi.

MyAuthService() sınıfımız içerisindeki servisleri düzenleyip, diğer servisleri kendiniz deneyerek öğrenebilirsiniz, balık tutma sırası sizde. 😄

Tek yapmanız ilgili metodların üstüne gelip Cmd+Space veya Ctrl+space yapmak. 🔥

Bazı loş noktalar ve kapanış

Günümüz uygulamalarının pek çoğunda Google, Facebook, Apple, Twitter ile giriş seçeneklerinin olduğunu görüyoruz, Firebase de bunları destekliyor fakat bu makalede sadece Google’dan bahsedebildik. Ve ayrıca kullanıcı hem Google hem Facebook hem de Twitter hesabını bağlayabilir, bunları tek bir kimlikte birleştirmeliyiz. İleride bu konuları detaylı biçimde ele alan bir makale yazmayı planlıyorum, takipte kalabilirsiniz.