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

1. Başlamadan önce

Bu codelab'de, FlutterFire UI paketini kullanarak Flutter uygulamanıza Firebase Authentication'ı nasıl ekleyeceğinizi öğreneceksiniz. Bu paketle, Flutter uygulamasına hem e-posta ve şifre kimlik doğrulaması hem de Google ile oturum açma kimlik doğrulaması ekleyeceksiniz. Ayrıca, 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.

Ön koşullar

Bu codelab'de, Flutter ile ilgili biraz deneyiminiz olduğu varsayılır. Aksi takdirde, önce temel bilgileri öğrenmeniz önerilir. Aşağıdaki bağlantılar faydalı olabilir:

• Flutter Widget Çerçevesi Turu
• Write Your First Flutter App, part 1 (İlk Flutter Uygulamanızı Yazma, 1. Bölüm) codelab'ini deneyin.

Ayrıca Firebase deneyiminiz de olmalıdır ancak daha önce bir Flutter projesine Firebase eklememiş olmanız sorun değildir. Firebase konsolunu bilmiyorsanız veya Firebase'i ilk kez kullanıyorsanız önce aşağıdaki bağlantılara göz atın:

• Firebase ile İlgili Temel Bilgiler belgeleri
• Flutter ile Firebase'i Tanıyalım Codelab'i inceleyin.

Oluşturacaklarınız

Bu codelab'de, kimlik doğrulama için Firebase'i kullanarak bir Flutter uygulaması için kimlik doğrulama akışı oluşturma adımları açıklanmaktadır. Uygulamada giriş ekranı, "Kaydol" ekranı, şifre kurtarma ekranı ve kullanıcı profili ekranı bulunur.

Neler öğreneceksiniz?

Bu codelab'de aşağıdaki konular ele alınmaktadır:

• Firebase'i Flutter uygulamasına ekleme
• Firebase konsolu kurulumu
• Firebase'i uygulamanıza eklemek için Firebase CLI'yı kullanma
• Dart'ta Firebase yapılandırması oluşturmak için FlutterFire CLI'yı kullanma
• Flutter uygulamanıza Firebase Authentication ekleme
• Konsolda Firebase Authentication kurulumu
• firebase_ui_auth paketiyle e-posta ve şifreyle oturum açma özelliğini ekleme
• firebase_ui_auth paketiyle kullanıcı kaydı ekleme
• "Şifrenizi mi unuttunuz?" sayfası ekleme
• Google ile oturum açma özelliğini firebase_ui_auth ile ekleme
• Uygulamanızı birden fazla oturum açma sağlayıcısıyla çalışacak şekilde yapılandırma
• firebase_ui_auth paketiyle uygulamanıza kullanıcı profili ekranı ekleme

Bu codelab, özellikle firebase_ui_auth paketini kullanarak sağlam bir kimlik doğrulama sistemi eklemeyle ilgilidir. Gördüğünüz gibi, yukarıdaki tüm özelliklere sahip bu uygulamanın tamamı yaklaşık 100 satırlık kodla uygulanabilir.

Gerekenler

• Flutter hakkında çalışma bilgisi ve SDK'nın yüklü olması
• Bir metin düzenleyici (Flutter, JetBrains IDE'leri, Android Studio ve VS Code'u destekler)
• Google Chrome tarayıcı 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ı varsayar.)

2. Firebase projesi oluşturma ve ayarlama

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

Firebase projesi oluşturma

1. Google Hesabınızı kullanarak Firebase konsolunda oturum açın.
2. Yeni bir proje oluşturmak için düğmeyi tıklayın ve ardından bir proje adı girin (örneğin, FlutterFire-UI-Codelab).
   

   Bu proje adı, Firebase arayüzlerinde görünen ad olarak kullanılır ve Firebase, bu proje adına dayalı olarak benzersiz bir proje kimliğini otomatik olarak oluşturur. Tercih ettiğiniz proje kimliğini ayarlamak için Düzenle simgesini tıklayabilirsiniz. Ancak proje oluşturulduktan sonra bu kimliği değiştiremezsiniz.

   Proje kimliğinizi unutmayın. Firebase projenizi Firebase CLI'de tanımlamak için daha sonra bu kimliğe ihtiyacınız olacak. Kimliğinizi unutursanız daha sonra Proje Ayarları'nda bulabilirsiniz.

3. Devam'ı tıklayın.
4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
5. (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
6. Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle, Google Analytics seçeneğini devre dışı bırakın.
7. Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı tıklayın.

Firebase projeleri hakkında daha fazla bilgi edinmek için Firebase projelerini anlama başlıklı makaleyi inceleyin.

Firebase Authentication için e-posta ile oturum açmayı etkinleştirme

Geliştirdiğiniz uygulama, kullanıcılarınızın uygulamanıza giriş yapmasına olanak tanımak için Firebase Authentication'ı kullanıyor. Ayrıca yeni kullanıcıların Flutter uygulamasından kaydolmasına da olanak tanıyor.

Firebase Authentication, Firebase konsolu kullanılarak etkinleştirilmelidir ve etkinleştirildikten sonra özel yapılandırma gerektirir.

Kullanıcıların web uygulamasında oturum açmasına izin vermek için önce E-posta/Şifre oturum açma yöntemini kullanırsınız. Daha sonra Google ile oturum açma yöntemini ekleyeceksiniz.

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

3. Flutter uygulamasını ayarlama

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

Başlangıç kodunu alma

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

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

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

gh repo clone flutter/codelabs flutter-codelabs

Örnek kod, makinenizdeki flutter-codelabs dizinine klonlanmalıdır. Bu dizinde, bir dizi codelab'in kodları bulunur. Bu codelab'in kodu flutter-codelabs/firebase-auth-flutterfire-ui alt dizinindedir.

flutter-codelabs/firebase-auth-flutterfire-ui dizini iki Flutter projesi içeriyor. Birinin adı complete, diğerinin adı ise start. start dizini, tamamlanmamış bir proje içerir ve en çok zamanı burada geçirirsiniz.

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

İlerlemek veya bir şeyin tamamlandığında nasıl görüneceğini görmek istiyorsanız çapraz referans için complete adlı dizine bakın.

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

Firebase CLI'yi yükleyin

Firebase CLI, Firebase projelerinizi yönetmek için araçlar sunar. Biraz sonra yükleyeceğiniz FlutterFire CLI için CLI gereklidir.

CLI'yı yüklemenin çeşitli yolları vardır. İşletim sisteminiz için mevcut tüm seçenekleri firebase.google.com/docs/cli adresinde inceleyin.

CLI'yı yükledikten sonra Firebase ile kimliğinizi doğrulamanız gerekir.

1. Aşağıdaki komutu çalıştırarak Google Hesabınızı kullanarak Firebase'e giriş yapın:

   firebase login
   

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

   Not: firebase login komutu, makinenizdeki localhost'a bağlanan bir web sayfası açar. Uzak bir makine kullanıyorsanız ve localhost'a erişiminiz yoksa komutu --no-localhost işaretiyle çalıştırın.

3. Firebase projelerinizi listeleyerek CLI'nın 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österilen liste, Firebase konsolunda listelenen Firebase projeleriyle aynı olmalıdır. En az flutterfire-ui-codelab. görmelisiniz.

FlutterFire CLI'yı yükleme

FlutterFire CLI, Flutter uygulamanızdaki tüm desteklenen platformlarda Firebase'in yükleme sürecini kolaylaştıran bir araçtır. Firebase CLI üzerine kurulmuştur.

Öncelikle CLI'yı yükleyin:

dart pub global activate flutterfire_cli

CLI'nın yüklendiğinden emin olun. Aşağıdaki komutu çalıştırın ve KSA'nın yardım menüsünü çıkardığını doğrulayın.

flutterfire --help

Firebase projenizi Flutter uygulamanıza ekleme

FlutterFire'ı yapılandırma

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

flutterfire configure

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

Aşağıdaki ekran görüntülerinde, yanıtlamanız gereken istemler gösterilmektedir.

1. Kullanmak istediğiniz projeyi seçin. Bu durumda, flutterfire-ui-codelab kullanın.
2. Kullanmak istediğiniz platformları seçin. Bu codelab'de, web, iOS ve Android için Flutter'da Firebase Authentication'ı yapılandırma adımları yer almaktadır. Ancak Firebase projenizi tüm seçenekleri kullanacak şekilde ayarlayabilirsiniz.
3. Bu ekran görüntüsünde, işlemin sonundaki çıkış gösterilmektedir. Firebase'i biliyorsanız konsolda platform uygulamaları (ör. Android uygulaması) oluşturmanız gerekmediğini ve FlutterFire CLI'nin bunu sizin için yaptığını fark edeceksiniz.

Bu işlem tamamlandığında metin düzenleyicinizdeki Flutter uygulamasına bakın. FlutterFire CLI, firebase_options.dart adlı bir dosyayı değiştirdi. Bu dosya, her platform için gereken Firebase yapılandırmasını içeren statik değişkenlere sahip FirebaseOptions adlı bir sınıf içerir. flutterfire configure kampanyasını çalıştırırken tüm platformları seçtiyseniz web, android, ios ve macos adlı statik değerleri görürsünüz.

lib/firebase_options.dart

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

class DefaultFirebaseOptions {
  static FirebaseOptions get currentPlatform {
    if (kIsWeb) {
      return web;
    }

    switch (defaultTargetPlatform) {
      case TargetPlatform.android:
        return android;
      case TargetPlatform.iOS:
        return ios;
      case TargetPlatform.macOS:
        return macos;
      default:
        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.firebasestorage.app',
    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.firebasestorage.app',
  );

  static const FirebaseOptions ios = FirebaseOptions(
    apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
    appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
    messagingSenderId: '963656261848',
    projectId: 'flutterfire-ui-codelab',
    storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
    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.firebasestorage.app',
    iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
    iosBundleId: 'com.example.complete',
  );
}

Not: Dosyanız, API anahtarları için farklı değerler içermelidir. Bu anahtarları herkese açık olarak paylaşmak tamamen güvenlidir. Frank van Puffelen'in StackOverflow'daki bir yayında bu durumun nedenlerini açıkladığı yazıyı okuyun.

Firebase, bir Firebase projesindeki belirli bir platform için belirli bir derlemeyi ifade etmek üzere uygulama kelimesini kullanır. Örneğin, FlutterFire-ui-codelab adlı Firebase projesinde birden fazla uygulama vardır: Android, iOS, macOS ve Web için birer uygulama.

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

Firebase paketlerini Flutter uygulamasına ekleme

Son kurulum adımı, ilgili Firebase paketlerini Flutter projenize eklemektir. firebase_options.dart dosyası, henüz eklenmemiş Firebase paketlerini kullandığı için hatalı olmalıdır. Terminalde, flutter-codelabs/firebase-emulator-suite/start konumunda Flutter projesinin kök dizininde olduğunuzdan emin olun. Ardından, aşağıdaki üç komutu çalıştırın:

flutter pub add firebase_core firebase_auth firebase_ui_auth

Bu aşamada ihtiyacınız olan tek paketler bunlardır.

Firebase'i başlatma

Eklenen paketleri kullanmak için DefaultFirebaseOptions.currentPlatform, işlevindeki kodu main dosyasında güncelleyin.main.dart

lib/main.dart

import 'package:firebase_core/firebase_core.dart';                  // Add this import
import 'package:flutter/material.dart';

import 'app.dart';
import 'firebase_options.dart';                                     // And this import

// TODO(codelab user): Get API key
const clientId = 'YOUR_CLIENT_ID';

void main() async {
  // Add from here...
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  // To here.

  runApp(const MyApp(clientId: clientId));
}

Bu kod iki işe yarar.

1. WidgetsFlutterBinding.ensureInitialized(), Flutter çerçevesi tamamen başlatılana kadar Flutter'a uygulama widget'ı kodunu çalıştırmaya başlamamasını söyler. Firebase, platformun çalışmasını gerektiren yerel platform kanallarını kullanır.
2. Firebase.initializeApp, Flutter uygulamanız ile Firebase projeniz arasında bağlantı oluşturur. DefaultFirebaseOptions.currentPlatform, oluşturduğumuz firebase_options.dart dosyasından içe aktarılır. Bu statik değer, hangi platformda çalıştığınızı algılar ve ilgili Firebase anahtarlarını iletir.

4. İlk Firebase kullanıcı arayüzü kimlik doğrulama sayfasını ekleme

Auth için Firebase UI, uygulamanızdaki ekranların tamamını temsil eden widget'lar sağlar. Bu ekranlar, uygulamanızdaki farklı kimlik doğrulama akışlarını (ör. oturum açma, kayıt, şifremi unuttum, kullanıcı profili) 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.

Material veya Cupertino uygulaması

FlutterFire UI'nin kullanılabilmesi için uygulamanızın MaterialApp veya CupertinoApp ile sarmalanması gerekir. Seçiminize bağlı olarak kullanıcı arayüzü, Material veya Cupertino widget'larındaki farklılıkları otomatik olarak yansıtır. Bu codelab'de, app.dart uygulamasında zaten eklenmiş olan MaterialApp öğesini kullanın.

lib/app.dart

import 'package:flutter/material.dart';

import 'auth_gate.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.clientId});

  final String clientId;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: AuthGate(clientId: clientId),
    );
  }
}

Kimlik doğrulama durumunu kontrol etme

Oturum açma ekranı göstermeden önce kullanıcının kimliğinin doğrulanıp doğrulanmadığını belirlemeniz gerekir. Bunu kontrol etmenin en yaygın yolu, Firebase Auth eklentisini kullanarak FirebaseAuth'nın authStateChanges değerini dinlemektir.

Yukarıdaki kod örneğinde, MaterialApp, build 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, oturum açmışsa geçerli kullanıcıyı, oturum açmamışsa boş değeri içeren bir Stream döndürür. Uygulamamızda bu duruma abone olmak için Flutter'ın StreamBuilder widget'ını kullanabilir ve akışı buna iletebilirsiniz.

StreamBuilder, kendisine ilettiğiniz bir akıştan alınan verilerin en son anlık görüntüsüne göre kendini oluşturan bir widget'tır. Stream yeni bir anlık görüntü yayınladığında otomatik olarak yeniden oluşturulur.

auth_gate.dart içindeki kodu güncelleyin.

lib/auth_gate.dart

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

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key, required this.clientId});

  final String clientId;

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

        return const HomeScreen();
      },
    );                                                                 // To here.
  }
}

• StreamBuilder.stream, yukarıda bahsedilen akış olan FirebaseAuth.instance.authStateChanged iletilir. Bu akış, kullanıcı kimlik doğrulaması yaptıysa Firebase User nesnesini, aksi takdirde null değerini döndürür.
• Ardından, kod, akıştan gelen değerin User nesnesini içerip içermediğini kontrol etmek için snapshot.hasData kullanıyor.
• Yoksa SignInScreen widget'ı döndürülür. Şimdilik bu ekran herhangi bir işlem yapmaz. Bir sonraki adımda güncellenecektir.
• Aksi takdirde, yalnızca kimliği doğrulanmış kullanıcıların erişebileceği uygulamanın ana bölümü olan HomeScreen değerini döndürür.

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

5. Oturum açma ekranı

FlutterFire UI tarafından sağlanan SignInScreen widget'ı aşağıdaki işlevleri ekler:

• Kullanıcıların oturum açmasına izin verir
• Şifrelerini unutan kullanıcılar "Şifrenizi mi unuttunuz?"a dokunarak şifrelerini sıfırlayabilecekleri bir forma yönlendirilir.
• Henüz kayıtlı olmayan kullanıcılar "Kaydol"a dokunarak kayıt olmalarını sağlayan başka bir forma yönlendirilebilir.

Bu işlem için de yalnızca birkaç satır kod gerekir. AuthGate widget'ında kodu hatırlayın:

lib/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, required this.clientId});

  final String clientId;

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

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

Yukarıda bahsedilen tüm işlevleri elde etmek için gereken tek kod, SignInScreen widget'ı ve providers bağımsız değişkenidir. 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 olsa da stil eksik. Widget, oturum açma ekranının görünümünü özelleştirmek için parametreler sunar. Örneğin, şirketinizin logosunu ekleyebilirsiniz.

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

headerBuilder

SignInScreen.headerBuilder bağımsız değişkenini kullanarak oturum açma formunun üstüne istediğiniz widget'ları ekleyebilirsiniz. Bu widget yalnızca mobil cihazlar gibi dar ekranlarda gösterilir. Geniş ekranlarda, bu codelab'in ilerleyen bölümlerinde ele alınan SignInScreen.sideBuilder öğesini kullanabilirsiniz.

lib/auth_gate.dart dosyasını şu kodla güncelleyin:

lib/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, required this.clientId});

  final String clientId;

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

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

The headerBuilder argument requires a function of the type HeaderBuilder, which
is defined in the FlutterFire UI package.

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

Geri çağırma işlevi olduğundan, kullanabileceğiniz BuildContext ve BoxConstraints gibi değerleri kullanıma sunar ve bir widget döndürmenizi gerektirir. Geri döndürdüğünüz widget ekranın üst kısmında gösterilir. Bu örnekte, yeni kod ekranın üst kısmına bir resim ekliyor. Uygulamanız artık aşağıdaki gibi görünecektir.

Altyazı Oluşturucu

Oturum açma ekranı, ekranı özelleştirmenize olanak tanıyan üç ek parametre (subtitleBuilder, footerBuilder ve sideBuilder) sunar.

Geri çağırma bağımsız değişkenleri AuthAction türünde bir işlem içerdiğinden subtitleBuilder biraz farklıdır. AuthAction, kullanıcının bulunduğu ekranın "oturum açma" ekranı mı yoksa "kaydolma" ekranı mı olduğunu algılamak için kullanabileceğiniz bir enum'dur.

auth_gate.dart dosyasındaki kodu subtitleBuilder kullanacak şekilde güncelleyin.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            subtitleBuilder: (context, action) {                     // Add from here...
              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!'),
              );
            },                                                       // To here.
          );
        }

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

Altbilgi oluşturucu

footerBuilder bağımsız değişkeni, subtitleBuilder ile aynıdır. Resimler için değil, metinler için tasarlandığından BoxConstraints veya shrinkOffset karakterlerini göstermez. Elbette istediğiniz widget'ı ekleyebilirsiniz.

Bu kodu kullanarak oturum açma ekranınıza altbilgi ekleyin.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            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) {                       // Add from here...
              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),
                ),
              );
            },                                                       // To here.
          );
        }

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

Side Builder

SignInScreen.sidebuilder bağımsız değişkeni bir geri çağırmayı kabul eder ve bu kez geri çağırmanın bağımsız değişkenleri BuildContext ve double shrinkOffset olur. sideBuilder tarafından döndürülen widget, oturum açma formunun solunda ve yalnızca geniş ekranlarda gösterilir. Bu, widget'ın yalnızca masaüstü ve web uygulamalarında gösterileceği anlamına gelir.

FlutterFire UI, dahili olarak başlık içeriğinin (mobil gibi uzun ekranlarda) veya yan içeriğin (masaüstü ya da web gibi geniş ekranlarda) gösterilip gösterilmeyeceğ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 ve başlık içeriği gösterilmez. Ekranın genişliği 800 pikselden azsa bunun tersi geçerlidir.

auth_gate.dart dosyasındaki kodu, sideBuilder widget'larını ekleyecek şekilde güncelleyin.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            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 artırdığınızda uygulamanız (Flutter web veya macOS kullanıyorsanız) artık aşağıdaki gibi görünmelidir.

Kullanıcı oluşturma

Bu noktada, bu ekranla ilgili tüm kodlar tamamlanmıştır. Ancak oturum açabilmeniz için önce bir kullanıcı oluşturmanız gerekir. Bu işlemi "Kaydol" ekranında yapabilir veya Firebase konsolunda kullanıcı oluşturabilirsiniz.

Konsolu kullanmak için:

1. Firebase konsolundaki"Kullanıcılar" tablosuna gidin. "flutterfire-ui-codelab"ı veya farklı bir ad kullandıysanız başka bir projeyi seçin. Şu tabloyu görürsünüz:
2. "Kullanıcı ekle" düğmesini tıklayın.
3. Yeni kullanıcı için bir e-posta adresi ve şifre girin. Aşağıdaki resimde gösterildiği gibi, bu sahte bir e-posta adresi ve şifre olabilir. Bu yöntem işe yarar ancak sahte bir e-posta adresi kullanırsanız "Şifremi unuttum" işlevi çalışmaz.
4. "Kullanıcı ekle"yi tıklayın.

Artık Flutter uygulamanıza dönebilir ve oturum açma sayfasını kullanarak bir kullanıcının oturumunu açabilirsiniz. Uygulamanız aşağıdaki gibi görünmelidir:

6. Profil Ekranı

FlutterFire UI ayrıca ProfileScreen widget'ı da sağlar. Bu widget, birkaç satırlık kodla birçok işlev sunar.

ProfileScreen widget'ı ekleme

Metin düzenleyicinizde home.dart dosyasına gidin. Aşağıdaki kodla güncelleyin:

lib/home.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: [
            SizedBox(width: 250, child: Image.asset('assets/dash.png')),
            Text('Welcome!', style: Theme.of(context).textTheme.displaySmall),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Yeni not kodu, IconButton.isPressed yöntemine iletilen geri çağırmadır. Bu IconButton düğmesine basıldığında uygulamanız yeni bir anonim rota oluşturur ve bu rotaya gider. Bu rota, MaterialPageRoute.builder geri çağırma işlevinden döndürülen ProfileScreen widget'ını gösterir.

Uygulamanızı yeniden yükleyin ve sağ üstteki simgeye (uygulama çubuğunda) basın. Bu işlem, aşağıdaki gibi bir sayfa gösterir:

Bu, FlutterFire UI sayfası tarafından sağlanan standart kullanıcı arayüzüdür. Tüm düğmeler ve metin alanları Firebase Auth'a bağlanır ve hemen kullanılabilir. Örneğin, "Ad" metin alanına bir ad girebilirsiniz. FlutterFire UI, FirebaseAuth.instance.currentUser?.updateDisplayName yöntemini çağırarak bu adı Firebase'e kaydeder.

Not: Bu örnekte, "Doğrulama e-postası gönder" düğmesi, [e-mail] gibi sahte bir e-posta adresine e-posta gönderir. Bu işlevin çalıştığını doğrulamak için e-posta erişiminizin olduğu bir e-posta adresiyle kullanıcı oluşturun.

Oturumu Kapatın

Şu anda "Oturumu kapat" düğmesine bastığınızda uygulama değişmez. Oturumunuz kapatılır ancak AuthGate widget'ına geri yönlendirilmezsiniz. Bunu uygulamak için ProfileScreen.actions parametresini kullanın.

Öncelikle home.dart dosyasındaki kodu güncelleyin.

lib/home.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: [
            SizedBox(width: 250, child: Image.asset('assets/dash.png')),
            Text('Welcome!', style: Theme.of(context).textTheme.displaySmall),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Artık ProfileScreen öğesinin bir örneğini oluşturduğunuzda, ProfileScreen.actions bağımsız değişkenine bir işlem listesi de iletirsiniz. Bu işlemler FlutterFireUiAction türündedir. FlutterFireUiAction öğesinin alt türleri olan birçok farklı sınıf vardır. Bunları genellikle 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ıyla değiştiğinde sağladığınız bir geri çağırma işlevini çağırır.

SignedOutAction tetiklendiğinde Navigator.of(context).pop() işlevini çağıran bir geri çağırma işlevi ekleyerek uygulamanın önceki sayfaya gitmesini sağlayabilirsiniz. Bu örnek uygulamada yalnızca bir kalıcı rota vardır. Bu rota, oturum açmış bir kullanıcı yoksa oturum açma ekranını, oturum açmış bir kullanıcı varsa ana sayfayı gösterir. Bu durum, kullanıcı oturumu kapattığında gerçekleştiğinden uygulama, oturum açma ekranını gösterir.

Profil sayfasını özelleştirme

Oturum açma ekranına benzer şekilde, profil sayfası da özelleştirilebilir. İlk olarak, mevcut sayfamızda kullanıcı profil sayfasına girdikten sonra ana sayfaya geri dönmenin bir yolu yok. ProfileScreen widget'ına AppBar vererek bu sorunu düzeltebilirsiniz.

lib/home.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: [
            SizedBox(width: 250, child: Image.asset('assets/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. Bu nedenle, oluşturup Scaffold öğesine ilettiğiniz diğer AppBar widget'ları gibi değerlendirilebilir. Bu örnekte, "geri" düğmesini otomatik olarak ekleme işlevinin varsayılan davranışı korunur ve ekranda artık bir başlık bulunur.

Profil ekranına çocuk ekleme

ProfileScreen widget'ında children adlı isteğe bağlı bir bağımsız değişken de bulunur. Bu bağımsız değişken, bir widget listesini kabul eder ve bu widget'lar, ProfileScreen'ı oluşturmak için dahili olarak kullanılan bir Column widget'ının içine dikey olarak yerleştirilir. ProfileScreen oluşturma yöntemindeki bu Column widget'ı, kendisine ilettiğiniz alt öğeleri "Oturumu kapat" düğmesinin üzerine yerleştirir.

home.dart içindeki kodu, oturum açma ekranına benzer şekilde şirket logosunu burada gösterecek şekilde güncelleyin.

lib/home.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: [
            SizedBox(width: 250, child: Image.asset('assets/dash.png')),
            Text('Welcome!', style: Theme.of(context).textTheme.displaySmall),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

Uygulamanızı yeniden yüklediğinizde ekranda şu mesajı görürsünüz:

7. Çok platformlu Google kimlik doğrulama oturumu açma

FlutterFire UI, Google, Twitter, Facebook, Apple ve GitHub gibi üçüncü taraf sağlayıcılarla kimlik doğrulama için widget'lar ve işlevler de sunar.

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

flutter pub add google_sign_in firebase_ui_oauth_google

Google ile oturum açma sağlayıcısını etkinleştirme

Ardından, Firebase konsolunda Google sağlayıcıyı etkinleştirin:

1. Konsolda 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ı açın ve "Kaydet"i tıklayın.
5. Yapılandırma dosyalarını indirme hakkında bilgilerin yer aldığı bir modal görünürse "Bitti"yi tıklayın.
6. Google ile giriş sağlayıcısının eklendiğini onaylayın.

Google ile oturum açma düğmesi ekleme

Google ile oturum açma etkinleştirilmişken, stilize edilmiş bir Google ile oturum açma düğmesi görüntülemek için gereken widget'ı oturum açma ekranına ekleyin. auth_gate.dart dosyasına gidin ve kodu aşağıdaki gibi güncelleyin:

lib/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';  // Add this import
import 'package:flutter/material.dart';

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key, required this.clientId});

  final String clientId;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [
              EmailAuthProvider(),
              GoogleProvider(clientId: clientId),                         // Add this line
            ],
            headerBuilder: (context, constraints, shrinkOffset) {
              return Padding(
                padding: const EdgeInsets.all(20),
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Image.asset('assets/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.

Bu kodu ekledikten sonra uygulamanızı yeniden yükleyin. Google ile oturum açma düğmesini görürsünüz.

Oturum açma düğmesini yapılandırma

Düğme, ek yapılandırma olmadan çalışmaz. Flutter Web ile geliştirme yapıyorsanız bu özelliğin çalışması için eklemeniz gereken tek adım budur. Diğer platformlarda ek adımlar gerekir. Bu adımlar birazdan açıklanacaktır.

1. Firebase konsolunda Kimlik doğrulama sağlayıcıları sayfasına gidin.
2. Google sağlayıcıyı tıklayın.
3. "Web SDK yapılandırması" genişletme panelini tıklayın.
4. "Web istemcisi kimliği" değerini 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 istemci kimliği girildikten sonra uygulamanızı yeniden yükleyin. Web'i kullanıyorsanız"Google ile oturum aç" düğmesine bastığınızda Google oturum açma akışında size yol gösterecek yeni bir pencere açılır. Başlangıçta şöyle görünür:

iOS'i yapılandırma

Bu özelliğin iOS'te çalışması için ek bir yapılandırma işlemi gerekir.

1. Firebase konsolunda Proje Ayarları ekranına gidin. Firebase uygulamalarınızın listelendiği bir kart gösterilir. Bu kart şu şekilde görünür:
2. iOS'i seçin. Uygulama adınızın, ekran görüntüsünde gösterilenden farklı olacağını unutmayın. Ekran görüntüsünde "complete" (tamamlandı) yazan yerde, bu codelab'i takip etmek için flutter-codelabs/firebase-auth-flutterfire-ui/start projesini kullandıysanız "start" (başlat) yazacaktır.
3. Gerekli yapılandırma dosyasını indirmek için GoogleServices-Info.plist düğmesini tıklayın.
4. İndirilen dosyayı Flutter projenizdeki /ios/Runner adlı dizine sürükleyin.
5. Projenizin kök dizininden aşağıdaki terminal komutunu çalıştırarak Xcode'u açın: open ios/Runner.xcworkspace
6. Runner dizinini sağ tıklayın ve Add Files to "Runner" ("Runner"a Dosya Ekle) seçeneğini belirleyin.
7. Dosya yöneticisinden GoogleService-Info.plist simgesini seçin.
8. Metin düzenleyicinize (Xcode olmayan) geri dönün ve aşağıdaki CFBundleURLTypes özelliklerini 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 -->
   

9. Web kurulumunda eklediğiniz GoogleProvider.clientId değerini, Firebase iOS istemci kimliğinizle ilişkili istemci kimliğiyle değiştirmeniz gerekir. Öncelikle bu kimliği firebase_options.dart sabitinin bir parçası olarak iOS dosyasında bulabilirsiniz. iOSClientId parametresine iletilen değeri kopyalayın.

   static const FirebaseOptions ios = FirebaseOptions(
     apiKey: 'YOUR API KEY',
     appId: 'YOUR APP ID',
     messagingSenderId: '',
     projectId: 'PROJECT_ID',
     storageBucket: 'PROJECT_ID.firebasestorage.app',
     iosClientId: 'IOS CLIENT ID', // Find your iOS client Id here.
     iosBundleId: 'com.example.BUNDLE',
   );
   

10. Bu değeri lib/main.dart dosyasındaki clientId değişkenine yapıştırın.

lib/main.dart

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

import 'app.dart';
import 'firebase_options.dart';

const clientId = 'YOUR_CLIENT_ID'; // Replace this value with your Client ID.

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

  runApp(const MyApp(clientId: clientId));
}

Flutter uygulamanız iOS'te zaten çalışıyorsa uygulamayı tamamen kapatıp yeniden çalıştırmanız gerekir. Aksi takdirde, uygulamayı iOS'te çalıştırın.

8. Tebrikler!

Flutter için Firebase Auth kullanıcı arayüzü codelab'ini tamamlamış olmanız gerekir . Bu Codelab'in tamamlanmış kodunu GitHub'daki firebase-auth-flutterfire-ui/complete dizininde bulabilirsiniz.

İşlediğimiz konular

• Firebase'i kullanmak için Flutter uygulaması oluşturma
• Firebase konsolunda Firebase projesi oluşturma
• FlutterFire CLI
• Firebase CLI
• Firebase Authentication'ı kullanma
• Flutter uygulamanızda Firebase kimlik doğrulamasını işlemek için FlutterFire UI'yi kullanma

Sonraki adımlar

• Flutter'da Firestore ve Authentication'ı kullanma hakkında daha fazla bilgi edinin: Get to know Firebase for Flutter Codelab (Flutter için Firebase'i Tanıma Codelab'i)
• Flutter uygulamanızı oluşturmak için diğer Firebase araçlarını keşfedin:
  • Cloud Storage
  • Cloud Functions
  • Realtime Database

Daha fazla bilgi

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

Sparky sizinle birlikte kutlama yapmak için burada!