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

1- قبل البدء

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

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

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

• جولة في إطار عمل التطبيقات المصغّرة في Flutter
• جرِّب الدرس التطبيقي كتابة أول تطبيق باستخدام Flutter، الجزء 1.

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

• مستندات أساسيات Firebase
• التعرّف على Firebase باستخدام الدرس التطبيقي حول ترميز Flutter

المحتوى الذي ستُنشئه

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

ما ستتعرّف عليه

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

• إضافة Firebase إلى تطبيق Flutter
• إعداد "وحدة تحكّم Firebase"
• استخدام Firebase CLI لإضافة Firebase إلى تطبيقك
• استخدام FlutterFire CLI لإنشاء إعدادات Firebase في Dart
• إضافة Firebase Authentication إلى تطبيقك المكتوب باستخدام Flutter
• إعداد Firebase Authentication في وحدة التحكّم
• إضافة ميزة تسجيل الدخول باستخدام عنوان البريد الإلكتروني وكلمة المرور من خلال حزمة firebase_ui_auth
• إضافة تسجيل المستخدمين باستخدام حزمة firebase_ui_auth
• إضافة صفحة "هل نسيت كلمة المرور؟"
• إضافة ميزة "تسجيل الدخول باستخدام حساب Google" من خلال firebase_ui_auth
• ضبط إعدادات تطبيقك للعمل مع موفّري خدمات تسجيل دخول متعدّدين
• إضافة شاشة ملف شخصي للمستخدم إلى تطبيقك باستخدام حزمة firebase_ui_auth

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

المتطلبات

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

2- إنشاء مشروع على Firebase وإعداده

أول مهمة عليك إكمالها هي إنشاء مشروع Firebase في وحدة تحكّم الويب في Firebase.

إنشاء مشروع على Firebase

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

3. انقر على خيارات إنشاء المشروع. اقبل بنود Firebase إذا طُلب منك ذلك. تخطّى إعداد "إحصاءات Google" لأنّك لن تستخدم "إحصاءات Google" لهذا التطبيق.

لمزيد من المعلومات عن مشاريع Firebase، يُرجى الاطّلاع على مقالة فهم مشاريع Firebase.

تفعيل تسجيل الدخول باستخدام البريد الإلكتروني في Firebase Authentication

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

يجب تفعيل Firebase Authentication باستخدام "وحدة تحكّم Firebase"، كما يجب إجراء إعدادات خاصة بعد تفعيله.

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

1. في وحدة تحكّم Firebase، وسِّع قائمة الإنشاء في اللوحة اليمنى.
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 على جهازك، والذي يحتوي على الرمز البرمجي لمجموعة من ورشات عمل رموز برمجية. يمكن العثور على رمز هذا الدرس التطبيقي حول الترميز في الدليل الفرعي 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 وإضافة رمز إلى هذا المشروع خلال الدرس التطبيقي. افتح هذا الدليل أو استورِده إلى بيئة تطوير البرامج المتكاملة المفضّلة لديك.

تثبيت Firebase CLI

توفّر أداة Firebase CLI أدوات لإدارة مشاريعك على Firebase. يجب تثبيت واجهة برمجة التطبيقات (CLI) لاستخدام واجهة برمجة التطبيقات (CLI) في FlutterFire، والتي سيتم تثبيتها بعد قليل.

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

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

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

1. سجِّل الدخول إلى Firebase باستخدام حسابك على Google من خلال تنفيذ الأمر التالي:

firebase login

2. يربط هذا الأمر جهازك المحلي بـ Firebase ويمنحك إذن الوصول إلى مشاريعك على Firebase.

3. تأكَّد من أنّ أداة CLI مثبَّتة بشكلٍ صحيح وأنّها يمكنها الوصول إلى حسابك من خلال إدراج مشاريعك على Firebase. نفِّذ الأمر التالي:

firebase projects:list

4. يجب أن تكون القائمة المعروضة مطابقة لمشاريع Firebase المدرَجة في وحدة تحكّم Firebase. من المفترض أن تظهر لك flutterfire-ui-codelab.

تثبيت واجهة سطر أوامر FlutterFire

‫FlutterFire CLI هي أداة تساعد في تسهيل عملية تثبيت Firebase على جميع المنصات المتوافقة في تطبيقك على Flutter، وهي مبنية على Firebase CLI.

أولاً، ثبِّت سطر الأوامر:

dart pub global activate flutterfire_cli

تأكَّد من تثبيت واجهة برمجة التطبيقات. نفِّذ الأمر التالي وتأكَّد من أنّ واجهة سطر الأوامر تعرِض قائمة المساعدة.

flutterfire -—help

إضافة مشروعك على Firebase إلى تطبيقك على Flutter

ضبط FlutterFire

يمكنك استخدام FlutterFire لإنشاء رمز Dart البرمجي المطلوب لاستخدام Firebase في تطبيقك المكتوب بلغة Flutter.

flutterfire configure

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

تعرض لقطات الشاشة التالية الطلبات التي عليك الإجابة عنها.

1. اختَر المشروع الذي تريد استخدامه. في هذه الحالة، استخدِم flutterfire-ui-codelab
2. اختَر المنصات التي تريد استخدامها. في هذا الدليل التعليمي حول الرموز البرمجية، تتوفّر خطوات لضبط Firebase Authentication لتطبيق Flutter على الويب وأجهزة iOS وAndroid، ولكن يمكنك إعداد مشروعك على Firebase لاستخدام جميع الخيارات.
3. تعرض لقطة الشاشة هذه النتيجة في نهاية العملية. إذا كنت على دراية بمنصّة Firebase، ستلاحظ أنّه لم يكن عليك إنشاء تطبيقات لمنصّة معيّنة (مثل تطبيق Android) في وحدة التحكّم، بل نفّذت أداة 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.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 كلمة "تطبيق" للإشارة إلى إصدار محدّد لمنصّة معيّنة في مشروع Firebase. على سبيل المثال، يحتوي مشروع Firebase المُسمى FlutterFire-ui-codelab على تطبيقات متعدّدة: تطبيق لنظام التشغيل Android وتطبيق لنظام التشغيل iOS وتطبيق لنظام التشغيل MacOS وتطبيق للويب.

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

إضافة حِزم Firebase إلى تطبيق Flutter

الخطوة الأخيرة في الإعداد هي إضافة حِزم Firebase ذات الصلة إلى مشروعك على Flutter. من المفترض أن يتضمّن ملف firebase_options.dart أخطاء، لأنّه يعتمد على حِزم Firebase التي لم تتم إضافتها بعد. في المحطة الطرفية، تأكَّد من أنّك في جذر مشروع Flutter على flutter-codelabs/firebase-emulator-suite/start. بعد ذلك، شغِّل الأوامر الثلاثة التالية:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

هذه هي الحِزم الوحيدة التي تحتاجها في الوقت الحالي.

إعداد Firebase

لاستخدام الحِزم التي تمت إضافتها، يجب أن يُعدِّل DefaultFirebaseOptions.currentPlatform, الرمز البرمجي في الدالة main في ملف main.dart.

main.dart

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


 runApp(const MyApp());
}

تؤدي هذه التعليمات البرمجية عمليتين.

1. يطلب WidgetsFlutterBinding.ensureInitialized() من Flutter عدم بدء تشغيل رمز التطبيق المصغّر إلى أن يتم تشغيل إطار عمل Flutter بالكامل. يستخدم Firebase قنوات النظام الأساسي الأصلية التي تتطلّب تشغيل الإطار العمل.
2. Firebase.initializeApp لإعداد اتصال بين تطبيقك المكتوب بلغة Flutter ومشروعك على Firebase يتم استيراد DefaultFirebaseOptions.currentPlatform من ملف firebase_options.dart الذي تم إنشاؤه. ترصد هذه القيمة الثابتة المنصة التي تستخدمها، وتُدخل مفاتيح Firebase المقابلة.

4. إضافة صفحة التفويض الأولية لواجهة مستخدم Firebase

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

تطبيق Material أو Cupertino

تتطلّب واجهة مستخدم FlutterFire أن يكون تطبيقك ملفوفًا في MaterialApp أو CupertinoApp. استنادًا إلى اختيارك، سيعكس واجهة المستخدم تلقائيًا الاختلافات بين التطبيقات المصغّرة بتصميم Material أو Cupertino. في هذا الدليل التعليمي حول الرموز البرمجية، استخدِم MaterialApp، الذي سبق أن تمت إضافته إلى التطبيق في app.dart.

app.dart

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

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

التحقّق من حالة المصادقة

قبل أن تتمكّن من عرض شاشة تسجيل الدخول، عليك تحديد ما إذا كان المستخدم قد تم مصادقة هويته حاليًا. وأكثر الطرق شيوعًا للتحقّق من ذلك هي الاستماع إلى أحداث authStateChanges في FirebaseAuth باستخدام مكوّن Firebase Auth الإضافي.

في نموذج الرمز أعلاه، ينشئ MaterialApp تطبيقًا مصغّرًا AuthGate في طريقة الإنشاء. (هذه أداة مخصّصة لا تقدّمها واجهة مستخدم FlutterFire).

يجب تحديث التطبيق المصغّر هذا لتضمين بث authStateChanges.

تعرض واجهة برمجة التطبيقات authStateChanges Stream مع المستخدم الحالي (إذا كان مسجِّلاً الدخول) أو قيمة فارغة إذا لم يكن مسجِّلاً الدخول. للاشتراك في هذه الحالة في تطبيقنا، يمكنك استخدام التطبيق المصغّر 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. سيكون هذا هو التركيز في الخطوة التالية من هذا الدليل التعليمي. عند تشغيل التطبيق في هذه المرحلة، من المفترض أن تظهر شاشة تسجيل دخول فارغة.

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

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

أداة إنشاء الترجمة

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

عدِّل الرمز في auth_gate.dart لإضافة تطبيقات مصغّرة sideBuilder.

auth_gate.dart

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

import 'home.dart';

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

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

من المفترض أن يظهر تطبيقك الآن على النحو التالي عند توسيع عرض النافذة (إذا كنت تستخدم Flutter web أو MacOS).

إنشاء مستخدم

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

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

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

2. انقر على الزر "إضافة مستخدم".

3. أدخِل عنوان بريد إلكتروني وكلمة مرور للمستخدم الجديد. يمكن أن يكون هذا عنوان بريد إلكتروني وكلمة مرور مزيفَين، كما أشرتُ في الصورة أدناه. سيؤدي ذلك إلى حلّ المشكلة، ولكن لن تعمل ميزة "نسيت كلمة المرور" إذا كنت تستخدم عنوان بريد إلكتروني مزيّفًا.

4. انقر على "إضافة مستخدم".

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

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

يوفّر واجهة مستخدم FlutterFire أيضًا أداة ProfileScreen، والتي تمنحك مرة أخرى الكثير من الوظائف في بضعة أسطر من الرموز البرمجية.

إضافة التطبيق المصغّر ProfileScreen

انتقِل إلى ملف home.dart في محرِّر النصوص. عدِّل هذا الرمز:

home.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => const ProfileScreen(),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

الرمز الجديد الذي يجب ملاحظته هو دالة الاستدعاء التي تم تمريرها إلى 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 فارغ.

من خلال إضافة طلب استدعاء يستدعي Navigator.of(context).pop() عند بدء SignedOutAction، سينتقل التطبيق إلى الصفحة السابقة. في مثال التطبيق هذا، لا يتوفّر سوى مسار دائم واحد يعرض صفحة تسجيل الدخول إذا لم يكن هناك مستخدم مسجّل الدخول، ويعرض الصفحة الرئيسية إذا كان هناك مستخدم. وبما أنّ ذلك يحدث عندما يسجّل المستخدم الخروج، سيعرض التطبيق صفحة "تسجيل الدخول".

تخصيص صفحة الملف الشخصي

تمامًا مثل صفحة "تسجيل الدخول"، يمكن تخصيص صفحة الملف الشخصي. أولاً، لا تتيح صفحتنا الحالية الانتقال إلى الصفحة الرئيسية مرة أخرى بعد أن يصل المستخدم إلى صفحة الملف الشخصي. يمكنك حلّ هذه المشكلة من خلال إضافة شريط التطبيقات إلى التطبيق المصغّر ProfileScreen.

home.dart

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

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       actions: [
         IconButton(
           icon: const Icon(Icons.person),
           onPressed: () {
             Navigator.push(
               context,
               MaterialPageRoute<ProfileScreen>(
                 builder: (context) => ProfileScreen(
                   appBar: AppBar(
                     title: const Text('User Profile'),
                   ),
                   actions: [
                     SignedOutAction((context) {
                       Navigator.of(context).pop();
                     })
                   ],
                 ),
               ),
             );
           },
         )
       ],
       automaticallyImplyLeading: false,
     ),
     body: Center(
       child: Column(
         children: [
           Image.asset('dash.png'),
           Text(
             'Welcome!',
             style: Theme.of(context).textTheme.displaySmall,
           ),
           const SignOutButton(),
         ],
       ),
     ),
   );
 }
}

تقبل الوسيطة ProfileScreen.appBar عنصر AppBar من حزمة Flutter Material، لذا يمكن التعامل معها مثل أي AppBar آخر أنشأته ونقلته إلى Scaffold. في هذا المثال، تم الاحتفاظ بالوظيفة التلقائية لإضافة زر "رجوع" تلقائيًا، وأصبح للشاشة الآن عنوان.

إضافة "الأطفال" إلى شاشة "الملف الشخصي"

يحتوي التطبيق المصغّر ProfileScreen أيضًا على مَعلمة اختيارية باسم children. تقبل هذه الوسيطة قائمة بتطبيقات المصغّرة، وسيتم وضع هذه التطبيقات المصغّرة عموديًا داخل تطبيق مصغّر "عمود" سبق استخدامه داخليًا لإنشاء ProfileScreen. ستؤدي أداة Column المصغّرة هذه في طريقة إنشاء ProfileScreen إلى وضع الأطفال الذين تُمرّرهم فوق الزر "تسجيل الخروج".

عدِّل الرمز في home.dart لعرض شعار الشركة هنا، على غرار شاشة تسجيل الدخول.

home.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute<ProfileScreen>(
                  builder: (context) => ProfileScreen(
                    appBar: AppBar(
                      title: const Text('User Profile'),
                    ),
                    actions: [
                      SignedOutAction((context) {
                        Navigator.of(context).pop();
                      })
                    ],
                    children: [
                      const Divider(),
                      Padding(
                        padding: const EdgeInsets.all(2),
                        child: AspectRatio(
                          aspectRatio: 1,
                          child: Image.asset('flutterfire_300x.png'),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        ],
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          children: [
            Image.asset('dash.png'),
            Text(
              'Welcome!',
              style: Theme.of(context).textTheme.displaySmall,
            ),
            const SignOutButton(),
          ],
        ),
      ),
    );
  }
}

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

7- تسجيل الدخول باستخدام مصادقة Google على أنظمة أساسية متعدّدة

توفّر واجهة مستخدم FlutterFire أيضًا تطبيقات مصغّرة ووظائف لتسجيل الدخول باستخدام مقدّمي خدمات خارجيين، مثل Google وTwitter وFacebook وApple وGithub.

لدمج المصادقة مع Google، ثبِّت المكوّن الإضافي الرسمي firebase_ui_oauth_google وجميع المكوّنات التي يعتمد عليها، والتي ستتولى مسار المصادقة الأصلي. في الوحدة الطرفية، انتقِل إلى جذر مشروعك على Flutter وأدخِل الأمر التالي:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

تفعيل موفِّر خدمة تسجيل الدخول بحساب Google

بعد ذلك، فعِّل مقدّم خدمة Google في وحدة تحكُّم Firebase:

1. انتقِل إلى شاشة مزوّدو خدمة تسجيل الدخول للمصادقة في وحدة التحكّم.
2. انقر على "إضافة مقدّم خدمة جديد".
3. اختَر "Google".
4. فعِّل مفتاح التبديل "تفعيل"، ثم اضغط على "حفظ".
5. إذا ظهر لك مربّع حوار يتضمّن معلومات عن تنزيل ملفات الإعداد، انقر على "تم".
6. تأكَّد من أنّه تمت إضافة مقدّم خدمة تسجيل الدخول في Google.

إضافة زر تسجيل الدخول باستخدام حساب Google

بعد تفعيل ميزة "تسجيل الدخول باستخدام حساب Google"، أضِف التطبيق المصغّر المطلوب لعرض زرّ "تسجيل الدخول باستخدام حساب Google" منمق إلى صفحة تسجيل الدخول. انتقِل إلى ملف auth_gate.dart وعدِّل الرمز البرمجي على النحو التالي:

auth_gate.dart

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

import 'home.dart';

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

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

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

الرمز الجديد الوحيد هنا هو إضافة GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") إلى إعدادات التطبيق المصغّر SignInScreen.

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

ضبط زر تسجيل الدخول

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

1. انتقِل إلى صفحة "مزوّدو المصادقة" في وحدة تحكُّم Firebase.
2. انقر على موفِّر Google.
3. انقر على لوحة التوسيع "إعدادات حزمة تطوير البرامج (SDK) للويب".
4. انسخ القيمة من "معرّف عميل الويب" .
5. ارجع إلى محرِّر النصوص، وعدِّل نسخة GoogleProvider في الملف auth_gate.dart من خلال تمرير هذا المعرّف إلى المَعلمة المُسمّاة clientId.

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

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

ضبط إعدادات iOS

لكي يعمل هذا الإجراء على أجهزة iOS، يجب إجراء عملية إعداد إضافية.

1. انتقِل إلى شاشة Project Settings (إعدادات المشروع) في وحدة تحكّم Firebase. ستظهر بطاقة تعرض تطبيقاتك على Firebase بالشكل التالي:
2. انقر على نظام التشغيل iOS. يُرجى العِلم أنّ اسم تطبيقك سيكون مختلفًا عن اسم تطبيقي. إذا كنت قد استخدمت مشروع flutter-codelabs/firebase-auth-flutterfire-ui/start لمتابعة هذا الدليل التعليمي حول رموز البرامج، ستظهر لك كلمة "ابدأ" بدلاً من كلمة "مكتمل".
3. انقر على الزر "GoogleServices-Info.plist" لتنزيل ملف الإعدادات المطلوب.
4. اسحب الملف الذي تم تنزيله وأفلِته في الدليل ‎ ./ios/Runner في مشروعك على Flutter.
5. افتح Xcode من خلال تنفيذ الأمر التالي في وحدة الطرفية من جذر مشروعك: open ios/Runner.xcworkspace
6. انقر بزر الماوس الأيمن على دليل Runner واختَر Add Files to "Runner" (إضافة ملفات إلى Runner).
7. اختَر GoogleService-Info.plist من مدير الملفات.
8. في محرِّر النصوص (الذي لا يُعدّ Xcode)، أضِف سمات CFBundleURLTypes أدناه إلى ملف [my_project]/ios/Runner/Info.plist.

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
        <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                        <!-- TODO Replace this value: -->
                        <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
                        <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
                </array>
        </dict>
</array>
<!-- End of the Google Sign-in Section -->

9. عليك استبدال GoogleProvider.clientId الذي أضفته في عملية إعداد الويب بمعرّف العميل المرتبط بمعرّف عميل Firebase لنظام التشغيل iOS. أولاً، يمكنك العثور على هذا المعرّف في ملف firebase_options.dart، كجزء من الثابت iOS. انسخ القيمة التي تم تمريرها إلى iOSClientId.

static const FirebaseOptions ios = FirebaseOptions(
  apiKey: 'YOUR API KEY',
  appId: 'YOUR APP ID',
  messagingSenderId: '',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  iosClientId: 'IOS CLIENT ID', // Find your iOS client Id here.
  iosBundleId: 'com.example.BUNDLE',
);

10. الصِق هذه القيمة في وسيطة GoogleProvider.clientId في التطبيق المصغّر AuthGate.

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

import 'home.dart';


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

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

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

إذا كان تطبيق Flutter قيد التشغيل على نظام التشغيل iOS، عليك إغلاقه بالكامل ثم إعادة تشغيله. بخلاف ذلك، يمكنك تشغيل التطبيق في نظام التشغيل iOS.

8- تهانينا!

لقد أكملت الدرس التطبيقي حول واجهة مستخدم Firebase Auth لتطبيق Flutter . يمكنك العثور على الرمز البرمجي المكتمل لهذا الدرس التطبيقي حول الترميز في الدليل "complete" على GitHub: Flutter Codelabs

المواضيع التي تناولناها

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

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

• اطّلِع على مزيد من المعلومات عن استخدام Firestore و"المصادقة" في Flutter: التعرّف على Firebase في Codelab لتطبيق Flutter
• استكشِف أدوات Firebase الأخرى لإنشاء تطبيقك على Flutter:
• Cloud Storage
• Cloud Functions
• قاعدة بيانات الوقت الفعلي

مزيد من المعلومات

• الموقع الإلكتروني لمنصّة Firebase: firebase.google.com
• موقع Flutter الإلكتروني: flutter.dev
• تطبيقات FlutterFire Firebase Flutter المصغّرة: firebase.flutter.dev
• قناة Firebase على YouTube
• قناة Flutter على YouTube

يسرّنا أن نحتفل معك يا ريان.