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

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

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

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

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

• צא לסיור במסגרת ה-Flutter Widget
• נסה את אפליקציית Write Your First Flutter, חלק 1 codelab

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

• מסמכי Firebase Fundamentals
• הכר את Firebase עם Flutter codelab .

מה אתה תיצור

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

מה תלמד

מעבדת קוד זה מכסה:

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

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

מה אתה צריך

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

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

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

צור פרויקט Firebase

1. היכנס ל- Firebase .
2. במסוף Firebase, לחץ על הוסף פרוייקט (או צור פרוייקט ), והזן שם עבור פרוייקט Firebase שלך ​​(לדוגמה, " FlutterFire-UI-Codelab ").

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

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

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

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

אפשר כניסה בדוא"ל עבור אימות Firebase

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

1. במסוף Firebase, הרחב את תפריט Build בחלונית השמאלית.
2. לחץ על אימות ולאחר מכן לחץ על הלחצן התחל , ולאחר מכן על הכרטיסייה שיטת כניסה (או לחץ כאן כדי לעבור ישירות לכרטיסייה שיטת כניסה ).
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 במחשב שלך, המכילה את הקוד עבור אוסף קודlabs. הקוד עבור מעבד קוד זה נמצא בספריית המשנה 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 נדרש עבור FlutterFire CLI, אותו תתקין בעוד מעט.

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

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

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

1. היכנס ל-Firebase באמצעות חשבון Google שלך ​​על ידי הפעלת הפקודה הבאה:

firebase login

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

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

firebase projects:list

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

התקן את FlutterFire CLI

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, תשימו לב שלא הייתם צריכים ליצור אפליקציות פלטפורמה (למשל אפליקציית אנדרואיד) בקונסולה, וה-FlutterFire CLI עשה זאת עבורכם.

כשזה יושלם, עיין באפליקציית 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.appspot.com',
   measurementId: 'G-DGF0CP099H',
 );

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

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

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

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

השיטה DefaultFirebaseOptions.currentPlatform משתמשת ב- TargetPlatform enum שנחשף על ידי 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 UI for Auth מספק ווידג'טים המייצגים מסכים שלמים באפליקציה שלך. מסכים אלו מטפלים בזרימות אימות שונות בכל האפליקציה שלך, כגון כניסה, הרשמה, שכחת סיסמה, פרופיל משתמש ועוד. כדי להתחיל, הוסף לאפליקציה שלך דף נחיתה שמתפקד כשומר אימות לאפליקציה הראשית.

חומר או אפליקציית 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 בשיטת הבנייה שלו. (זהו ווידג'ט מותאם אישית, לא מסופק על ידי ממשק המשתמש של 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 , הזרם שהוזכר לעיל, שיחזיר אובייקט Firebase User אם המשתמש אומת. (אחרת זה יחזיר null .)
• לאחר מכן, הקוד משתמש snapshot.hasData כדי לבדוק אם הערך מהזרם מכיל את אובייקט User .
• אם לא, הוא יחזיר ווידג'ט SignInScreen . נכון לעכשיו, המסך הזה לא יעשה כלום. זה יעודכן בשלב הבא.
• אחרת, הוא מחזיר HomeScreen , שהוא החלק העיקרי של האפליקציה שרק משתמשים מאומתים יכולים לגשת אליו.

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

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 , אתה יכול להוסיף כל ווידג'טים שתרצה מעל טופס הכניסה. עדכן את הקובץ 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,
);

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

בונה כתוביות

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

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

עדכן את הקוד ב-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();
     },
   );
 }}

בונה צד

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

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

נווט אל הקובץ 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(),
          ],
        ),
      ),
    );
  }
}

קוד הערה החדש הוא השיחה חזרה IconButton.isPressed method. כאשר IconButton נלחץ, האפליקציה שלך יוצרת מסלול אנונימי חדש ומנווטת אליו. מסלול זה יציג את הווידג'ט ProfileScreen , המוחזר מהקריאה חוזרת MaterialPageRoute.builder .

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

זהו ממשק המשתמש הסטנדרטי המסופק על ידי דף ממשק המשתמש של FlutterFire. כל הלחצנים ושדות הטקסט מחוברים ל-Firebase Auth ופועלים מחוץ לקופסה. לדוגמה, אתה יכול להזין שם בשדה הטקסט "שם", וממשק המשתמש של FlutterFire יקרא לשיטת 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 קורא לפונקציית התקשרות חוזרת שאתה נותן לה כאשר מצב האימות של Firebase משתנה ל-currentUser שהוא null.

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

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

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

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

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

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

הפעל את ספק הכניסה של Google

לאחר מכן, הפעל את ספק Google ב- Firebase Console :

1. נווט אל מסך ספקי הכניסה של אימות במסוף.
2. לחץ על "הוסף ספק חדש".
3. בחר "גוגל".
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. נווט אל הדף ספקי אימות ב- Firebase Console .
2. לחץ על הספק של גוגל.
3. לחץ על לוח ההרחבה "תצורת Web SDK".
4. העתק את הערך מ'מזהה לקוח אינטרנט'
5. חזור לעורך הטקסט שלך ועדכן את המופע של GoogleProvider בקובץ auth_gate.dart על ידי העברת מזהה זה לפרמטר clientId בשם.

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

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

הגדר את iOS

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

1. נווט אל מסך הגדרות הפרויקט במסוף Firebase . יהיה כרטיס שמפרט את יישומי Firebase שלך ​​שנראה כך:
2. לחץ על ה-iOS. שים לב ששם האפליקציה שלך יהיה שונה משלי. במקום שלי כתוב "השלם" שלך יגיד "התחל", אם השתמשת בפרויקט flutter-codelabs/firebase-auth-flutterfire-ui/start כדי לעקוב אחרי מעבדת הקוד הזה.
3. לחץ על הלחצן שאומר "GoogleServices-Info.plist" כדי להוריד את קובץ התצורה הדרוש.
4. גרור ושחרר את הקובץ שהורד לספרייה שנקראת . /ios/Runner בפרויקט Flutter שלך.
5. פתח את Xcode על ידי הפעלת פקודת הטרמינל הבאה מהשורש של הפרויקט שלך:

פתח את 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 -->

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

8. מזל טוב!

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

מה שכיסינו

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

הצעדים הבאים

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

למד עוד

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

Sparky כאן כדי לחגוג איתך!