FirebaseUI kullanarak Flutter uygulamasına kullanıcı kimlik doğrulama akışı ekleme

1. Başlamadan önce

Bu codelab'de FlutterFire kullanıcı arayüzü paketini kullanarak Firebase Kimlik Doğrulamasını Flutter uygulamanıza nasıl ekleyeceğinizi öğreneceksiniz. Bu paketle, Flutter uygulamasına hem e-posta/şifre kimlik doğrulamasını hem de Google Oturum Açma kimlik doğrulamasını ekleyeceksiniz. Ayrıca bir Firebase projesini nasıl ayarlayacağınızı ve Flutter uygulamanızda Firebase'i başlatmak için FlutterFire CLI'yi nasıl kullanacağınızı da öğreneceksiniz.

Önkoşullar

Bu codelab, Flutter deneyiminizin olduğunu varsayar. Değilse, önce temelleri öğrenmek isteyebilirsiniz. Aşağıdaki bağlantılar faydalıdır:

• Flutter Widget Çerçevesinde Bir Tura Katılın
• İlk Flutter Uygulamanızı Yazın, bölüm 1 codelab'i deneyin

Ayrıca biraz Firebase deneyiminiz de olmalıdır, ancak Firebase'i bir Flutter projesine hiç eklemediyseniz sorun değil. Firebase konsoluna yabancıysanız veya Firebase'de tamamen yeniyseniz öncelikle aşağıdaki bağlantılara bakın:

• Firebase Temelleri belgeleri
• Flutter codelab ile Firebase'i tanıyın .

Ne yaratacaksınız

Bu codelab, Firebase for Authentication'ı kullanarak bir Flutter uygulaması için kimlik doğrulama akışını oluşturma konusunda size yol gösterir. Uygulamada bir giriş ekranı, 'Kayıt Ol' ekranı, şifre kurtarma ekranı ve kullanıcı profili ekranı bulunacaktır.

Ne öğreneceksin

Bu kod laboratuvarı şunları kapsar:

• Firebase'i Flutter uygulamasına ekleme
• Firebase Konsol kurulumu
• Firebase'i uygulamanıza eklemek için Firebase CLI'yi kullanma
• Dart'ta Firebase yapılandırması oluşturmak için FlutterFire CLI'yi kullanma
• Flutter uygulamanıza Firebase Kimlik Doğrulaması ekleme
• Konsolda Firebase Kimlik Doğrulaması kurulumu
• E-posta ve Şifre ekleme firebase_ui_auth paketiyle oturum açın
• firebase_ui_auth paketiyle kullanıcı kaydı ekleme
• 'Şifrenizi mi unuttunuz?' ekleme sayfa
• firebase_ui_auth ile Google Oturum Açma özelliğinin eklenmesi
• Uygulamanızı birden fazla oturum açma sağlayıcısıyla çalışacak şekilde yapılandırma.
• firebase_ui_auth paketi ile uygulamanıza kullanıcı profili ekranı ekleme

Bu kod laboratuvarı özellikle firebase_ui_auth paketini kullanarak sağlam bir Kimlik Doğrulama sistemi eklemeyle ilgilidir. Göreceğiniz gibi, yukarıdaki özelliklerin tümünü içeren bu uygulamanın tamamı, yaklaşık 100 satır kodla uygulanabilir.

İhtiyacınız olan şey

• Flutter ve kurulu SDK hakkında çalışma bilgisi
• Bir metin düzenleyici (JetBrains IDE'leri, Android Studio ve VS Code, Flutter tarafından desteklenir)
• Google Chrome tarayıcısı veya Flutter için tercih ettiğiniz diğer geliştirme hedefi. (Bu codelab'deki bazı terminal komutları, uygulamanızı Chrome'da çalıştırdığınızı varsayacaktır)

2. Firebase projesi oluşturun ve kurun

Tamamlamanız gereken ilk görev, Firebase'in web konsolunda bir Firebase projesi oluşturmaktır.

Firebase projesi oluşturma

1. Firebase'de oturum açın.
2. Firebase konsolunda Proje Ekle'ye (veya Proje oluştur ) tıklayın ve Firebase projeniz için bir ad girin (örneğin, " FlutterFire-UI-Codelab ").

3. Proje oluşturma seçeneklerine tıklayın. İstenirse Firebase şartlarını kabul edin. Bu uygulama için Analytics kullanmayacağınız için Google Analytics kurulumunu atlayın.

Firebase projeleri hakkında daha fazla bilgi edinmek için Firebase projelerini anlama konusuna bakın.

Oluşturmakta olduğunuz uygulama, kullanıcılarınızın uygulamanızda oturum açmasına olanak sağlamak için Firebase Kimlik Doğrulamasını kullanır. Ayrıca yeni kullanıcıların Flutter uygulamasından kaydolmasına da olanak tanır.

Firebase Kimlik Doğrulamanın Firebase Konsolu kullanılarak etkinleştirilmesi gerekir ve etkinleştirildikten sonra özel yapılandırma gerekir.

Firebase Authentication için e-postayla oturum açmayı etkinleştir

Kullanıcıların web uygulamasında oturum açmasına izin vermek için öncelikle E-posta/Parola oturum açma yöntemini kullanacaksınız. Daha sonra Google ile Oturum Açma yöntemini ekleyeceksiniz.

1. Firebase konsolunda sol paneldeki Oluştur menüsünü genişletin.
2. Kimlik Doğrulama 'ya tıklayın ve ardından Başlayın düğmesine ve ardından Oturum açma yöntemi sekmesine tıklayın (veya doğrudan Oturum açma yöntemi sekmesine gitmek için burayı tıklayın ).
3. Oturum açma sağlayıcıları listesinde E-posta/Parola'ya tıklayın, Etkinleştir anahtarını açık konuma getirin ve ardından Kaydet'e tıklayın.

3. Flutter uygulamasını kurun

Başlamadan önce başlangıç ​​kodunu indirmeniz ve Firebase CLI'yi yüklemeniz gerekecek.

Başlangıç ​​kodunu alın

GitHub deposunu komut satırından kopyalayın:

git clone https://github.com/flutter/codelabs.git flutter-codelabs

Alternatif olarak GitHub'un CLI aracını yüklediyseniz:

gh repo clone flutter/codelabs flutter-codelabs

Örnek kod, makinenizdeki codelabs koleksiyonunun kodunu içeren flutter-codelabs dizinine kopyalanmalıdır. Bu codelab'in kodu flutter-codelabs/firebase-auth-flutterfire-ui alt dizinindedir.

flutter-codelabs/firebase-auth-flutterfire-ui dizini iki Flutter projesi içerir. Birine complete , diğerine start denir. start ​​dizini tamamlanmamış bir proje içerir ve en çok zaman harcayacağınız yerdir.

cd flutter-codelabs/firebase-auth-flutterfire-ui/start

İleriye atlamak veya bir şeyin tamamlandığında nasıl görünmesi gerektiğini görmek istiyorsanız çapraz referans için tam adlı dizine bakın.

Codelab'i takip etmek ve kodu kendiniz eklemek istiyorsanız flutter-codelabs/firebase-auth-flutterfire-ui/start adresinden Flutter uygulamasıyla başlamalı ve codelab boyunca bu projeye kod eklemelisiniz. Bu dizini tercih ettiğiniz IDE'ye açın veya içe aktarın.

Firebase CLI'yi yükleyin

Firebase CLI, Firebase projelerinizi yönetmeniz için araçlar sağlar. Biraz sonra kuracağınız FlutterFire CLI için CLI gereklidir.

CLI'yi kurmanın çeşitli yolları vardır. MacOS veya Linux kullanıyorsanız en basit yol, bu komutu terminalinizden çalıştırmaktır:

curl -sL https://firebase.tools | bash

CLI'yi yükledikten sonra Firebase ile kimlik doğrulaması yapmanız gerekir.

1. Aşağıdaki komutu çalıştırarak Google hesabınızı kullanarak Firebase'de oturum açın:

firebase login

2. Bu komut, yerel makinenizi Firebase'e bağlar ve Firebase projelerinize erişmenizi sağlar.

3. Firebase projelerinizi listeleyerek CLI'nin düzgün şekilde yüklendiğini ve hesabınıza erişebildiğini test edin. Aşağıdaki komutu çalıştırın:

firebase projects:list

4. Görüntülenen liste, Firebase konsolunda listelenen Firebase projeleriyle aynı olmalıdır. En azından flutterfire-ui-codelab.

FlutterFire CLI'yi yükleyin

FlutterFire CLI, Flutter uygulamanızda desteklenen tüm platformlarda Firebase kurulum sürecini kolaylaştırmaya yardımcı olan bir araçtır. Firebase CLI'nin üzerine inşa edilmiştir.

İlk önce CLI'yi yükleyin:

dart pub global activate flutterfire_cli

CLI'nin kurulu olduğundan emin olun. Aşağıdaki komutu çalıştırın ve CLI'nin yardım menüsü çıktısını verdiğinden emin olun.

flutterfire -—help

Firebase projenizi Flutter uygulamanıza ekleyin

FlutterFire'ı yapılandırın

Flutter uygulamanızda Firebase'i kullanmak için gereken Dart kodunu oluşturmak için FlutterFire'ı kullanabilirsiniz.

flutterfire configure

Bu komut çalıştırıldığında hangi Firebase projesini kullanmak istediğinizi ve hangi platformları kurmak istediğinizi seçmeniz istenecektir.

Aşağıdaki ekran görüntüleri yanıtlamanız gereken istemleri göstermektedir.

1. Kullanmak istediğiniz projeyi seçin. Bu durumda flutterfire-ui-codelab kullanın
2. Hangi platformları kullanmak istediğinizi seçin. Bu codelab'de web, iOS ve Android için Flutter için Firebase Kimlik Doğrulamasını yapılandırma adımları vardır, ancak Firebase projenizi tüm seçenekleri kullanacak şekilde ayarlayabilirsiniz.
3. Bu ekran görüntüsü işlemin sonundaki çıktıyı gösterir. Firebase'e aşina iseniz, konsolda platform uygulamaları (örneğin bir Android uygulaması) oluşturmanıza gerek olmadığını ve FlutterFire CLI'nin bunu sizin için yaptığını fark edeceksiniz.

Bu tamamlandığında metin düzenleyicinizdeki Flutter uygulamasına bakın. FlutterFire CLI, firebase_options.dart adında yeni bir dosya oluşturdu. Bu dosya, her platform için gereken Firebase yapılandırmasını tutan statik değişkenlere sahip olan FirebaseOptions adlı bir sınıf içerir. flutterfire configure çalıştırdığınızda tüm platformları seçtiyseniz web , android , ios ve macos adlı statik değerleri göreceksiniz.

firebase_options.dart

import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
import 'package:flutter/foundation.dart'
   show defaultTargetPlatform, kIsWeb, TargetPlatform;

/// Default [FirebaseOptions] for use with your Firebase apps.
///
/// Example:
/// ```dart
/// import 'firebase_options.dart';
/// // ...
/// await Firebase.initializeApp(
///   options: DefaultFirebaseOptions.currentPlatform,
/// );
/// ```
class DefaultFirebaseOptions {
 static FirebaseOptions get currentPlatform {
   if (kIsWeb) {
     return web;
   }
   // ignore: missing_enum_constant_in_switch
   switch (defaultTargetPlatform) {
     case TargetPlatform.android:
       return android;
     case TargetPlatform.iOS:
       return ios;
     case TargetPlatform.macOS:
       return macos;
   }

   throw UnsupportedError(
     'DefaultFirebaseOptions are not supported for this platform.',
   );
 }

 static const FirebaseOptions web = FirebaseOptions(
   apiKey: 'AIzaSyCqFjCV_9CZmYeIvcK9FVy4drmKUlSaIWY',
   appId: '1:963656261848:web:7219f7fca5fc70afb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   authDomain: 'flutterfire-ui-codelab.firebaseapp.com',
   storageBucket: 'flutterfire-ui-codelab.appspot.com',
   measurementId: 'G-DGF0CP099H',
 );

 static const FirebaseOptions android = FirebaseOptions(
   apiKey: 'AIzaSyDconZaCQpkxIJ5KQBF-3tEU0rxYsLkIe8',
   appId: '1:963656261848:android:c939ccc86ab2dcdbb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.appspot.com',
 );

 static const FirebaseOptions ios = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.appspot.com',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );

 static const FirebaseOptions macos = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.appspot.com',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );
}

Firebase, uygulama kelimesini bir Firebase projesinde belirli bir platforma yönelik belirli yapıya atıfta bulunmak için kullanır. Örneğin, FlutterFire-ui-codelab adlı Firebase projesinin birden fazla uygulaması vardır: biri Android için, biri iOS için, biri MacOS için ve biri Web için.

DefaultFirebaseOptions.currentPlatform yöntemi, uygulamanızın üzerinde çalıştığı platformu algılamak için Flutter tarafından sunulan TargetPlatform numaralandırmasını kullanır ve ardından doğru Firebase uygulaması için gereken Firebase yapılandırma değerlerini döndürür.

Flutter uygulamasına Firebase paketleri ekleme

Son kurulum adımı ilgili Firebase paketlerini Flutter projenize eklemektir. firebase_options.dart dosyası, henüz eklenmemiş Firebase paketlerine dayandığından hatalar içermelidir. Terminalde flutter-codelabs/firebase-emulator-suite/start adresindeki Flutter projesinin kökünde olduğunuzdan emin olun. Ardından aşağıdaki üç komutu çalıştırın:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

Bu noktada ihtiyacınız olan tek paket bunlar.

Firebase'i başlat

Eklenen paketleri ve DefaultFirebaseOptions.currentPlatform, kullanmak için main.dart dosyasındaki main fonksiyondaki kodu güncelleyin.

ana.dart

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );


 runApp(const MyApp());
}

Bu kod iki şey yapar.

1. WidgetsFlutterBinding.ensureInitialized() Flutter'a, Flutter çerçevesi tamamen başlatılıncaya kadar uygulama widget kodunu çalıştırmamasını söyler. Firebase, çerçevenin çalışmasını gerektiren yerel platform kanallarını kullanır.
2. Firebase.initializeApp Flutter uygulamanız ile Firebase projeniz arasında bir bağlantı kurar. DefaultFirebaseOptions.currentPlatform , oluşturulan firebase_options.dart dosyamızdan içe aktarılır. Bu statik değer, hangi platformda çalıştığınızı algılar ve ilgili Firebase anahtarlarına iletir.

4. İlk Firebase UI Kimlik Doğrulama sayfasını ekleyin

Auth için Firebase UI, uygulamanızdaki ekranların tamamını temsil eden widget'lar sağlar. Bu ekranlar uygulamanız genelinde Oturum Açma, Kayıt, Parolamı Unuttum, Kullanıcı Profili ve daha fazlası gibi farklı kimlik doğrulama akışlarını yönetir. Başlamak için uygulamanıza, ana uygulamaya yönelik kimlik doğrulama koruması görevi gören bir açılış sayfası ekleyin.

Malzeme veya Cupertino Uygulaması

FlutterFire UI, uygulamanızın MaterialApp veya CupertinoApp'a sarılmış olmasını gerektirir. Seçiminize bağlı olarak kullanıcı arayüzü, Material veya Cupertino widget'larının farklılıklarını otomatik olarak yansıtacaktır. Bu codelab için app.dart uygulamaya zaten eklenmiş olan MaterialApp kullanın.

uygulama.dart

import 'package:flutter/material.dart';
import 'auth_gate.dart';

class MyApp extends StatelessWidget {
 const MyApp({super.key});
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const AuthGate(),
   );
 }
}

Kimlik doğrulama durumunu kontrol edin

Oturum açma ekranını görüntüleyebilmeniz için önce kullanıcının kimliğinin geçerli olarak doğrulanıp doğrulanmadığını belirlemeniz gerekir. Bunu kontrol etmenin en yaygın yolu , Firebase Auth eklentisini kullanarak FirebaseAuth'un authStateChanges'ını dinlemektir.

Yukarıdaki kod örneğinde MaterialApp , kendi derleme yönteminde bir AuthGate widget'ı oluşturuyor. (Bu, FlutterFire UI tarafından sağlanmayan özel bir widget'tır.)

Bu widget'ın authStateChanges akışını içerecek şekilde güncellenmesi gerekiyor.

authStateChanges API, geçerli kullanıcıyla (oturum açmışlarsa) veya oturum açmamışlarsa null ile bir Stream döndürür. Uygulamamızda bu duruma abone olmak için Flutter'ın StreamBuilder widget'ını kullanabilir ve akışı ona iletebilirsiniz.

StreamBuilder , ilettiğiniz bir Akıştan gelen verilerin en son anlık görüntüsüne dayalı olarak kendisini oluşturan bir widget'tır. Akış yeni bir anlık görüntü yayınladığında otomatik olarak yeniden oluşturulur.

auth_gate.dart dosyasındaki kodu güncelleyin.

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [],
          );
        }

        return const HomeScreen();
      },
    );
  }
}

• StreamBuilder.stream , yukarıda belirtilen akış olan FirebaseAuth.instance.authStateChanged aktarılıyor ve kullanıcının kimliği doğrulanmışsa bir Firebase User nesnesi döndürecek. (Aksi takdirde null değerini döndürür.)
• Daha sonra kod, akıştaki değerin User nesnesini içerip içermediğini kontrol etmek için snapshot.hasData kullanıyor.
• Eğer yoksa SignInScreen widget'ını döndürür. Şu anda bu ekran hiçbir şey yapmıyor. Bu bir sonraki adımda güncellenecektir.
• Aksi takdirde, uygulamanın yalnızca kimliği doğrulanmış kullanıcıların erişebildiği ana kısmı olan HomeScreen değerini döndürür.

SignInScreen FlutterFire UI paketinden gelen bir widget'tır. Bu codelab'in bir sonraki adımının odak noktası bu olacak. Bu noktada uygulamayı çalıştırdığınızda boş bir oturum açma ekranı görmelisiniz.

5. Oturum Açma ekranı

FlutterFire kullanıcı arayüzü tarafından sağlanan SignInScreen widget'ı aşağıdaki işlevleri ekler:

• Kullanıcıların oturum açmasına izin verir
• Kullanıcılar şifrelerini unutursa "Şifrenizi mi unuttunuz?" seçeneğine dokunabilirler. ve şifrelerini sıfırlamak için bir forma yönlendirilecekler
• Bir kullanıcı henüz kayıtlı değilse "Kaydol"a dokunabilir ve kaydolmasına olanak tanıyan başka bir forma yönlendirilebilir.

Yine, bu yalnızca birkaç satır kod gerektirir. AuthGate widget'ındaki kodu hatırlayın:

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [
              EmailAuthProvider(), // new
            ],
          );
        }

        return const HomeScreen();
      },
    );
  }
}

SignInScreen widget'ı ve providers argümanı, yukarıda belirtilen tüm işlevleri elde etmek için gereken tek koddur. Artık 'e-posta' ve 'şifre' metin girişlerinin yanı sıra 'Oturum Aç' düğmesinin bulunduğu bir oturum açma ekranı görmelisiniz.

İşlevsel olmasına rağmen stilden yoksundur. Widget, oturum açma ekranının görünümünü özelleştirmek için parametreleri gösterir. Örneğin şirketinizin logosunu eklemek isteyebilirsiniz.

Oturum açma ekranını özelleştirin

başlık Oluşturucu

SignInScreen.headerBuilder bağımsız değişkenini kullanarak, oturum açma formunun üstüne istediğiniz widget'ları ekleyebilirsiniz. auth_gate.dart dosyasını şu kodla güncelleyin:

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('assets/flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

HeaderBuilder bağımsız değişkeni, FlutterFire UI paketinde tanımlanan HeaderBuilder türünde bir işlev gerektirir.

typedef HeaderBuilder = Widget Function(
 BuildContext context,
 BoxConstraints constraints,
 double shrinkOffset,
);

Bu bir geri arama olduğundan BuildContext ve BoxConstraints gibi kullanabileceğiniz değerleri ortaya çıkarır ve bir widget döndürmenizi gerektirir. Hangi widget'ı geri getirirseniz getirin, ekranın üst kısmında görüntülenir. Bu örnekte yeni kod, ekranın üst kısmına bir resim ekler. Uygulamanız artık bu şekilde görünmelidir.

Altyazı Oluşturucu

Oturum açma ekranı, ekranı özelleştirmenize olanak tanıyan üç ek parametreyi ortaya çıkarır: subtitleBuilder , footerBuilder ve sideBuilder .

subtitleBuilder , geri çağırma bağımsız değişkenlerinin AuthAction türünde bir eylem içermesi açısından biraz farklıdır. AuthAction , kullanıcının bulunduğu ekranın "oturum açma" ekranı mı yoksa "kaydolma" ekranı mı olduğunu tespit etmek için kullanabileceğiniz bir numaralandırmadır.

SubtitleBuilder'ı kullanmak için auth_gate.dart'taki kodu güncelleyin.

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
              EmailAuthProvider()
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

Uygulamayı yeniden yükleyin; şöyle görünmelidir

Altbilgi oluşturucu

FooterBuilder argümanı,subtitleBuilder ile aynıdır. Resimler yerine metin için tasarlandığından BoxConstraints veya shrinkOffset göstermez. (İstediğiniz herhangi bir widget'ı ekleyebilirsiniz.)

Bu kodla oturum açma ekranınıza bir alt bilgi ekleyin.

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider()
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }}

Yan İnşaatçı

SignInScreen.sidebuilder argümanı bir geri aramayı kabul eder ve bu sefer bu geri çağırmanın argümanları BuildContext ve double shrinkOffset . sideBuilder'ın döndürdüğü widget, oturum açma formunun solunda ve yalnızca geniş ekranlarda görüntülenecektir. Bu, etkili bir şekilde widget'ın yalnızca masaüstü ve web uygulamalarında görüntüleneceği anlamına gelir.

Dahili olarak FlutterFire kullanıcı arayüzü, başlık içeriğinin mi (cep telefonu gibi uzun ekranlarda) yoksa yan içeriğin mi (geniş ekranlarda, masaüstünde veya web'de) gösterilmesi gerektiğini belirlemek için bir kesme noktası kullanır. Özellikle, bir ekran 800 pikselden daha genişse, yan oluşturucu içeriği gösterilir, başlık içeriği gösterilmez. Ekranın genişliği 800 pikselden azsa bunun tersi doğrudur.

SideBuilder widget'larını eklemek için auth_gate.dart'taki kodu güncelleyin.

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }
       return const HomeScreen();
     },
   );
 }
}

Pencerenin genişliğini genişlettiğinizde uygulamanız artık böyle görünmelidir (Flutter web veya MacOS kullanıyorsanız).

Kullanıcı oluştur

Bu noktada bu ekranın tüm kodları tamamlandı. Ancak oturum açabilmeniz için önce bir Kullanıcı oluşturmanız gerekir. Bunu "Kayıt Ol" ekranıyla yapabilir veya Firebase konsolunda bir kullanıcı oluşturabilirsiniz.

Konsolu kullanmak için:

1. Firebase konsolundaki "Kullanıcılar" tablosuna gidin.
2. buraya tıklayın
3. 'flutterfire-ui-codelab'ı (veya farklı bir ad kullandıysanız başka bir projeyi) seçin. Bu tabloyu göreceksiniz:

2. "Kullanıcı ekle" düğmesini tıklayın.

3. Yeni kullanıcı için bir e-posta adresi ve şifre girin. Bu, aşağıdaki resimde girdiğim gibi sahte bir e-posta ve şifre olabilir. Bu işe yarayacaktır ancak sahte bir e-posta adresi kullanıyorsanız "Şifremi unuttum" işlevi çalışmayacaktır.

4. "Kullanıcı ekle"yi tıklayın

Artık Flutter uygulamanıza dönebilir ve oturum açma sayfası aracılığıyla bir kullanıcıyla oturum açabilirsiniz. Uygulamanız şöyle görünmeli:

6. Profil Ekranı

FlutterFire UI ayrıca bir ProfileScreen widget'ı da sağlar ve bu da size birkaç satır kodla birçok işlevsellik sunar.

Profil Ekranı widget'ı ekle

Metin düzenleyicinizde home.dart dosyasına gidin. Bu kodla güncelleyin:

ev.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => const ProfileScreen(),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Yeni dikkat edilmesi gereken kod, IconButton.isPressed method. Bu IconButton basıldığında uygulamanız yeni bir anonim rota oluşturur ve ona gider. Bu rota, MaterialPageRoute.builder geri çağrısından döndürülen ProfileScreen widget'ını görüntüleyecektir.

Uygulamanızı yeniden yükleyin ve sağ üstteki (uygulama çubuğundaki) simgeye basın; aşağıdaki gibi bir sayfa görüntülenecektir:

Bu, FlutterFire Kullanıcı Arayüzü sayfası tarafından sağlanan standart kullanıcı arayüzüdür. Tüm düğmeler ve metin alanları Firebase Auth'a bağlanmıştır ve kutudan çıktığı gibi çalışır. Örneğin, "Ad" metin alanına bir ad girdiğinizde FlutterFire kullanıcı arayüzü, FirebaseAuth.instance.currentUser?.updateDisplayName yöntemini çağırarak bu adı Firebase'e kaydedecektir.

Çıkış Yapılıyor

Şu anda "Oturumu kapat" düğmesine basarsanız uygulama değişmeyecektir. Oturumunuzu kapatacaktır ancak AuthGate widget'ına geri yönlendirilmeyeceksiniz. Bunu uygulamak için ProfileScreen.actions parametresini kullanın.

Öncelikle home.dart'taki kodu güncelleyin.

ev.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Artık ProfileScreen bir örneğini oluşturduğunuzda, bunun bir eylem listesini de ProfileScreen.actions bağımsız değişkenine iletirsiniz. Bu eylemler FlutterFireUiAction türündedir. FlutterFireUiAction alt türü olan birçok farklı sınıf vardır ve genel olarak bunları uygulamanıza farklı kimlik doğrulama durumu değişikliklerine tepki vermesini söylemek için kullanırsınız. SignedOutAction, Firebase kimlik doğrulama durumu currentUser'ın null olmasına dönüştüğünde verdiğiniz bir geri çağırma işlevini çağırır.

SignedOutAction tetiklendiğinde Navigator.of(context).pop() öğesini çağıran bir geri arama eklendiğinde uygulama önceki sayfaya gider. Bu örnek uygulamada, oturum açmış bir kullanıcı yoksa oturum açma sayfasını, kullanıcı varsa ana sayfayı gösteren yalnızca bir kalıcı rota vardır. Bu durum kullanıcı oturumu kapattığında meydana geldiğinden, uygulama Oturum Açma sayfasını görüntüler.

Profil Sayfasını Özelleştirin

Oturum Açma sayfasına benzer şekilde profil sayfası da özelleştirilebilir. İlk olarak, mevcut sayfamızın, kullanıcı profil sayfasına girdiğinde ana sayfaya geri dönme olanağı yoktur. ProfileScreen widget'ına bir AppBar vererek bu sorunu düzeltin.

ev.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
 const HomeScreen({super.key});

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       actions: [
         IconButton(
           icon: const Icon(Icons.person),
           onPressed: () {
             Navigator.push(
               context,
               MaterialPageRoute<ProfileScreen>(
                 builder: (context) => ProfileScreen(
                   appBar: AppBar(
                     title: const Text('User Profile'),
                   ),
                   actions: [
                     SignedOutAction((context) {
                       Navigator.of(context).pop();
                     })
                   ],
                 ),
               ),
             );
           },
         )
       ],
       automaticallyImplyLeading: false,
     ),
     body: Center(
       child: Column(
         children: [
           Image.asset('dash.png'),
           Text(
             'Welcome!',
             style: Theme.of(context).textTheme.displaySmall,
           ),
           const SignOutButton(),
         ],
       ),
     ),
   );
 }
}

ProfileScreen.appBar bağımsız değişkeni, Flutter Material paketinden bir AppBar widget'ını kabul eder, böylece oluşturduğunuz ve Scaffold aktardığınız diğer herhangi bir AppBar gibi ele alınabilir. Bu örnekte, otomatik olarak "geri" düğmesi ekleme şeklindeki varsayılan işlevsellik korunur ve ekranın artık bir başlığı vardır.

Çocukları Profil Ekranına Ekleme

ProfileScreen widget'ında ayrıca çocuklar adında isteğe bağlı bir bağımsız değişken bulunur. Bu bağımsız değişken, widget'ların bir listesini kabul eder ve bu widget'lar, ProfileScreen'i oluşturmak için dahili olarak zaten kullanılan bir Sütun widget'ının içine dikey olarak yerleştirilecektir. ProfileScreen oluşturma yöntemindeki bu Sütun widget'ı, ilettiğiniz çocukları "Oturumu kapat" düğmesinin üzerine yerleştirir.

Oturum açma ekranına benzer şekilde şirket logosunu burada göstermek için home.dart'taki kodu güncelleyin.

ev.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    appBar: AppBar(
                      title: const Text('User Profile'),
                    ),
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                    children: [
                      const Divider(),
                      Padding(
                        padding: const EdgeInsets.all(2),
                        child: AspectRatio(
                          aspectRatio: 1,
                          child: Image.asset('flutterfire_300x.png'),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Uygulamanızı yeniden yüklediğinizde ekranda şunu göreceksiniz:

7. Çoklu Platform Google Auth Oturum Açma

FlutterFire UI ayrıca Google, Twitter, Facebook, Apple ve Github gibi 3. taraf sağlayıcılarla kimlik doğrulaması yapmak için widget'lar ve işlevler sağlar.

Google kimlik doğrulamasıyla entegrasyon için resmi firebase_ui_oauth_google eklentisini ve yerel kimlik doğrulama akışını yönetecek bağımlılıklarını yükleyin. Terminalde flutter projenizin köküne gidin ve aşağıdaki komutu girin:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

Google Oturum Açma Sağlayıcısını Etkinleştir

Ardından Firebase Konsolunda Google sağlayıcısını etkinleştirin:

1. Konsoldaki Kimlik Doğrulama oturum açma sağlayıcıları ekranına gidin.
2. "Yeni sağlayıcı ekle"yi tıklayın.
3. "Google"ı seçin.
4. "Etkinleştir" etiketli anahtarı değiştirin ve "Kaydet"e basın.
5. Yapılandırma dosyalarının indirilmesiyle ilgili bilgileri içeren bir model görünürse "Bitti"yi tıklayın.
6. Google oturum açma sağlayıcısının eklendiğini doğrulayın.

Google oturum açma düğmesi ekleyin

Google ile oturum açma etkinken, stilize edilmiş bir Google oturum açma düğmesini görüntülemek için gereken widget'ı oturum açma sayfasına ekleyin. auth_gate.dart dosyasına gidin ve kodu aşağıdaki şekilde güncelleyin:

auth_gate.dart

import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart'; // new
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
 const AuthGate({super.key});

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
             EmailAuthProvider(),
             GoogleProvider(clientId: "YOUR_WEBCLIENT_ID"),  // new
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
           footerBuilder: (context, action) {
             return const Padding(
               padding: EdgeInsets.only(top: 16),
               child: Text(
                 'By signing in, you agree to our terms and conditions.',
                 style: TextStyle(color: Colors.grey),
               ),
             );
           },
           sideBuilder: (context, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
         );
       }

       return const HomeScreen();
     },
   );
 }
}

Buradaki tek yeni kod, SignInScreen widget yapılandırmasına GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") eklenmesidir.

Bunu ekledikten sonra uygulamanızı yeniden yükleyin; bir Google oturum açma düğmesi göreceksiniz.

Oturum açma düğmesini yapılandırın

Düğme ek yapılandırma olmadan çalışmaz. Flutter Web ile geliştirme yapıyorsanız, bunun çalışması için eklemeniz gereken tek adım budur. Diğer platformlar, birazdan tartışılacak ek adımlar gerektirir.

1. Firebase Konsolu'ndaki Kimlik Doğrulama sağlayıcıları sayfasına gidin.
2. Google sağlayıcısına tıklayın.
3. "Web SDK yapılandırması" genişletme paneline tıklayın.
4. Değeri 'Web istemci kimliği'nden kopyalayın
5. Metin düzenleyicinize dönün ve bu kimliği clientId adlı parametreye ileterek auth_gate.dart dosyasındaki GoogleProvider örneğini güncelleyin.

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

Web istemcisi kimliği girildikten sonra uygulamanızı yeniden yükleyin. "Google ile Oturum Aç" düğmesine bastığınızda, Google oturum açma akışında size yol gösterecek yeni bir pencere görünecektir (web kullanıyorsanız). Başlangıçta şöyle görünür:

iOS'u yapılandırın

Bunun iOS'ta çalışabilmesi için ek bir yapılandırma işlemi vardır.

1. Firebase konsolunda Proje Ayarları ekranına gidin. Firebase uygulamalarınızı listeleyen şuna benzer bir kart olacaktır:
2. iOS'a tıklayın. Uygulama adınızın benimkinden farklı olacağını unutmayın. Benimkinin "tamamlandı" dediği yerde, bu codelab ile birlikte takip etmek için flutter-codelabs/firebase-auth-flutterfire-ui/start projesini kullandıysanız, sizinki "başlat" diyecektir.
3. Gerekli yapılandırma dosyasını indirmek için "GoogleServices-Info.plist" yazan düğmeyi tıklayın.
4. İndirdiğiniz dosyayı adlı dizine sürükleyip bırakın. Flutter projenizde /ios/Runner .
5. Projenizin kökünden aşağıdaki terminal komutunu çalıştırarak Xcode'u açın:

ios/Runner.xcworkspace'i açın

6. Runner dizinine sağ tıklayın ve "Runner"a Dosya Ekle'yi seçin.
7. Dosya yöneticisinden GoogleService-Info.plist'i seçin.
8. Metin düzenleyicinize geri döndüğünüzde (Xcode değil), aşağıdaki CFBundleURLTips niteliklerini [my_project]/ios/Runner/Info.plist dosyasına ekleyin.

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
        <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                        <!-- TODO Replace this value: -->
                        <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
                        <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
                </array>
        </dict>
</array>
<!-- End of the Google Sign-in Section -->

Flutter uygulamanız iOS'ta zaten çalışıyorsa, uygulamayı tamamen kapatmanız ve ardından uygulamayı yeniden çalıştırmanız gerekir. Aksi takdirde uygulamayı iOS'ta çalıştırın.

8. Tebrikler!

Flutter codelab için Firebase Auth kullanıcı arayüzünü tamamladınız. Bu Codelab'in tamamlanmış kodunu github'daki "complete" dizininde bulabilirsiniz: Flutter Codelabs

Neleri ele aldık?

• Firebase'i kullanmak için Flutter uygulamasını kurma
• Firebase konsolunda Firebase projesi oluşturma
• FlutterFire CLI'si
• Firebase CLI
• Firebase Kimlik Doğrulamasını Kullanma
• Flutter uygulamanızda Firebase kimlik doğrulamasını kolayca gerçekleştirmek için FlutterFire kullanıcı arayüzünü kullanma

Sonraki adımlar

• Flutter'da Firestore ve Kimlik Doğrulamayı kullanma hakkında daha fazla bilgi edinin: Flutter Codelab için Firebase'i tanıyın
• Flutter uygulamanızı oluşturmaya yönelik diğer Firebase araçlarını keşfedin:
• Bulut depolama
• Bulut İşlevleri
• Gerçek Zamanlı Veritabanı

Daha fazla bilgi edin

• Firebase sitesi: firebase.google.com
• Flutter'ın sitesi: flutter.dev
• FlutterFire Firebase Flutter widget'ları: firebase.flutter.dev
• Firebase'in YouTube kanalı
• Flutter'ın YouTube kanalı

Sparky sizinle kutlamak için burada!