Herkese merhaba, medium’daki ilk yazımı sizlerle paylaşmaktan mutluluk duyuyorum. 🥳
Günümüzde mobil uygulamaların çoğunda e-mail ile ya da sosyal medya hesapları yardımıyla giriş yapıldığını görmüşsünüzdür. Ben de bugün flutter’da uygulamamıza nasıl e-mail ile kullanıcı authentication yapıldığını anlatacağım.
Öncelikle mobil ve web uygulamalarında authentication, database, storage gibi özellikleriyle Google tarafından geliştiricilerin kullanımına sunulan Firebase çözümü üzerinden işlemlerimizi yapacağız. Firebase hakkında detaylı bilgiye buradan ulaşabilirisiniz.
1.Projeyi Oluşturma
Terminalden flutter projesi oluşturmak için gerekli komut.
flutter create [proje_adi]
2.Firebase kitini projemize dahil etme ve kurulum:
Flutter’da firebase kitini projenize dahil etme ile ilgili bilgiye buradan ulaşabilirsiniz.
Firebase projemizi oluşturduktan ve projemiz ile bağlantısını yaptıktan sonra Authentication > Sign-in method sekmesi içindeki bölümden projemizin email ile kullanıcı kaydı açabilme durumumu etkin hale getirmemiz gerekiyor.
3. Paketlerin kurulumu
...
dependencies:
flutter:
sdk: flutter
firebase_auth: ^0.16.1...
firebase_auth paketimiz ile firebase üzerindeki authentication işlemlerini yönetebilir hale geleceğiz.
flutter create komutu ile projemizi oluşturduğumuza göre projenin genel yapısı aşağıda oluşturduğum çizimlerdeki gibidir.
Burada kullanacağımız ana widgetlar, textFormField, tasarımda köşelerden yuvarlatılmış bir button çizdiğim için floatingActionButton.exdended widgetini kullancağım. Burada özellikle aynı widgeti birden fazla kullancağım için component haline getirerek kullanacağım. Widgetleri projenizde parçalayarak component halinde kullanmak ile ilgili yazıya buradan ulaşabilirsiniz.
Proje dosya yapımız bu şekilde
helpers: Authentication komutlarını bu dart dosyası içinde yazacağız
screens: Uygulamamızın ekranlarını bu dart dosyalarında kodlayacağız.
widgets: Uygulamamızda sıklıkla kullandığımız componentleri bu dart dosyalarında kodlayacağız
Hazırlıklarımızı tamamladıysak o zaman koda geçelim 🤩
İlk olarak main.dart dosyamızı oluşturmakla başlayalım.
Daha sonra oluşturduğumuz widgetleri kodlayalım.
Yazdığımız text_input.dart dosyası ile inputlarımızı tasarım içinde hızlıca kullanacağız.
Firebase ile ilgili işlemleri tek bir dosya içinde, singleton design pattern ile tanımladığımız değişken üzerinden ulaşıp yapacağız. Bu sayede uygulamamızın servis ile haberleşmesini tek bir yerden sağlamış olcağız.
uygulamamızda yapacağımız widgetler servis ile haberleşmesini sağlayacak fonksiyonları yazdık sıra şimdi. Uygulamamızın ekranlarını kodlamaya geldi 👨🏻💻.
Giriş sayfasında oluşturmuş olduğumuz text, button widgetleri ile Giriş Yap butonuna basıldığında kontrol edilecek validate işlemlerinin fonksiyonları yazılmıştır. signIn methodu ile parametre olarak gönderdiğimiz email ve şifre değerleri yazmış olduğumuz SıgnInHelper dosyasındaki signIn methodunda işlemleri yapılır.
Kayıt Ol sayfasında text inputlarda aldığımız değerleri signInHelper.dart dosyasındaki register metodunda işlemler yapılır.
Yazmış olduğumuz şifremi unuttum sayfası ile butona basıldığında signInHelper.dart dosyasindaki forgotPass fonksiyonu içindeki işlemler gerçekleştirilir ve kullanıcıya şifre yenilemesi ile ilgili mail gönderilir.
Kayıt ve giriş işlemleri sonucunda firebase konsolumuza email kaydı düştü.
Projenin tam halini buradan inceleyebilirsiniz. Ayrıca sormak istediğiniz soru olursa bana Linkedin üzerinden ulaşabilirsiniz 🤗.
Yazıyı okumak için zaman ayırdığınız için teşekkürler, umarım faydalı olmuştur.
