דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

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

צאו לסיור במסגרת של Flutter Widget
כדאי לנסות את ה-Codelab של Write Your First Flutter App, חלק 1

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

מה תייצרו

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

מה תלמדו

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

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

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

מה צריך להכין

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

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

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

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

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

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

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

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

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

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

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

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

לפני שנתחיל עליך להוריד את קוד ההתחלה ולהתקין את ה-CLI של Firebase.

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

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

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

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

gh repo clone flutter/codelabs flutter-codelabs

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

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

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

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

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

התקנת Firebase CLI

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

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

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

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

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

firebase login

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

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

firebase projects:list

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

התקנת ה-CLI של FlutterFire

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

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

dart pub global activate flutterfire_cli

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

flutterfire -—help

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

הגדרת FlutterFire

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

flutterfire configure

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

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

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

בסיום התהליך, בודקים את האפליקציה Flutter בעורך הטקסט. FlutterFire CLI יצר קובץ חדש בשם 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',
 );
}

מערכת 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());
}

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

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

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

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

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

ממשק המשתמש של FlutterFire מחייב את האפליקציה להיות עטופה ב-MaterialApp או ב-CupertinoApp. בהתאם לבחירה שלכם, ממשק המשתמש ישקף באופן אוטומטי את ההבדלים בין הווידג'טים Material או קופרטינו. בקודלאב הזה, משתמשים ב-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 הוא ווידג'ט שיוצר את עצמו על סמך תמונת המצב האחרונה של הנתונים ממקור נתונים שאתם מעבירים אותו. התוכן נוצר מחדש באופן אוטומטי כשהסטרימינג מפיק תמונת מצב חדשה.

מעדכנים את הקוד ב-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, מוסיף את הפונקציונליות הבאה:

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

שוב, לשם כך נדרשות רק כמה שורות קוד. בודקים את הקוד בווידג'ט של 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 זהה ל-CaptionBuilder. היא לא חושפת את 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.

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.

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

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

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

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

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

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

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

ממשק המשתמש של FlutterFire מספק גם ווידג'ט 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 method.. כשמקישים על IconButton, האפליקציה יוצרת מסלול אנונימי חדש ומנווטת אליו. במסלול הזה יוצג הווידג'ט ProfileScreen, שמוחזר מה-callback של MaterialPageRoute.builder.

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

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

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

בשלב הזה, אם תלחצו על הלחצן 'יציאה', האפליקציה לא תשתנה. הפעולה תוציא אותך מהחשבון, אבל לא תועברו בחזרה לווידג'ט 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.

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

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

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

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 במסוף Firebase:

עוברים למסך Authentication sign-in providers במסוף.
לוחצים על 'הוספת ספק חדש'.
בוחרים באפשרות '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, זה השלב היחיד שצריך להוסיף כדי שזה יעבוד. בפלטפורמות אחרות צריך לבצע שלבים נוספים, ונדון בהם בהמשך.

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

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

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

הגדרת iOS

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

עוברים למסך Project Settings (הגדרות הפרויקט) במסוף Firebase. יופיע כרטיס עם פירוט של אפליקציות Firebase שלך, שנראות כך:
לוחצים על iOS. שים לב ששם האפליקציה שלך יהיה שונה משם האפליקציה שלי. אם השתמשתם בפרויקט flutter-codelabs/firebase-auth-flutterfire-ui/start כדי לעקוב אחרי הקודלאב הזה, במקום 'הושלם' יופיע הכיתוב 'התחלה'.
לוחצים על הלחצן עם הכיתוב GoogleServices-Info.plist כדי להוריד את קובץ התצורה הדרוש.
גוררים את הקובץ שהורדתם ומשחררים אותו בספרייה שנקראת ‎ ./ios/Runner בפרויקט Flutter.
כדי לפתוח את Xcode, מריצים את פקודת הטרמינל הבאה מהרמה הבסיסית (root) של הפרויקט: open ios/Runner.xcworkspace
לוחצים לחיצה ימנית על ספריית Runner ובוחרים באפשרות 'הוספת קבצים ל-Runner'.
בוחרים את GoogleService-Info.plist מנהל הקבצים.
חזרה לעורך הטקסט (שאינו 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 -->

עליך להחליף את ה-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',
);

מדביקים את הערך הזה בארגומנט 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. כל הכבוד!

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

הנושאים שטיפלנו בהם

הגדרת אפליקציית Flutter לשימוש ב-Firebase
הגדרת פרויקט Firebase במסוף Firebase
CLI של FlutterFire
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

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

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

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

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

מה תייצרו

מה תלמדו

מה צריך להכין

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

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

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

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

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

התקנת Firebase CLI

התקנת ה-CLI של FlutterFire

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

הגדרת FlutterFire

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

מפעילים את Firebase

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

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

בדיקת סטטוס האימות

5. מסך הכניסה

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

headerBuilder

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

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

Side Builder

יצירת משתמש

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

הוספת ווידג'ט למסך הפרופיל

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

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

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

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

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

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

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

הגדרת iOS

8. כל הכבוד!

הנושאים שטיפלנו בהם

השלבים הבאים

מידע נוסף