הוספת תהליך אימות משתמש לאפליקציית Flutter באמצעות FirebaseUI

1. לפני שמתחילים

בקודלאב הזה תלמדו איך להוסיף את אימות Firebase לאפליקציית Flutter באמצעות חבילת ממשק המשתמש של FlutterFire. בעזרת החבילה הזו תוכלו להוסיף לאפליקציית Flutter אימות באמצעות אימייל/סיסמה ואימות באמצעות כניסה לחשבון Google. בנוסף, תוכלו ללמוד איך להגדיר פרויקט Firebase ולהשתמש ב-CLI של FlutterFire כדי לאתחל את Firebase באפליקציית Flutter.

דרישות מוקדמות

אנחנו יוצאים מנקודת הנחה שיש לכם ניסיון מסוים ב-Flutter. אם לא, מומלץ קודם ללמוד את היסודות. הקישורים הבאים יכולים לעזור:

• סיור במסגרת הווידג'טים של Flutter
• כדאי לנסות את הקודלהב כתיבת האפליקציה הראשונה ב-Flutter, חלק 1

כמו כן, כדאי שתהיה לכם קצת ניסיון ב-Firebase, אבל גם אם אף פעם לא הוספתם את Firebase לפרויקט Flutter, זה בסדר. אם אתם לא מכירים את מסוף Firebase או שאתם משתמשים חדשים ב-Firebase, מומלץ לעיין קודם בקישורים הבאים:

• מסמכי העזרה של Firebase Fundamentals
• מידע על Firebase באמצעות Codelab של Flutter

מה תייצרו

בקודלאב הזה תלמדו איך ליצור את תהליך האימות של אפליקציית Flutter באמצעות Firebase לאימות. באפליקציה יהיו מסך התחברות, מסך 'רישום', מסך לשחזור סיסמה ומסך פרופיל משתמש.

מה תלמדו

ב-Codelab הזה תלמדו:

• הוספת Firebase לאפליקציית Flutter
• הגדרת מסוף Firebase
• שימוש ב-Firebase CLI כדי להוסיף את Firebase לאפליקציה
• שימוש ב-CLI של FlutterFire ליצירת הגדרות Firebase ב-Dart
• הוספת אימות ב-Firebase לאפליקציית Flutter
• הגדרת אימות ב-Firebase במסוף
• הוספת כניסה באמצעות כתובת אימייל וסיסמה באמצעות החבילה firebase_ui_auth
• הוספת רישום משתמשים באמצעות החבילה firebase_ui_auth
• הוספת דף 'שכחת את הסיסמה?'
• הוספת כניסה באמצעות חשבון Google באמצעות firebase_ui_auth
• הגדרת האפליקציה לעבודה עם כמה ספקי כניסה.
• הוספת מסך של פרופיל משתמש לאפליקציה באמצעות החבילה firebase_ui_auth

בקודלאב הזה נסביר איך מוסיפים מערכת אימות חזקה באמצעות החבילה firebase_ui_auth. כפי שתראו, אפשר להטמיע את כל האפליקציה הזו, עם כל התכונות שלמעלה, באמצעות כ-100 שורות קוד.

מה צריך

• ידע מעשי ב-Flutter וב-SDK שמותקן
• עורך טקסט (Flutter תומך ב-JetBrains IDE,‏ Android Studio ו-VS Code)
• דפדפן Google Chrome או יעד הפיתוח המועדף אחר שלכם ב-Flutter. (חלק מפקודות המסוף בקודלאב הזה יקבלו את ההנחה שאתם מריצים את האפליקציה ב-Chrome)

2. יצירת פרויקט Firebase והגדרתו

המשימה הראשונה שצריך לבצע היא ליצור פרויקט Firebase במסוף האינטרנט של Firebase.

יצירת פרויקט Firebase

1. נכנסים ל-Firebase.
2. במסוף Firebase, לוחצים על Add Project (הוספת פרויקט) או על Create a project (יצירת פרויקט), ומזינים שם לפרויקט ב-Firebase (לדוגמה, FlutterFire-UI-Codelab).

3. לוחצים על האפשרויות ליצירת פרויקט. מאשרים את התנאים של Firebase אם מופיעה בקשה לעשות זאת. מדלגים על הגדרת Google Analytics כי לא תשתמשו ב-Analytics באפליקציה הזו.

מידע נוסף על פרויקטים ב-Firebase זמין במאמר הסבר על פרויקטים ב-Firebase.

הפעלת כניסה באמצעות אימייל לאימות ב-Firebase

באפליקציה שאתם מפתחים נעשה שימוש באימות ב-Firebase כדי לאפשר למשתמשים להיכנס לאפליקציה. הוא גם מאפשר למשתמשים חדשים להירשם דרך אפליקציית Flutter.

צריך להפעיל את אימות Firebase באמצעות מסוף Firebase, ולאחר ההפעלה צריך לבצע הגדרה מיוחדת.

כדי לאפשר למשתמשים להיכנס לאפליקציית האינטרנט, קודם צריך להשתמש בשיטת הכניסה אימייל/סיסמה. בהמשך תוסיפו את השיטה כניסה באמצעות חשבון Google.

1. במסוף Firebase, מרחיבים את התפריט Build בחלונית הימנית.
2. לוחצים על Authentication (אימות), ואז על הלחצן Get Started (תחילת העבודה) ואז על הכרטיסייה Sign-in method (שיטת כניסה) (או לוחצים כאן כדי לעבור ישירות לכרטיסייה Sign-in method).
3. לוחצים על אימייל/סיסמה ברשימה ספקי כניסה, מעבירים את המתג הפעלה למצב מופעל ולוחצים על שמירה.

3. הגדרת אפליקציית Flutter

לפני שנתחיל, תצטרכו להוריד את קוד ההתחלה ולהתקין את Firebase CLI.

קבלת קוד לתחילת הדרך

משכפלים את מאגר GitHub משורת הפקודה:

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

לחלופין, אם כלי ה-CLI של GitHub מותקן:

gh repo clone flutter/codelabs flutter-codelabs

צריך לשכפל את הקוד לדוגמה לספרייה flutter-codelabs במחשב, שמכילה את הקוד של אוסף של Codelabs. הקוד של סדנת הקוד הזו נמצא בספריית המשנה flutter-codelabs/firebase-auth-flutterfire-ui.

הספרייה flutter-codelabs/firebase-auth-flutterfire-ui מכילה שני פרויקטים של Flutter. אחת מהן נקראת complete והשנייה נקראת start. הספרייה start מכילה פרויקט חלקי, וזו הספרייה שבה תעבירו את רוב הזמן.

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

אם רוצים לדלג קדימה או לראות איך משהו אמור להיראות כשהוא יושלם, אפשר לעיין בספרייה שנקראת complete כדי למצוא הפניה.

אם אתם רוצים לפעול לפי השלבים בקודלאב ולהוסיף קוד בעצמכם, כדאי להתחיל באפליקציית Flutter בקטע flutter-codelabs/firebase-auth-flutterfire-ui/start ולהוסיף קוד לפרויקט הזה לאורך הקודלאב. פותחים או מייבאים את הספרייה הזו לסביבת הפיתוח המשולבת (IDE) המועדפת.

התקנת Firebase CLI

ב-Firebase CLI יש כלים לניהול הפרויקטים ב-Firebase. ה-CLI נדרש ל-CLI של FlutterFire, שתתקינו בהמשך.

יש כמה דרכים להתקין את ה-CLI. הדרך הקלה ביותר, אם אתם משתמשים ב-MacOS או ב-Linux, היא להריץ את הפקודה הזו מהטרמינל:

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

הערה: אם אתם משתמשים ב-Windows או אם אתם מעדיפים לא להשתמש ב-curl, תצטרכו להוריד קובץ בינארי או להשתמש ב-npm כדי לבצע את ההתקנה. כל ההוראות מפורטות כאן: https://firebase.google.com/docs/cli. חוזרים לסדנת הקוד הזו אחרי שמתקינים את Firebase.

אחרי התקנת ה-CLI, צריך לבצע אימות באמצעות Firebase.

1. מריצים את הפקודה הבאה כדי להתחבר ל-Firebase באמצעות חשבון Google:

firebase login

2. הפקודה הזו מקשרת את המחשב המקומי ל-Firebase ומעניקה לכם גישה לפרויקטים ב-Firebase.

הערה: הפקודה firebase login פותחת דף אינטרנט שמתחבר ל-localhost במחשב. אם אתם משתמשים במכונה מרוחקת ואין לכם גישה ל-localhost, מריצים את הפקודה עם הדגל --no-localhost.

3. כדי לבדוק אם ה-CLI מותקן כראוי ויש לו גישה לחשבון, עליכם להציג את רשימת הפרויקטים ב-Firebase. מריצים את הפקודה הבאה:

firebase projects:list

4. הרשימה שמוצגת אמורה להיות זהה לפרויקטים ב-Firebase שמפורטים במסוף Firebase. אמורים להופיע לפחות flutterfire-ui-codelab.

התקנת ה-CLI של FlutterFire

FlutterFire CLI הוא כלי שעוזר לפשט את תהליך ההתקנה של Firebase בכל הפלטפורמות הנתמכות באפליקציית Flutter. הוא מבוסס על Firebase CLI.

קודם כול, מתקינים את ה-CLI:

dart pub global activate flutterfire_cli

מוודאים שה-CLI הותקן. מריצים את הפקודה הבאה ומוודאים שה-CLI מנפיק את תפריט העזרה.

flutterfire --help

הוספת פרויקט Firebase לאפליקציה ב-Flutter

הגדרת FlutterFire

אפשר להשתמש ב-FlutterFire כדי ליצור את קוד ה-Dart הנדרש לשימוש ב-Firebase באפליקציית Flutter.

flutterfire configure

כשמריצים את הפקודה הזו, מופיעה בקשה לבחור את פרויקט Firebase שבו רוצים להשתמש ואת הפלטפורמות שרוצים להגדיר.

בצילום המסך הבא מוצגות ההנחיות שעליכם לענות עליהן.

1. בוחרים את הפרויקט שבו רוצים להשתמש. במקרה כזה, צריך להשתמש ב-flutterfire-ui-codelab
2. בוחרים את הפלטפורמות שבהן רוצים להשתמש. בקודלאב הזה מוסבר איך להגדיר את אימות Firebase ל-Flutter לאינטרנט, ל-iOS ול-Android, אבל אפשר להגדיר את פרויקט Firebase כך שישתמש בכל האפשרויות.
3. בצילום המסך הזה מוצג הפלט בסוף התהליך. אם אתם מכירים את Firebase, תבחינו שלא הייתם צריכים ליצור אפליקציות פלטפורמה (לדוגמה, אפליקציה ל-Android) במסוף, ו-CLI של FlutterFire עשה זאת בשבילכם.

בסיום התהליך, בודקים את אפליקציית Flutter בעורך הטקסט. ה-CLI של FlutterFire יצר קובץ חדש בשם firebase_options.dart. הקובץ הזה מכיל מחלקה שנקראת FirebaseOptions, עם משתנים סטטיים שמכילים את הגדרות Firebase הנדרשות לכל פלטפורמה. אם בחרתם את כל הפלטפורמות כשהרצתם את הפקודה flutterfire configure, יוצגו ערכים סטטיים בשמות web,‏ android,‏ ios ו-macos.

firebase_options.dart

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

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

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

  static const FirebaseOptions web = FirebaseOptions(
    apiKey: 'AIzaSyCqFjCV_9CZmYeIvcK9FVy4drmKUlSaIWY',
    appId: '1:963656261848:web:7219f7fca5fc70afb237ad',
    messagingSenderId: '963656261848',
    projectId: 'flutterfire-ui-codelab',
    authDomain: 'flutterfire-ui-codelab.firebaseapp.com',
    storageBucket: 'flutterfire-ui-codelab.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',
  );
}

הערה: הקובץ צריך להכיל ערכים שונים למפתחות ה-API. אין שום בעיה לחשוף את המפתחות האלה לציבור. כאן מוסבר איך עושים את זה.

ב-Firebase, המילה 'אפליקציה' מתייחסת לגרסה ספציפית של build לפלטפורמה ספציפית בפרויקט Firebase. לדוגמה, לפרויקט Firebase שנקרא FlutterFire-ui-codelab יש כמה אפליקציות: אחת ל-Android, אחת ל-iOS, אחת ל-MacOS ואחת לאינטרנט.

השיטה DefaultFirebaseOptions.currentPlatform משתמשת ב-enum TargetPlatform שחשוף על ידי Flutter כדי לזהות את הפלטפורמה שבה האפליקציה פועלת, ולאחר מכן מחזירה את ערכי התצורה של Firebase שנדרשים לאפליקציית Firebase המתאימה.

הוספת חבילות Firebase לאפליקציית Flutter

שלב ההגדרה האחרון הוא הוספת חבילות Firebase הרלוונטיות לפרויקט Flutter. בקובץ firebase_options.dart אמורות להופיע שגיאות, כי הוא מסתמך על חבילות של Firebase שעדיין לא נוספו. במסוף, מוודאים שנמצאים בספרייה הראשית של פרויקט Flutter בכתובת flutter-codelabs/firebase-emulator-suite/start. לאחר מכן, מריצים את שלוש הפקודות הבאות:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

אלה החבילות היחידות שצריך בשלב הזה.

איך מפעילים את Firebase

כדי להשתמש בחבילות שנוספו, וגם כדי שה-DefaultFirebaseOptions.currentPlatform, יעדכן את הקוד בפונקציה main בקובץ main.dart.

main.dart

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

  runApp(const MyApp());
}

הקוד הזה עושה שני דברים.

1. WidgetsFlutterBinding.ensureInitialized() מורה ל-Flutter לא להתחיל להריץ את קוד הווידג'ט של האפליקציה עד שהמסגרת של Flutter מופעלת במלואה. מערכת Firebase משתמשת בערוצי פלטפורמה מקומיים, שדורשים שהמסגרת תפעל.
2. Firebase.initializeApp מגדיר חיבור בין אפליקציית Flutter לבין פרויקט Firebase. ה-DefaultFirebaseOptions.currentPlatform מיובאים מקובץ ה-firebase_options.dart שנוצר. הערך הסטטי הזה מזהה את הפלטפורמה שבה אתם עובדים ומעביר את מפתחות Firebase התואמים.

4. הוספת דף האימות הראשוני של ממשק המשתמש של Firebase

ממשק המשתמש של Firebase לאימות מספק ווידג'טים שמייצגים מסכים שלמים באפליקציה. המסכים האלה מטפלים בתהליכי אימות שונים באפליקציה, כמו כניסה, רישום, 'שכחתי את הסיסמה', 'פרופיל המשתמש' ועוד. כדי להתחיל, מוסיפים לאפליקציה דף נחיתה שמשמש כמאגר אימות לאפליקציה הראשית.

אפליקציה בסגנון Material או Cupertino

ממשק המשתמש של FlutterFire מחייב שתכינו את האפליקציה ב-MaterialApp או ב-CupertinoApp. בהתאם לבחירה שלכם, ממשק המשתמש ישקף באופן אוטומטי את ההבדלים בין ווידג'טים של Material לבין ווידג'טים של Cupertino. בקודלאב הזה, משתמשים ב-MaterialApp שכבר נוסף לאפליקציה ב-app.dart.

app.dart

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

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

בדיקת מצב האימות

לפני שתוכלו להציג מסך כניסה, עליכם לקבוע אם המשתמש מאומת כרגע. הדרך הנפוצה ביותר לבדוק זאת היא להאזין ל-authStateChanges של FirebaseAuth באמצעות הפלאגין של Firebase Auth.

בדוגמת הקוד שלמעלה, ה-MaterialApp יוצר ווידג'ט AuthGate בשיטת ה-build שלו. (זהו ווידג'ט מותאם אישית, שלא מסופק על ידי ממשק המשתמש של FlutterFire).

צריך לעדכן את הווידג'ט כך שיכלול את השידור של authStateChanges.

ה-API של authStateChanges מחזיר Stream עם המשתמש הנוכחי (אם הוא מחובר) או null אם הוא לא מחובר. כדי להירשם למצב הזה באפליקציה, אפשר להשתמש בווידג'ט StreamBuilder של Flutter ולהעביר אליו את הסטרימינג.

StreamBuilder הוא ווידג'ט שנוצר על סמך תמונת המצב האחרונה של הנתונים מStream שאתם מעבירים אליו. הוא נבנה מחדש באופן אוטומטי כשה-Stream משדר קובץ snapshot חדש.

מעדכנים את הקוד ב-auth_gate.dart.

auth_gate.dart

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

import 'home.dart';

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

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

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

• StreamBuilder.stream מועבר FirebaseAuth.instance.authStateChanged, הסטרימינג שצוין למעלה, שיחזיר אובייקט User של Firebase אם המשתמש עבר אימות. (אחרת, הפונקציה תחזיר את הערך null).
• בשלב הבא, הקוד משתמש ב-snapshot.hasData כדי לבדוק אם הערך מהסטרימינג מכיל את האובייקט User.
• אם לא, הפונקציה תחזיר ווידג'ט של SignInScreen. בשלב הזה, המסך הזה לא יעשה כלום. השם הזה יתעדכן בשלב הבא.
• אחרת, הוא מחזיר HomeScreen, שהוא החלק הראשי של האפליקציה שרק משתמשים מאומתים יכולים לגשת אליו.

ה-SignInScreen הוא ווידג'ט שמגיע מחבילת ממשק המשתמש של FlutterFire. זה יהיה המוקד של השלב הבא ב-codelab הזה. כשמריצים את האפליקציה בשלב הזה, אמור להופיע מסך כניסה ריק.

5. מסך הכניסה

הווידג'ט SignInScreen, שסופק על ידי FlutterFire UI, מוסיף את הפונקציונליות הבאה:

• המשתמשים יכולים להיכנס
• אם המשתמשים שכחו את הסיסמה, הם יכולים להקיש על 'שכחת את הסיסמה?' והם יועברו לטופס לאיפוס הסיסמה.
• אם המשתמש עדיין לא רשום, הוא יכול להקיש על 'רישום' ולהיכנס לטופס אחר שבו יוכל להירשם.

שוב, נדרשות רק כמה שורות קוד. בודקים את הקוד בווידג'ט של AuthGate:

auth_gate.dart

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

import 'home.dart';

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

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

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

הווידג'ט SignInScreen והארגומנט providers שלו הם הקוד היחיד שנדרש כדי לקבל את כל הפונקציונליות שצוינה למעלה. עכשיו אמור להופיע מסך כניסה עם שדות טקסט לכתובת האימייל ולסיסמה, וגם לחצן 'כניסה'.

האתר פונקציונלי, אבל חסר לו עיצוב. הווידג'ט חושף פרמטרים להתאמה אישית של המראה של מסך הכניסה. לדוגמה, אפשר להוסיף את הלוגו של החברה.

התאמה אישית של מסך הכניסה

headerBuilder

באמצעות הארגומנט SignInScreen.headerBuilder, אפשר להוסיף כל ווידג'ט שרוצים מעל טופס הכניסה. הווידג'ט הזה מוצג רק במסכים צרים, כמו מכשירים ניידים. במסכים רחבים, אפשר להשתמש ב-SignInScreen.sideBuilder, כפי שמתואר בהמשך בקודלאב.

מעדכנים את הקובץ auth_gate.dart באמצעות הקוד הזה:

auth_gate.dart

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

import 'home.dart';

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

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

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

הארגומנט headerBuilder דורש פונקציה מסוג HeaderBuilder, שמוגדרת בחבילת ממשק המשתמש של FlutterFire.

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

מכיוון שזו קריאה חוזרת (callback), היא חושפת ערכים שאפשר להשתמש בהם, כמו BuildContext ו-BoxConstraints, ומחייבת להחזיר ווידג'ט. הווידג'ט שאליו תחזירו את הסמן יוצג בחלק העליון של המסך. בדוגמה הזו, הקוד החדש מוסיף תמונה לחלק העליון של המסך. האפליקציה אמורה להיראות כך.

הכלי ליצירת כתוביות

מסך הכניסה חושף שלושה פרמטרים נוספים שמאפשרים להתאים אישית את המסך: subtitleBuilder,‏ footerBuilder ו-sideBuilder.

ההבדל היחיד בין subtitleBuilder לבין AuthAction הוא שהארגומנטים של פונקציית ה-callback כוללים פעולה מסוג AuthAction. AuthAction הוא enum שאפשר להשתמש בו כדי לזהות אם המסך שבו המשתמש נמצא הוא מסך 'כניסה' או מסך 'רישום'.

מעדכנים את הקוד בקובץ auth_gate.dart כך שישתמש ב-subtitleBuilder.

auth_gate.dart

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

import 'home.dart';

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

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

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

צריך לטעון מחדש את האפליקציה, והיא אמורה להיראות כך

כלי לבניית כותרות תחתונות

הארגומנט footerBuilder זהה לארגומנט subtitleBuilder. הוא לא חושף את BoxConstraints או את shrinkOffset, כי הוא מיועד לטקסט ולא לתמונות. (אבל אפשר להוסיף כל ווידג'ט שרוצים).

הקוד הזה מאפשר להוסיף כותרת תחתונה למסך הכניסה.

auth_gate.dart

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

import 'home.dart';

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

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

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

Side Builder

הארגומנט SignInScreen.sidebuilder מקבל פונקציית קריאה חוזרת, והפעם הארגומנטים לפונקציית הקריאה החוזרת הזו הם BuildContext ו-double shrinkOffset. הווידג'ט שהפונקציה sideBuilder מחזירה יוצג משמאל לטופס הכניסה, ורק במסכים רחבים. פירוש הדבר הוא שהווידג'ט יוצג רק במחשבים ובאפליקציות אינטרנט.

באופן פנימי, ממשק המשתמש של FlutterFire משתמש בנקודת עצירה כדי לקבוע אם תוכן הכותרת יוצג (במסכים ארוכים, כמו במכשירים ניידים) או שהתוכן הצדדי יוצג (במסכים רחבים, במחשב או באינטרנט). באופן ספציפי, אם המסך רחב מ-800 פיקסלים, תוכן הצד של הכלי ליצירת מודעות מוצג, אבל תוכן הכותרת לא מוצג. אם רוחב המסך קטן מ-800 פיקסלים, ההפך הוא הנכון.

מעדכנים את הקוד בקובץ auth_gate.dart כדי להוסיף ווידג'טים של sideBuilder.

auth_gate.dart

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

import 'home.dart';

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

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

עכשיו האפליקציה אמורה להיראות כך כשמרחיבים את רוחב החלון (אם אתם משתמשים ב-Flutter web או ב-MacOS).

יצירת משתמש

בשלב הזה, כל הקוד של המסך הזה מוכן. עם זאת, לפני שתהיה לכם אפשרות להיכנס לחשבון, תצטרכו ליצור משתמש. אפשר לעשות זאת באמצעות המסך 'רישום', או ליצור משתמש במסוף Firebase.

כדי להשתמש במסוף:

1. עוברים לטבלה 'משתמשים' במסוף Firebase.
2. יש ללחוץ כאן
3. בוחרים באפשרות flutterfire-ui-codelab (או פרויקט אחר אם השתמשת בשם אחר). תוצג הטבלה הבאה:

2. לוחצים על הלחצן 'הוספת משתמש'.

3. מזינים כתובת אימייל וסיסמה למשתמש החדש. אפשר להזין כתובת אימייל וסיסמה מזויפות, כפי שהזנתי בתמונה שבהמשך. זה יפעל, אבל הפונקציונליות 'שכחתי את הסיסמה' לא תפעל אם תשתמשו בכתובת אימייל מזויפת.

4. לוחצים על 'הוספת משתמש'.

עכשיו אפשר לחזור לאפליקציית Flutter ולהיכנס באמצעות דף הכניסה. האפליקציה אמורה להיראות כך:

6. מסך הפרופיל

ממשק המשתמש של FlutterFire מספק גם ווידג'ט ProfileScreen, שגם הוא מספק פונקציונליות רבה בכמה שורות קוד.

הוספת הווידג'ט ProfileScreen

עוברים לקובץ home.dart בעורך הטקסט. מעדכנים אותו באמצעות הקוד הזה:

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

הקוד החדש של ההערה הוא פונקציית ה-callback שהועברה לשיטה IconButton.isPressed. כשלוחצים על IconButton, האפליקציה יוצרת מסלול אנונימי חדש ומנווטת אליו. במסלול הזה יוצג הווידג'ט ProfileScreen, שמוחזר מהקריאה החוזרת (callback) של MaterialPageRoute.builder.

צריך לטעון מחדש את האפליקציה וללחוץ על הסמל בפינה השמאלית העליונה (בסרגל האפליקציות). יוצג דף כזה:

זהו ממשק המשתמש הרגיל שמוצג בדף ממשק המשתמש של FlutterFire. כל הלחצנים ושדות הטקסט מחוברים לאימות של Firebase ופועלים מבלי שתצטרכו לבצע שינויים. לדוגמה, אפשר להזין שם בשדה הטקסט 'שם', וממשק המשתמש של FlutterFire יפעיל את השיטה FirebaseAuth.instance.currentUser?.updateDisplayName, שתשמור את השם הזה ב-Firebase.

הערה: בדוגמה הזו, הלחצן 'שליחת אימייל לאימות' ישלח אימייל לכתובת אימייל מזויפת – [e-mail]. כדי לוודא שהיא פועלת, צריך ליצור משתמש עם כתובת אימייל בבעלותכם.

יציאה מהחשבון

בשלב הזה, אם תלחצו על הלחצן 'יציאה', האפליקציה לא תשתנה. החשבון שלכם יוסר, אבל לא תועברו חזרה לווידג'ט של AuthGate. כדי להטמיע את הפעולה הזו, משתמשים בפרמטר ProfileScreen.actions.

קודם כול, מעדכנים את הקוד בקובץ home.dart.

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

עכשיו, כשיוצרים מופע של ProfileScreen, מעבירים לו גם רשימת פעולות לארגומנט ProfileScreen.actions. הפעולות האלה הן מסוג FlutterFireUiAction. יש הרבה סוגים שונים של כיתות שהן תת-סוגים של FlutterFireUiAction, ובדרך כלל משתמשים בהן כדי להורות לאפליקציה להגיב לשינויים שונים בסטטוס האימות. הפונקציה SignedOutAction קוראת לפונקציית קריאה חוזרת (callback) שאתם נותנים לה כשמצב האימות ב-Firebase משתנה כך שהערך של currentUser הוא null.

אם מוסיפים קריאה חוזרת שמפעילה את Navigator.of(context).pop() כשהאירוע SignedOutAction מופעל, האפליקציה מנווטת לדף הקודם. באפליקציה לדוגמה הזו יש רק מסלול קבוע אחד, שבו מוצג דף הכניסה אם אף משתמש לא נכנס לחשבון, ודף הבית אם יש משתמש. מכיוון שהאירוע הזה מתרחש כשהמשתמש יוצא מהחשבון, בדף האפליקציה יוצג דף הכניסה.

התאמה אישית של דף הפרופיל

בדומה לדף הכניסה, אפשר להתאים אישית את דף הפרופיל. ראשית, אין בדף הנוכחי שלנו דרך לנווט בחזרה לדף הבית אחרי שמשתמש נכנס לדף הפרופיל. כדי לפתור את הבעיה, צריך להוסיף לווידג'ט ProfileScreen סרגל 'אפליקציה'.

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

הארגומנט ProfileScreen.appBar מקבל ווידג'ט AppBar מחבילת Flutter Material, כך שאפשר להתייחס אליו כמו לכל AppBar אחר שיצרתם והעברתם ל-Scaffold. בדוגמה הזו, פונקציית ברירת המחדל של הוספה אוטומטית של לחצן 'חזרה' נשמרת, והמסך כולל עכשיו כותרת.

הוספת ילדים למסך הפרופיל

לווידג'ט ProfileScreen יש גם ארגומנט אופציונלי בשם children. הארגומנט הזה מקבל רשימה של ווידג'טים, והווידג'טים האלה יוצגו אנכית בתוך ווידג'ט של עמודה שכבר משמש באופן פנימי ליצירת ProfileScreen. הווידג'ט הזה של עמודות בשיטת ה-build של ProfileScreen יניח את הצאצאים שתעבירו לו מעל הלחצן 'יציאה מהחשבון'.

מעדכנים את הקוד בקובץ home.dart כך שיוצג כאן הלוגו של החברה, בדומה למסך הכניסה.

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

טוענים מחדש את האפליקציה, וההודעה הבאה תופיע במסך:

7. כניסה באמצעות אימות Google במספר פלטפורמות

ממשק המשתמש של FlutterFire מספק גם ווידג'טים ופונקציונליות לאימות מול ספקים של צד שלישי, כמו Google,‏ Twitter,‏ Facebook,‏ Apple ו-Github.

כדי לשלב את האימות של Google, צריך להתקין את הפלאגין הרשמי firebase_ui_oauth_google ואת יחסי התלות שלו, שיטפלו בתהליך האימות המקורי. בטרמינל, עוברים לשורש של פרויקט Flutter ומזינים את הפקודה הבאה:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

הפעלת ספק הכניסה באמצעות חשבון Google

לאחר מכן, מפעילים את הספק Google במסוף Firebase:

1. עוברים למסך Authentication sign-in providers במסוף.
2. לוחצים על 'הוספת ספק חדש'.
3. בוחרים באפשרות 'Google'.
4. מחליפים את מצב המתג 'הפעלה' ומקישים על 'שמירה'.
5. אם מופיעה תיבת דו-שיח עם מידע על הורדת קובצי תצורה, לוחצים על 'סיום'.
6. מוודאים שהספק של כניסה באמצעות חשבון Google נוסף.

הוספת לחצן לכניסה באמצעות חשבון Google

כשהאפשרות 'כניסה באמצעות חשבון Google' מופעלת, מוסיפים לדף הכניסה את הווידג'ט הנדרש כדי להציג לחצן מסוגנן לכניסה באמצעות חשבון Google. עוברים לקובץ auth_gate.dart ומעדכנים את הקוד כך:

auth_gate.dart

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

import 'home.dart';

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

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

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

הקוד החדש היחיד כאן הוא ההוספה של GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") להגדרת הווידג'ט SignInScreen.

לאחר הוספת הקוד, צריך לטעון מחדש את האפליקציה ולחפש את לחצן הכניסה לחשבון Google.

הגדרת לחצן הכניסה

הלחצן לא פועל בלי הגדרה נוספת. אם אתם מפתחים עם Flutter Web, זה השלב היחיד שצריך להוסיף כדי שהדבר יפעל. בפלטפורמות אחרות נדרשים שלבים נוספים, שנסביר בהמשך.

1. עוברים לדף Authentication providers במסוף Firebase.
2. לוחצים על הספק של Google.
3. לוחצים על החלונית המורחבת 'הגדרת Web SDK'.
4. מעתיקים את הערך מהשדה 'מזהה לקוח אינטרנט'
5. חוזרים לעורך הטקסט ומעדכנים את המופע של GoogleProvider בקובץ auth_gate.dart על ידי העברת המזהה הזה לפרמטר המכונה clientId.

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

אחרי שמזינים את מזהה הלקוח לאינטרנט, צריך לטעון מחדש את האפליקציה. כשלוחצים על הלחצן 'כניסה באמצעות חשבון Google', תיפתח חלון חדש (אם משתמשים באינטרנט) עם הנחיות לתהליך הכניסה לחשבון Google. בהתחלה, הוא נראה כך:

הגדרת iOS

כדי שהתכונה הזו תפעל ב-iOS, צריך לבצע תהליך הגדרה נוסף.

1. עוברים למסך Project Settings (הגדרות הפרויקט) במסוף Firebase. יופיע כרטיס עם רשימה של אפליקציות Firebase. הכרטיס ייראה כך:
2. לוחצים על iOS. לתשומת ליבך, שם האפליקציה שלך יהיה שונה משם האפליקציה שלי. אם השתמשתם בפרויקט flutter-codelabs/firebase-auth-flutterfire-ui/start כדי לעקוב אחרי הקודלאב הזה, במקום 'הושלם' יופיע הכיתוב 'התחלה'.
3. לוחצים על הלחצן GoogleServices-Info.plist כדי להוריד את קובץ התצורה הנדרש.
4. גוררים את הקובץ שהורדתם ומשחררים אותו בספרייה שנקראת ‎ ./ios/Runner בפרויקט Flutter.
5. פותחים את Xcode על ידי הפעלת הפקודה הבאה בטרמינל מהשורש של הפרויקט: open ios/Runner.xcworkspace
6. לוחצים לחיצה ימנית על ספריית Runner ובוחרים באפשרות 'הוספת קבצים ל-Runner'.
7. בוחרים את GoogleService-Info.plist מנהל הקבצים.
8. חזרה לעורך הטקסט (שאינו Xcode), מוסיפים את המאפיינים הבאים של CFBundleURLTypes לקובץ [my_project]/ios/Runner/Info.plist.

<!-- 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. צריך להחליף את הערך GoogleProvider.clientId שהוספתם בהגדרה לאינטרנט במזהה הלקוח שמשויך למזהה הלקוח שלכם ב-Firebase ל-iOS. קודם כול, המזהה הזה מופיע בקובץ firebase_options.dart, כחלק מהקבועה iOS. מעתיקים את הערך שהוענק ל-iOSClientId.

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. מדביקים את הערך הזה בארגומנט GoogleProvider.clientId בווידג'ט AuthGate.

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

import 'home.dart';


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

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

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

אם אפליקציית Flutter כבר פועלת ב-iOS, צריך לכבות אותה לגמרי ואז להפעיל אותה מחדש. אחרת, מריצים את האפליקציה ב-iOS.

8. כל הכבוד!

השלמת את ה-Codelab בנושא ממשק המשתמש של Firebase Auth ל-Flutter . הקוד המלא של ה-Codelab הזה נמצא בספרייה complete ב-GitHub: Flutter Codelabs

מה עסקנו בו

• הגדרת אפליקציית Flutter לשימוש ב-Firebase
• הגדרת פרויקט Firebase במסוף Firebase
• FlutterFire CLI
• Firebase CLI
• שימוש באימות ב-Firebase
• שימוש בממשק המשתמש של FlutterFire כדי לטפל באימות Firebase באפליקציית Flutter בקלות

השלבים הבאים

• מידע נוסף על שימוש ב-Firestore ובאימות ב-Flutter: קורס Codelab בנושא Firebase ל-Flutter
• כדאי להכיר כלים אחרים של Firebase ליצירת אפליקציות Flutter:
• Cloud Storage
• Cloud Functions
• מסד נתונים בזמן אמת

מידע נוסף

• האתר של Firebase: firebase.google.com
• אתר Flutter: flutter.dev
• ווידג'טים של FlutterFire Firebase Flutter: firebase.flutter.dev
• ערוץ YouTube של Firebase
• ערוץ YouTube של Flutter

ספארקי כאן כדי לחגוג איתך!