أضف تدفق مصادقة المستخدم إلى تطبيق Flutter باستخدام FirebaseUI

1. قبل أن تبدأ

في هذا الدرس التطبيقي حول التعليمات البرمجية، ستتعلم كيفية إضافة مصادقة Firebase إلى تطبيق Flutter باستخدام حزمة FlutterFire UI. باستخدام هذه الحزمة، ستضيف كلاً من مصادقة البريد الإلكتروني/كلمة المرور ومصادقة تسجيل الدخول إلى Google إلى تطبيق Flutter. ستتعلم أيضًا كيفية إعداد مشروع Firebase، واستخدام FlutterFire CLI لتهيئة Firebase في تطبيق Flutter.

المتطلبات الأساسية

يفترض هذا الدرس التطبيقي حول البرمجة أن لديك بعض الخبرة في Flutter. إذا لم يكن الأمر كذلك، فقد ترغب في تعلم الأساسيات أولاً. الروابط التالية مفيدة:

يجب أن تتمتع أيضًا ببعض الخبرة في Firebase، لكن لا بأس إذا لم تقم مطلقًا بإضافة Firebase إلى مشروع Flutter. إذا لم تكن معتادًا على وحدة تحكم Firebase، أو كنت جديدًا تمامًا على Firebase تمامًا، فاطلع على الروابط التالية أولاً:

ما سوف تقوم بإنشائه

يرشدك هذا الدرس التطبيقي حول التعليمات البرمجية خلال إنشاء تدفق المصادقة لتطبيق Flutter، باستخدام Firebase للمصادقة. سيحتوي التطبيق على شاشة تسجيل دخول، وشاشة "تسجيل"، وشاشة استعادة كلمة المرور، وشاشة ملف تعريف المستخدم.

6604fc9157f2c6ae.pngeab9509a41074930.pngda49189a5838e0bb.pngb2ccfb3632b77878.png

ما ستتعلمه

يغطي هذا الدرس التطبيقي حول الترميز ما يلي:

  • إضافة 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

يهتم هذا الدرس التطبيقي على وجه التحديد بإضافة نظام مصادقة قوي باستخدام الحزمة firebase_ui_auth . كما سترى، يمكن تنفيذ هذا التطبيق بأكمله، مع جميع الميزات المذكورة أعلاه، بحوالي 100 سطر من التعليمات البرمجية.

ماذا ستحتاج

  • معرفة عملية بـ Flutter وتثبيت SDK
  • محرر نصوص (يتم دعم JetBrains IDE وAndroid Studio وVS Code بواسطة Flutter)
  • متصفح Google Chrome، أو هدف التطوير المفضل لديك الآخر لـ Flutter. (تفترض بعض أوامر الوحدة الطرفية في هذا الدرس التطبيقي حول الترميز أنك تقوم بتشغيل تطبيقك على Chrome)

2. إنشاء وإعداد مشروع Firebase

المهمة الأولى التي ستحتاج إلى إكمالها هي إنشاء مشروع Firebase في وحدة تحكم الويب الخاصة بـ Firebase.

إنشاء مشروع Firebase

  1. قم بتسجيل الدخول إلى Firebase .
  2. في وحدة تحكم Firebase، انقر على إضافة مشروع (أو إنشاء مشروع )، وأدخل اسمًا لمشروع Firebase الخاص بك (على سبيل المثال، " FlutterFire-UI-Codelab ").

df42a5e3d9584b48.png

  1. انقر فوق خيارات إنشاء المشروع. اقبل شروط Firebase إذا طُلب منك ذلك. تخطي إعداد Google Analytics، لأنك لن تستخدم Analytics لهذا التطبيق.

d1fcec48bf251eaa.png

لمعرفة المزيد حول مشاريع Firebase، راجع فهم مشاريع Firebase .

يستخدم التطبيق الذي تقوم بإنشائه مصادقة Firebase للسماح للمستخدمين بتسجيل الدخول إلى تطبيقك. كما يسمح للمستخدمين الجدد بالتسجيل من تطبيق Flutter.

يجب تمكين مصادقة Firebase باستخدام Firebase Console، كما تحتاج إلى تكوين خاص بمجرد تمكينها.

تمكين تسجيل الدخول عبر البريد الإلكتروني لمصادقة Firebase

للسماح للمستخدمين بتسجيل الدخول إلى تطبيق الويب، عليك أولاً استخدام طريقة تسجيل الدخول بالبريد الإلكتروني/كلمة المرور . لاحقًا، ستضيف طريقة تسجيل الدخول إلى Google .

  1. في وحدة تحكم Firebase، قم بتوسيع قائمة Build في اللوحة اليمنى.
  2. انقر فوق المصادقة ، ثم انقر فوق زر البدء ، ثم علامة التبويب طريقة تسجيل الدخول (أو انقر هنا للانتقال مباشرة إلى علامة التبويب طريقة تسجيل الدخول ).
  3. انقر فوق البريد الإلكتروني/كلمة المرور في قائمة موفري تسجيل الدخول ، وقم بتعيين مفتاح التمكين على وضع التشغيل، ثم انقر فوق حفظ . 58e3e3e23c2f16a4.png

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

إذا كنت تريد التخطي للأمام، أو معرفة الشكل الذي يجب أن يبدو عليه الشيء عند اكتماله، فابحث في الدليل المسمى مكتمل للإشارة إلى الإسناد الترافقي.

إذا كنت ترغب في متابعة دروس التعليمات البرمجية وإضافة تعليمات برمجية بنفسك، فيجب أن تبدأ باستخدام تطبيق Flutter على flutter-codelabs/firebase-auth-flutterfire-ui/start ، وإضافة تعليمات برمجية إلى هذا المشروع خلال مختبر التعليمات البرمجية. افتح هذا الدليل أو قم باستيراده إلى IDE المفضل لديك.

قم بتثبيت Firebase CLI

يوفر Firebase CLI أدوات لإدارة مشاريع Firebase الخاصة بك. سطر الأوامر مطلوب لـ FlutterFire CLI، والذي ستقوم بتثبيته بعد قليل.

هناك مجموعة متنوعة من الطرق لتثبيت CLI. إن أبسط طريقة، إذا كنت تستخدم MacOS أو Linux، هي تشغيل هذا الأمر من جهازك الطرفي:

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

بعد تثبيت واجهة سطر الأوامر (CLI)، يجب عليك المصادقة باستخدام Firebase.

  1. قم بتسجيل الدخول إلى Firebase باستخدام حساب Google الخاص بك عن طريق تشغيل الأمر التالي:
firebase login
  1. يقوم هذا الأمر بتوصيل جهازك المحلي بـ Firebase ويمنحك حق الوصول إلى مشاريع Firebase الخاصة بك.
  1. اختبر ما إذا تم تثبيت واجهة سطر الأوامر (CLI) بشكل صحيح وإمكانية الوصول إلى حسابك من خلال إدراج مشاريع Firebase الخاصة بك. قم بتشغيل الأمر التالي:
firebase projects:list
  1. يجب أن تكون القائمة المعروضة مماثلة لمشاريع 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 1359cdeb83204baa.png
  2. حدد الأنظمة الأساسية التي تريد استخدامها. في هذا الدرس التطبيقي حول التعليمات البرمجية، توجد خطوات لتكوين مصادقة Firebase لـ Flutter للويب وiOS وAndroid، ولكن يمكنك إعداد مشروع Firebase الخاص بك لاستخدام جميع الخيارات. 301c9534f594f472.png
  3. تعرض لقطة الشاشة هذه المخرجات في نهاية العملية. إذا كنت على دراية بـ Firebase، ستلاحظ أنه لم يكن عليك إنشاء تطبيقات النظام الأساسي (على سبيل المثال، تطبيق Android) في وحدة التحكم، وقد قام FlutterFire CLI بذلك نيابةً عنك. 12199a85ade30459.png

عند اكتمال ذلك، انظر إلى تطبيق 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 الكلمة التطبيقية للإشارة إلى إنشاء محدد لمنصة معينة في مشروع Firebase. على سبيل المثال، يحتوي مشروع Firebase المسمى FlutterFire-ui-codelab على تطبيقات متعددة: واحد لنظام Android، وواحد لنظام iOS، وواحد لنظام MacOS، وواحد للويب.

تستخدم الطريقة DefaultFirebaseOptions.currentPlatform تعداد TargetPlatform الذي كشفه Flutter لاكتشاف النظام الأساسي الذي يعمل عليه تطبيقك، ثم تقوم بإرجاع قيم تكوين Firebase المطلوبة لتطبيق Firebase الصحيح.

أضف حزم Firebase إلى تطبيق Flutter

خطوة الإعداد النهائية هي إضافة حزم Firebase ذات الصلة إلى مشروع Flutter الخاص بك. يجب أن يحتوي ملف firebase_options.dart على أخطاء، لأنه يعتمد على حزم Firebase التي لم تتم إضافتها بعد. في الوحدة الطرفية، تأكد من أنك في جذر مشروع Flutter على 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 UI الأولية

يوفر Firebase UI for Auth عناصر واجهة مستخدم تمثل شاشات كاملة في تطبيقك. تتعامل هذه الشاشات مع تدفقات المصادقة المختلفة عبر تطبيقك، مثل تسجيل الدخول والتسجيل ونسيان كلمة المرور وملف تعريف المستخدم والمزيد. للبدء، أضف صفحة مقصودة إلى تطبيقك تعمل كحارس مصادقة للتطبيق الرئيسي.

المواد أو تطبيق كوبرتينو

تتطلب FlutterFire UI أن يكون تطبيقك مغلفًا إما بـ MaterialApp أو CupertinoApp. اعتمادًا على اختيارك، ستعكس واجهة المستخدم تلقائيًا الاختلافات في عناصر واجهة المستخدم الخاصة بالمادة أو كوبرتينو. بالنسبة إلى هذا الدرس التطبيقي حول التعليمات البرمجية، استخدم 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 UI.)

يجب تحديث هذه الأداة لتشمل دفق authStateChanges .

تقوم واجهة برمجة التطبيقات authStateChanges بإرجاع Stream مع المستخدم الحالي (إذا كان مسجلاً الدخول)، أو فارغًا إذا لم يكن كذلك. للاشتراك في هذه الحالة في تطبيقنا، يمكنك استخدام أداة Flutter's StreamBuilder وتمرير الدفق إليها.

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 UI. سيكون هذا هو محور الخطوة التالية في هذا الدرس التطبيقي حول الترميز. عند تشغيل التطبيق في هذه المرحلة، يجب أن تشاهد شاشة تسجيل دخول فارغة.

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 ، يمكنك إضافة أي عناصر واجهة مستخدم تريدها أعلى نموذج تسجيل الدخول. قم بتحديث ملف 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 UI.

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

نظرًا لأنه رد اتصال، فإنه يعرض القيم التي يمكنك استخدامها، مثل BuildContext و BoxConstraints ، ويتطلب منك إرجاع عنصر واجهة مستخدم. يتم عرض القطعة التي تقوم بإعادتها في الجزء العلوي من الشاشة. في هذا المثال، يضيف الكود الجديد صورة إلى أعلى الشاشة. يجب أن يبدو تطبيقك الآن بهذا الشكل.

73d7548d91bbd2ab.png

منشئ الترجمة

تعرض شاشة تسجيل الدخول ثلاث معلمات إضافية تتيح لك تخصيص الشاشة: subtitleBuilder و footerBuilder و sideBuilder .

يختلف subtitleBuilder قليلاً من حيث أن وسيطات رد الاتصال تتضمن إجراءً من النوع 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 UI نقطة توقف لتحديد ما إذا كان يجب عرض محتوى الرأس (على الشاشات الطويلة، مثل الهاتف المحمول) أو يجب عرض المحتوى الجانبي (على الشاشات العريضة أو سطح المكتب أو الويب). على وجه التحديد، إذا كان عرض الشاشة أكثر من 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).

8dc60b4e5d7dd2d0.png

إنشاء مستخدم

عند هذه النقطة، تم الانتهاء من كافة التعليمات البرمجية لهذه الشاشة. ومع ذلك، قبل أن تتمكن من تسجيل الدخول، تحتاج إلى إنشاء مستخدم. يمكنك القيام بذلك من خلال شاشة "التسجيل"، أو يمكنك إنشاء مستخدم في وحدة تحكم Firebase.

لاستخدام وحدة التحكم:

  1. انتقل إلى جدول "المستخدمين" في وحدة تحكم Firebase.
  2. انقر هنا
  3. حدد "flutterfire-ui-codelab" (أو مشروعًا آخر إذا استخدمت اسمًا مختلفًا). سترى هذا الجدول:

f038fd9a58ed60d9.png

  1. انقر فوق الزر "إضافة مستخدم".

2d78390d4c5dbbfa.png

  1. أدخل عنوان البريد الإلكتروني وكلمة المرور للمستخدم الجديد. يمكن أن يكون هذا بريدًا إلكترونيًا وكلمة مرور مزيفين، كما أدخلته في الصورة أدناه. سيعمل ذلك، لكن وظيفة "نسيت كلمة المرور" لن تعمل إذا كنت تستخدم عنوان بريد إلكتروني مزيفًا.

62ba0feb33d54add.png

  1. انقر فوق "إضافة مستخدم"

32b236b3ef94d4c7.png

الآن، يمكنك العودة إلى تطبيق Flutter الخاص بك، وتسجيل دخول المستخدم عبر صفحة تسجيل الدخول. يجب أن يبدو تطبيقك كما يلي:

dd43d260537f3b1a.png

6. شاشة الملف الشخصي

توفر FlutterFire UI أيضًا أداة 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(),
          ],
        ),
      ),
    );
  }
}

رمز الملاحظة الجديد هو رد الاتصال الذي تم تمريره إلى IconButton.isPressed method. عند الضغط على زر IconButton ، يقوم تطبيقك بإنشاء مسار مجهول جديد وينتقل إليه. سيعرض هذا المسار عنصر واجهة المستخدم ProfileScreen ، الذي يتم إرجاعه من رد الاتصال MaterialPageRoute.builder .

أعد تحميل تطبيقك، واضغط على الرمز الموجود في الجزء العلوي الأيمن (في شريط التطبيق)، وسيعرض صفحة مثل هذه:

36487fc4ab4f26a7.png

هذه هي واجهة المستخدم القياسية التي توفرها صفحة FlutterFire UI. جميع الأزرار وحقول النص متصلة بـ 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 إلى أن يكون المستخدم الحالي فارغًا.

من خلال إضافة رد اتصال يستدعي 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 أيضًا على وسيطة اختيارية تسمى الأطفال. تقبل هذه الوسيطة قائمة من عناصر واجهة المستخدم، وسيتم وضع هذه الأدوات عموديًا داخل عنصر واجهة مستخدم العمود المستخدم بالفعل داخليًا لإنشاء شاشة ملف التعريف. ستضع أداة العمود هذه في طريقة إنشاء 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(),
          ],
        ),
      ),
    );
  }
}

أعد تحميل تطبيقك، وسيظهر لك هذا على الشاشة:

ebe5792b765dbf87.png

7. تسجيل الدخول إلى Google Auth متعدد المنصات

توفر واجهة FlutterFire أيضًا عناصر واجهة مستخدم ووظائف للمصادقة مع موفري خدمات خارجيين، مثل Google وTwitter وFacebook وApple و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. انقر فوق "إضافة مزود جديد". 8286fb28be94bf30.png
  3. حدد "جوجل". c4e28e6f4974be7f.png
  4. قم بتبديل المفتاح المسمى "تمكين"، ثم اضغط على "حفظ". e74ff86990763826.png
  5. إذا ظهر نموذج يتضمن معلومات حول تنزيل ملفات التكوين، فانقر فوق "تم".
  6. تأكد من إضافة موفر تسجيل الدخول إلى Google. 5329ce0543c90d95.png

أضف زر تسجيل الدخول إلى 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.

aca71a46a011bfb5.png

تكوين زر تسجيل الدخول

لا يعمل الزر بدون تكوين إضافي. إذا كنت تقوم بالتطوير باستخدام Flutter Web، فهذه هي الخطوة الوحيدة التي يجب عليك إضافتها حتى يعمل هذا. تتطلب الأنظمة الأساسية الأخرى خطوات إضافية، والتي سيتم مناقشتها بعد قليل.

  1. انتقل إلى صفحة موفري المصادقة في Firebase Console .
  2. انقر على مزود جوجل. 9b3a325c5eca6e49.png
  3. انقر على لوحة التوسعة "تكوين Web SDK".
  4. انسخ القيمة من "معرف عميل الويب" 711a79f0d931c60f.png
  5. ارجع إلى محرر النصوص الخاص بك، وقم بتحديث مثيل GoogleProvider في الملف auth_gate.dart عن طريق تمرير هذا المعرف إلى المعلمة المسماة clientId .
GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

بمجرد إدخال معرف عميل الويب، أعد تحميل تطبيقك. عندما تضغط على الزر "تسجيل الدخول باستخدام Google"، ستظهر نافذة جديدة (إذا كنت تستخدم الويب) ترشدك خلال تدفق تسجيل الدخول بحساب Google. في البداية، يبدو الأمر كما يلي:

14e73e3c9de704bb.png

تكوين دائرة الرقابة الداخلية

لكي يعمل هذا على نظام التشغيل iOS، هناك عملية تكوين إضافية.

  1. انتقل إلى شاشة إعدادات المشروع في وحدة تحكم Firebase . ستكون هناك بطاقة تسرد تطبيقات Firebase الخاصة بك والتي تبدو كما يلي: fefa674acbf213cc.png
  2. انقر على دائرة الرقابة الداخلية. لاحظ أن اسم التطبيق الخاص بك سيكون مختلفًا عن اسمي. عندما يقول لي "مكتمل" سيقول لك "ابدأ"، إذا كنت تستخدم مشروع flutter-codelabs/firebase-auth-flutterfire-ui/start للمتابعة مع هذا الدرس التطبيقي للبرمجة.
  3. انقر فوق الزر الذي يحمل عبارة "GoogleServices-Info.plist" لتنزيل ملف التكوين المطلوب. f89b3192871dfbe3.png
  4. قم بسحب وإسقاط الملف الذي تم تنزيله إلى الدليل المسمى . /ios/Runner في مشروع Flutter الخاص بك.
  5. افتح Xcode عن طريق تشغيل الأمر الطرفي التالي من جذر مشروعك:

افتح iOS/Runner.xcworkspace

  1. انقر بزر الماوس الأيمن على دليل Runner وحدد Add Files to "Runner". 858986063a4c5201.png
  2. حدد GoogleService-Info.plist من مدير الملفات.
  3. بالعودة إلى محرر النصوص الخاص بك (الذي ليس 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 UI لـ Flutter codelab. يمكنك العثور على الكود المكتمل لهذا Codelab في الدليل "الكامل" على github: Flutter Codelabs

ما قمنا بتغطيته

  • إعداد تطبيق Flutter لاستخدام Firebase
  • إعداد مشروع Firebase في وحدة تحكم Firebase
  • فلاترفيري سطر الأوامر
  • Firebase CLI
  • باستخدام مصادقة Firebase
  • استخدام FlutterFire UI للتعامل مع مصادقة Firebase في تطبيق Flutter بسهولة

الخطوات التالية

يتعلم أكثر

سباركي هنا للاحتفال معك!

2a0ad195769368b1.gif