Flutter 2’nin çıkışıyla beraber Flutter öğrenilmeye ve sektör tarafından benimsenmeye başlandığı şu günlerde muhtemelen eskiye nazaran daha çok kişi Flutter ile ilgili döküman arıyor, Stackoverflow’da geziyor ve pub.dev üzerinden paketleri inceliyor. Bu çoğalan ilgiden, Firebase de nasibini alacaktır ve Firebase gibi servislerin geliştiriciler arasında daha da popüler olacağını tahmin edebiliyorum. Bu yüzden Firebase ile ilgili yazılarıma devam etmem gerekiyor ve bugünün konusu Authentication işlemleri.
Firebase’de mail ile kayıt olmaktan tutun, cep telefonu numarasıyla kayıta kadar birçok farklı seçenekle kullanıcıya uygulamaya giriş yetkisi verebiliyorsunuz. Bunlardan en popüleri elbette mail ile giriş. Kullanıcılar, cep telefonu numarasını paylaşmaktansa mail adreslerini paylaşmayı yeğliyorlar. Eğer kullanıcıların kayıt ekranında sizden vazgeçmemesini istiyorsanız kitlenize uygun giriş-kayıt yöntemleri geliştirmelisiniz. Bu bir başka yazının konusu. 🙂
Öncelikle Flutter’da kullanıcıdan alacağımız veriler için TextField yazmamız gerekiyor. Bir adet mail için, bir adet de şifre için iki textfield oluşturalım.
TextField(
controller: mailController,
style: GoogleFonts.roboto(
fontWeight: FontWeight.w400,
color: Colors.white,
),
decoration: InputDecoration(
hintText: 'mail@example.com',
contentPadding: EdgeInsets.only(top: 16.0, left: 2.0),
hintStyle: GoogleFonts.roboto(
fontSize: 12.0,
color: contentColor,
fontWeight: FontWeight.w300,
),
border: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 170, 185, 221),
),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 170, 185, 221),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 170, 185, 221),
),
),
),
),
TextField(
obscureText: true,
controller: passwordController,
style: GoogleFonts.roboto(
fontWeight: FontWeight.w400,
color: Colors.white,
),
decoration: InputDecoration(
hintText: 'En az 8 karakterli',
contentPadding: EdgeInsets.only(top: 16.0, left: 2.0),
hintStyle: GoogleFonts.roboto(
fontSize: 12.0,
color: contentColor,
fontWeight: FontWeight.w300,
),
border: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 170, 185, 221),
),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 170, 185, 221),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 170, 185, 221),
),
),
),
),Kapsamlı bir uygulamada girilen mail adresinin kontrolü regular expression (düzenli ifade) ile yapılabilir fakat bu uygulamada yapmayı tercih etmedim. 🙂 Firebase’de girilen şifrelerin uzunluğu en az 6 karakter olmalı. Fakat yapacağınız kontrollerle beraber kullanıcıları kırılması zor bir şifreyle kayıt ettirebilirsiniz.
Daha sonrasında oluşturacağınız FlatButton veya ElevatedButton gibi Widget’larla kayıt butonu oluşturabilirsiniz. Bu kısımdaki stili oluşturmak size kalmış. Benim uygulamamda birden çok yuvarlak buton olacağı için kendi CircleButton sınıfımı oluşturmuştum.
GestureDetector(
onTap: () async {
if (passwordController.text.length > 7) {
var value = await register(
mailController.text, passwordController.text);
if (value == true) {
push(context, HomeScreen());
}
} else {
//Alert Dialog, şifrenin en az 8 karakterli olması gerektiğini söyleyecek
}
},
child: CircleButton(
height: 50.0,
width: 50.0,
icon: Icon(
Icons.person_add_alt_1_outlined,
color: Colors.white,
size: 18.0,
),
),
),Kullandığım register, login, logout gibi fonksiyonları auth_manager.dart isimli bir dosyaya yazıyorum.
// KAYIT İŞLEMİ
Future<bool> register(String mail, String password) async {
var _auth = FirebaseAuth.instance;
final User user = (await _auth.createUserWithEmailAndPassword(
email: mail,
password: password,
))
.user;
if (user != null) {
await setUserLoginInfo(user.uid);
await firebaseSetUserUid(user.uid);
return true;
} else {
return false;
}
}
// GİRİŞ İŞLEMİ
Future<bool> login(String mail, String password) async {
User user = (await FirebaseAuth.instance.signInWithEmailAndPassword(
email: mail,
password: password,
))
.user;
if (user != null) {
await setUserLoginInfo(user.uid);
return true;
// success
} else {
return false;
// fail
}
}
// ÇIKIŞ İŞLEMİ
void logout() {
FirebaseAuth.instance.signOut();
print('User Logout Successfully');
}Kayıt işlemiyle beraber kullanıcının mail ve girdiği şifre ile birlikte Firebase üzerinde bir kayıt açabilirsiniz. Peki bu kullanıcıya ait verileri tutacağınız alanı nasıl Firestore üzerinde oluşturursunuz?
Her kullanıcının kendisine özel (unique) bir UID’si bulunur. Bu UID’ye register içerisinde user.uid yazarak erişebiliriz veya FirebaseAuth.instance.currentUser.uid yazarak bu UID’ye uygulamanın her sayfasında erişebilirsiniz. Bu özel UID’yi alıp, Firestore üzerinde users veya kullanicilar isimli collection’a yazmamız gerekiyor. Bunu da firebaseSetUserUid isimli fonksiyonumla birlikte yapıyorum.
firebaseSetUserUid(String uid) async {
var db = FirebaseFirestore.instance;
DocumentReference ref = db.collection('users').doc(uid);
ref.set(
{'uid': uid},
SetOptions(
merge: true,
),
);
}Bu fonksiyon üzerindeki önemli nokta şudur: Kullanıcıya özel oluşturduğumuz bu dökümanda dökümanın ID’si kullanıcının UID’siyle aynıdır. Böylelikle bu kullanıcıya dair bilgileri Firestore üzerinde depolarken kullanıcının UID’sine göre yazıp, okuyabilir ve diğer kullanıcıların bilgileriyle karışmamasını sağlayabilirsiniz.
Flutter Firebase auth işlemlerini anlattığım bu yazıda aynı zamanda sizlere login ve logout fonksiyonlarını da vererek yapacağınız uygulamada kalan kısımları tamamlamak için ufak bir yol açtığımı düşünüyorum. Yakın zamanda daha çok yazı ekleyerek yeni başlayanlar için Firebase konusunda önemli bilgiler vermeyi planlıyorum. Takipte kalın! 🙂
Okuyucuya Not
Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.
Sağlıcakla kalın!