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 deneyiminizin olduğu varsayılır. Aksi takdirde, önce temel bilgileri öğrenmeniz gerekebilir. Aşağıdaki bağlantılar faydalı olabilir:

• Flutter Widget Framework turuna katılın.
• Write Your First Flutter App, part 1 (İlk Flutter Uygulamanızı Yazma, 1. Bölüm) adlı codelab'i 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ıma codelab'i.

Ne oluşturacaksınız?

Bu codelab'de, kimlik doğrulama için Firebase'i kullanarak Flutter uygulaması için kimlik doğrulama akışı oluşturma işlemi adım adım açıklanı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:

• Flutter uygulamasına Firebase 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'ı 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ı çoklu 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'de özellikle firebase_ui_auth paketini kullanarak güçlü bir kimlik doğrulama sistemi ekleme konusu ele alınmaktadır. 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ı
• 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ında uygulamanızı Chrome'da çalıştırdığınız varsayılır.)

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).
   
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 izin vermek 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ştirilmeli ve etkinleştirildikten sonra özel yapılandırma gerektirmelidir.

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ı kurma

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şlamalı ve 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.
3. Firebase projelerinizi listeleyerek KSA'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 KSA'yı yükleme

FlutterFire CLI, Flutter uygulamanızdaki desteklenen tüm 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 istediğinizi 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, sürecin 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',
  );
}

Firebase, bir Firebase projesinde belirli bir platform için oluşturulan 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'unu 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 kullanarak gerekli üç paketi yükleyin:

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, main işlevindeki kodu main.dart dosyasında güncelleyin.

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şlevi yerine getirir.

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ş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ını iletir.

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

Firebase UI for Auth, 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 mevcut kullanıcıyı, 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. Kullanıcının kimliği doğrulanmışsa Firebase User nesnesi, aksi takdirde null döndürülür.
• Ardından, akıştan gelen değerin User nesnesini içerip içermediğini kontrol etmek için snapshot.hasData kullanılır.
• 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. Uygulamayı bu noktada ç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önlendirilebilir.
• 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 eklemek isteyebilirsiniz.

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

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. Bu widget yalnızca mobil cihazlar gibi dar ekranlarda gösterilir. Geniş ekranlarda, bu codelab'in ilerleyen bölümlerinde ele alınacak olan 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();
      },
    );
  }
}

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,
);

Bir geri çağırma olduğu için BuildContext ve BoxConstraints gibi kullanabileceğiniz değerleri kullanıma sunar ve bir widget döndürmenizi gerektirir. İade ettiğiniz 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ında, ekranı özelleştirmenize olanak tanıyan üç ek parametre (subtitleBuilder, footerBuilder ve sideBuilder) bulunur.

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 tespit etmek için kullanabileceğiniz bir enum'dur.

subtitleBuilder özelliğini kullanmak için lib/auth_gate.dart uygulamasındaki kodu 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'yi 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 bu geri çağırmanın bağımsız değişkenleri BuildContext ve double shrinkOffset olur. sideBuilder döndüren 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 (geniş ekranlarda, masaüstünde ya da web'de) 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.

sideBuilder widget'ları eklemek için lib/auth_gate.dart içindeki kodu 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) {                   // Add from here...
              return Padding(
                padding: const EdgeInsets.all(20),
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Image.asset('assets/flutterfire_300x.png'),
                ),
              );                                                     // To here.
            },
          );
        }

        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. Bu, aşağıdaki resimde girdiğim gibi sahte bir e-posta 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 oturum açmasını sağlayabilirsiniz. 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 rotada, MaterialPageRoute.builder geri çağırmasından döndürülen ProfileScreen widget'ı gösterilir.

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 kullanıma hazır hâlde çalışır. Örneğin, "Ad" metin alanına bir ad girebilirsiniz. FlutterFire UI, FirebaseAuth.instance.currentUser?.updateDisplayName yöntemini çağırarak bu adı Firebase'e kaydeder.

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 iletiyorsunuz. Bu işlemler FlutterFireUiAction türündedir. FlutterFireUiAction öğesinin alt türleri olan birçok farklı sınıf vardır ve 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 gittikten sonra ana sayfaya geri dönmenin bir yolu yok. ProfileScreen widget'ına AppBar vererek bu sorunu düzeltin.

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şlevi 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 bölümündeki kodu, şirket logosunu burada oturum açma ekranına benzer şekilde 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('assets/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 yerel kimlik doğrulama akışını işleyecek olan resmi firebase_ui_oauth_google eklentisini ve 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 Konsolu'nda 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 oturum açma 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('assets/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 Console'da 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ünden aşağıdaki terminal komutunu çalıştırarak Xcode'u açın: open ios/Runner.xcworkspace
6. Runner dizinini sağ tıklayın ve Dosyaları "Runner"a Ekle'yi seçin.
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. REVERSE_CLIENT_ID değerini GoogleService-Info.plist değerinden kopyalananla değiştirdiğinizden emin olun.

   <!-- 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>REVERSE_CLIENT_ID</string>
       </array>
     </dict>
   </array>
   <!-- End of the Google Sign-in Section -->
   

9. firebase_options.dart dosyasını güncellemek için flutterfire configure komutunu tekrar çalıştırın. CLI, mevcut firebase.json dosyasını yeniden kullanmak isteyip istemediğinizi sorarsa "yes" (evet) seçeneğini belirleyin.
10. 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 dosyasında iOS sabiti kapsamında bulabilirsiniz. iOSClientId öğesine 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',
    );
    

11. 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 iosClientId.

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.

Android'i yapılandırma

Android'de Google ile oturum açma özelliğini kullanmak için öncelikle uygulamanızın SHA-1 parmak izini Firebase projenize kaydetmeniz gerekir.

1. Projenizde android dizinine gidin ve uygulamanızın imzalama raporunu oluşturmak için aşağıdaki komutu çalıştırın:

./gradlew signingReport

2. Komut tamamlandıktan sonra varyantların ve imza bilgilerinin listesini görürsünüz. debug varyantının altındaki SHA-1 anahtarını bulup kopyalayın.

3. Firebase konsolunda Proje Ayarları ekranına gidin ve Android uygulamanızı seçin. Add fingerprint düğmesini tıklayın ve kopyaladığınız SHA-1 anahtarını kaydedin.

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: 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 kutlama yapmaya hazır!