یک جریان احراز هویت کاربر را با استفاده از FirebaseUI به برنامه Flutter اضافه کنید

1. قبل از شروع

در این کد لبه، یاد خواهید گرفت که چگونه با استفاده از بسته UI FlutterFire، احراز هویت Firebase را به برنامه Flutter خود اضافه کنید. با استفاده از این بسته، هم احراز هویت ایمیل و رمز عبور و هم تأیید اعتبار Google Sign In را به برنامه Flutter اضافه خواهید کرد. همچنین یاد خواهید گرفت که چگونه یک پروژه Firebase را راه اندازی کنید و از FlutterFire CLI برای مقداردهی اولیه Firebase در برنامه Flutter خود استفاده کنید.

پیش نیازها

این کد لبه فرض می کند که شما تجربه فلاتر دارید. اگر نه، ممکن است بخواهید ابتدا اصول اولیه را یاد بگیرید. لینک های زیر مفید هستند:

شما همچنین باید تجربه Firebase داشته باشید، اما اگر هرگز Firebase را به پروژه Flutter اضافه نکرده باشید، اشکالی ندارد. اگر با کنسول Firebase آشنا نیستید یا کاملاً با Firebase تازه کار هستید، ابتدا پیوندهای زیر را ببینید:

آنچه شما ایجاد خواهید کرد

این لبه کد شما را در ساخت جریان احراز هویت برای یک برنامه Flutter با استفاده از Firebase برای احراز هویت راهنمایی می کند. این برنامه دارای یک صفحه ورود به سیستم، یک صفحه "ثبت نام"، یک صفحه بازیابی رمز عبور و یک صفحه نمایه کاربر خواهد بود.

6604fc9157f2c6ae.pngeab9509a41074930.pngda49189a5838e0bb.pngb2ccfb3632b77878.png

چیزی که یاد خواهید گرفت

این کد لبه شامل موارد زیر است:

  • افزودن Firebase به برنامه Flutter
  • راه اندازی کنسول Firebase
  • استفاده از Firebase CLI برای افزودن Firebase به برنامه شما
  • استفاده از FlutterFire CLI برای ایجاد پیکربندی Firebase در دارت
  • افزودن احراز هویت Firebase به برنامه Flutter شما
  • راه اندازی Firebase Authentication در کنسول
  • افزودن ایمیل و رمز عبور با بسته firebase_ui_auth وارد شوید
  • افزودن ثبت نام کاربر با بسته firebase_ui_auth
  • افزودن یک "گذرواژه را فراموش کرده اید؟" صفحه
  • افزودن Google Sign-in با firebase_ui_auth
  • در حال پیکربندی برنامه خود برای کار با چندین ارائه دهنده ورود به سیستم.
  • با بسته firebase_ui_auth یک صفحه نمایه کاربر به برنامه خود اضافه کنید

این Codelab به طور خاص با افزودن یک سیستم احراز هویت قوی با استفاده از بسته firebase_ui_auth مرتبط است. همانطور که خواهید دید، کل این برنامه، با تمام ویژگی های فوق، با حدود 100 خط کد قابل پیاده سازی است.

آنچه شما نیاز دارید

  • دانش کاری Flutter و SDK نصب شده است
  • یک ویرایشگر متن (JetBrains IDE، Android Studio و VS Code توسط Flutter پشتیبانی می شوند)
  • مرورگر Google Chrome یا دیگر هدف توسعه ترجیحی شما برای Flutter. (برخی از دستورات ترمینال در این کد لبه فرض می کنند که شما برنامه خود را در کروم اجرا می کنید)

2. یک پروژه Firebase ایجاد و راه اندازی کنید

اولین کاری که باید انجام دهید ایجاد یک پروژه Firebase در کنسول وب Firebase است.

یک پروژه Firebase ایجاد کنید

  1. با استفاده از حساب Google خود وارد کنسول Firebase شوید.
  2. برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (به عنوان مثال FlutterFire-UI-Codelab ).
  3. روی Continue کلیک کنید.
  4. در صورت درخواست، شرایط Firebase را بررسی کرده و بپذیرید و سپس روی Continue کلیک کنید.
  5. (اختیاری) کمک هوش مصنوعی را در کنسول Firebase (به نام "Gemini in Firebase") فعال کنید.
  6. برای این کد لبه، شما نیازی به Google Analytics ندارید ، بنابراین گزینه Google Analytics را خاموش کنید .
  7. روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما ارائه شود و سپس روی ادامه کلیک کنید.

برای کسب اطلاعات بیشتر درباره پروژه‌های Firebase، به درک پروژه‌های Firebase مراجعه کنید.

ورود به ایمیل را برای احراز هویت Firebase فعال کنید

برنامه‌ای که می‌سازید از احراز هویت Firebase استفاده می‌کند تا به کاربران شما اجازه دهد وارد برنامه شما شوند. همچنین به کاربران جدید اجازه می دهد تا از برنامه Flutter ثبت نام کنند.

احراز هویت Firebase باید با استفاده از Firebase Console فعال شود و پس از فعال شدن نیاز به پیکربندی خاصی دارد.

برای اینکه به کاربران اجازه دهید وارد برنامه وب شوند، ابتدا از روش ورود به سیستم ایمیل/گذرواژه استفاده خواهید کرد. بعداً، روش Google Sign-In را اضافه خواهید کرد.

  1. در کنسول Firebase، منوی Build را در پانل سمت چپ گسترش دهید.
  2. روی Authentication کلیک کنید، و سپس روی دکمه شروع ، سپس برگه روش ورود به سیستم (یا مستقیماً به برگه روش ورود به سیستم بروید) کلیک کنید.
  3. روی ایمیل/گذرواژه در لیست ارائه دهندگان ورود به سیستم کلیک کنید، سوئیچ Enable را روی موقعیت روشن قرار دهید و سپس روی ذخیره کلیک کنید.

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 است. کد این Codelab در زیر شاخه flutter-codelabs/firebase-auth-flutterfire-ui است.

دایرکتوری flutter-codelabs/firebase-auth-flutterfire-ui شامل دو پروژه Flutter است. یکی complete و دیگری start نامیده می شود. دایرکتوری start حاوی یک پروژه ناقص است و جایی است که بیشترین زمان را در آن صرف خواهید کرد.

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

اگر می‌خواهید به جلو پرش کنید، یا ببینید که پس از تکمیل، چه چیزی باید به نظر برسد، به دایرکتوری با نام کامل برای ارجاع متقابل نگاه کنید.

اگر می‌خواهید همراه با Codelab دنبال کنید و خودتان کد اضافه کنید، باید با برنامه Flutter در flutter-codelabs/firebase-auth-flutterfire-ui/start شروع کنید و کد را در سراسر Codelab به آن پروژه اضافه کنید. آن دایرکتوری را در IDE دلخواه خود باز کنید یا وارد کنید.

Firebase CLI را نصب کنید

Firebase CLI ابزارهایی برای مدیریت پروژه های Firebase شما فراهم می کند. CLI برای FlutterFire CLI مورد نیاز است که بعداً آن را نصب خواهید کرد.

راه های مختلفی برای نصب CLI وجود دارد. همه گزینه های موجود برای سیستم عامل خود را در firebase.google.com/docs/cli مرور کنید.

پس از نصب CLI، باید با Firebase احراز هویت کنید.

  1. با اجرای دستور زیر با استفاده از حساب Google خود وارد Firebase شوید: 
    firebase login
  2. این دستور ماشین محلی شما را به Firebase متصل می کند و به شما امکان دسترسی به پروژه های Firebase را می دهد.
  3. با فهرست کردن پروژه های Firebase خود، بررسی کنید که CLI به درستی نصب شده است و به حساب شما دسترسی دارد. دستور زیر را اجرا کنید: 
    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 منوی Help را خروجی می کند.

flutterfire --help

پروژه Firebase خود را به برنامه Flutter خود اضافه کنید

FlutterFire را پیکربندی کنید

می توانید از FlutterFire برای تولید کد Dart مورد نیاز برای استفاده از Firebase در برنامه Flutter خود استفاده کنید.

flutterfire configure

هنگامی که این دستور اجرا می شود، از شما خواسته می شود که از کدام پروژه Firebase استفاده کنید و کدام پلتفرم را می خواهید تنظیم کنید.

اسکرین شات های زیر درخواست هایی را نشان می دهند که باید به آنها پاسخ دهید.

  1. پروژه ای را که می خواهید استفاده کنید انتخاب کنید. در این مورد flutterfire-ui-codelab استفاده کنید 1359cdeb83204baa.png
  2. پلتفرم هایی که می خواهید استفاده کنید را انتخاب کنید. در این کد لبه، مراحلی برای پیکربندی Firebase Authentication برای Flutter برای وب، iOS و اندروید وجود دارد، اما می‌توانید پروژه Firebase خود را برای استفاده از همه گزینه‌ها تنظیم کنید. 301c9534f594f472.png
  3. این اسکرین شات خروجی را در پایان فرآیند نشان می دهد. اگر با Firebase آشنا باشید، متوجه خواهید شد که نیازی به ایجاد برنامه های پلتفرم (مثلاً یک برنامه اندروید) در کنسول ندارید و FlutterFire CLI این کار را برای شما انجام داده است. 12199a85ade30459.png

وقتی این کار کامل شد، به برنامه Flutter در ویرایشگر متن خود نگاه کنید. FlutterFire CLI فایلی به نام firebase_options.dart را تغییر داده است. این فایل حاوی کلاسی به نام FirebaseOptions است که دارای متغیرهای ثابتی است که پیکربندی Firebase مورد نیاز برای هر پلتفرم را نگه می‌دارد. اگر هنگام اجرای flutterfire configure همه پلتفرم‌ها را انتخاب کرده باشید، مقادیر استاتیکی به نام‌های web ، android ، ios و macos را مشاهده خواهید کرد.

lib/firebase_options.dart 

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

class DefaultFirebaseOptions {
  static FirebaseOptions get currentPlatform {
    if (kIsWeb) {
      return web;
    }

    switch (defaultTargetPlatform) {
      case TargetPlatform.android:
        return android;
      case TargetPlatform.iOS:
        return ios;
      case TargetPlatform.macOS:
        return macos;
      default:
        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 از کلمه application برای اشاره به ساخت خاصی برای یک پلتفرم خاص در پروژه Firebase استفاده می کند. به عنوان مثال، پروژه Firebase به نام FlutterFire-ui-codelab دارای چندین برنامه کاربردی است: یکی برای اندروید، یکی برای 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 firebase_auth firebase_ui_auth

اینها تنها بسته هایی هستند که در این مرحله به آن نیاز دارید.

Firebase را راه اندازی کنید

به منظور استفاده از بسته های اضافه شده و DefaultFirebaseOptions.currentPlatform, کد موجود در تابع main را در فایل main.dart به روز کنید.

lib/main.dart 

import 'package:firebase_core/firebase_core.dart';                  // Add this import
import 'package:flutter/material.dart';

import 'app.dart';
import 'firebase_options.dart';                                     // And this import

// TODO(codelab user): Get API key
const clientId = 'YOUR_CLIENT_ID';

void main() async {
  // Add from here...
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  // To here.

  runApp(const MyApp(clientId: clientId));
}

این کد دو کار را انجام می دهد.

  1. WidgetsFlutterBinding.ensureInitialized() به Flutter می گوید تا زمانی که فریم ورک Flutter به طور کامل بوت نشده است، اجرای کد ویجت برنامه را شروع نکند. Firebase از کانال‌های پلتفرم بومی استفاده می‌کند، که برای اجرا شدن فریم‌ورک نیاز دارند.
  2. Firebase.initializeApp یک ارتباط بین برنامه Flutter و پروژه Firebase شما برقرار می کند. DefaultFirebaseOptions.currentPlatform از فایل firebase_options.dart ایجاد شده ما وارد شده است. این مقدار استاتیک تشخیص می دهد که روی کدام پلتفرم در حال اجرا هستید و در کلیدهای Firebase مربوطه ارسال می کند.

4. صفحه اولیه Firebase UI Auth را اضافه کنید

Firebase UI for Auth ویجت هایی را ارائه می دهد که کل صفحه های برنامه شما را نشان می دهد. این صفحه‌ها جریان‌های احراز هویت مختلفی را در سراسر برنامه شما مدیریت می‌کنند، مانند ورود، ثبت نام، فراموشی رمز عبور، نمایه کاربر و موارد دیگر. برای شروع، یک صفحه فرود به برنامه خود اضافه کنید که به عنوان محافظ احراز هویت به برنامه اصلی عمل می کند.

برنامه مواد یا کوپرتینو

FlutterFire UI مستلزم آن است که برنامه شما در MaterialApp یا CupertinoApp پیچیده شود. بسته به انتخاب شما، UI به طور خودکار تفاوت های ویجت های Material یا Cupertino را منعکس می کند. برای این کد لبه، از MaterialApp استفاده کنید، که قبلاً در app.dart به برنامه اضافه شده است.

lib/app.dart 

import 'package:flutter/material.dart';

import 'auth_gate.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.clientId});

  final String clientId;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: AuthGate(clientId: clientId),
    );
  }
}

وضعیت احراز هویت را بررسی کنید

قبل از اینکه بتوانید صفحه ورود به سیستم را نمایش دهید، باید تعیین کنید که آیا کاربر احراز هویت شده است یا خیر. رایج ترین راه برای بررسی این موضوع، گوش دادن به authStateChanges FirebaseAuth با استفاده از افزونه Firebase Auth است.

در نمونه کد بالا، MaterialApp در حال ساخت ویجت AuthGate در روش build خود است. (این یک ویجت سفارشی است که توسط FlutterFire UI ارائه نشده است.)

این ویجت باید به روز شود تا جریان authStateChanges را در بر گیرد.

authStateChanges API یک Stream با کاربر فعلی (اگر وارد سیستم شده باشد) برمی گرداند یا اگر وارد نشده باشد، باطل است. برای اشتراک در این حالت در برنامه ما، می توانید از ویجت StreamBuilder Flutter استفاده کنید و جریان را به آن منتقل کنید.

StreamBuilder ویجتی است که خود را بر اساس آخرین عکس فوری از داده‌های Stream که شما از آن عبور می‌دهید می‌سازد. هنگامی که Stream یک عکس فوری جدید منتشر می کند، به طور خودکار بازسازی می شود.

کد را در auth_gate.dart به روز کنید.

lib/auth_gate.dart 

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

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key, required this.clientId});

  final String clientId;

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

        return const HomeScreen();
      },
    );                                                                 // To here.
  }
}
  • StreamBuilder.stream ارسال می‌شود FirebaseAuth.instance.authStateChanged ، جریان فوق‌الذکر، که اگر کاربر احراز هویت شده باشد، یک شی Firebase User را برمی‌گرداند، در غیر این صورت null برمی‌گرداند.
  • در مرحله بعد، کد از snapshot.hasData استفاده می کند تا بررسی کند که آیا مقدار جریان حاوی شی User است یا خیر.
  • اگر وجود نداشته باشد، ویجت SignInScreen برمی گرداند. در حال حاضر، این صفحه هیچ کاری انجام نمی دهد، در مرحله بعدی به روز می شود.
  • در غیر این صورت، HomeScreen برمی گرداند، که بخش اصلی برنامه است که فقط کاربران احراز هویت شده می توانند به آن دسترسی داشته باشند.

SignInScreen ویجتی است که از بسته UI FlutterFire می آید. این نقطه تمرکز مرحله بعدی این کد لبه خواهد بود. وقتی برنامه را در این مرحله اجرا می کنید، باید یک صفحه ورود به سیستم خالی را ببینید.

5. صفحه ورود به سیستم

ویجت SignInScreen که توسط FlutterFire UI ارائه شده است، عملکرد زیر را اضافه می کند:

  • به کاربران اجازه ورود به سیستم را می دهد
  • اگر کاربران رمز عبور خود را فراموش کردند، می توانند روی "رمز عبور را فراموش کرده اید؟" ضربه بزنید. و به فرمی منتقل شوند تا رمز عبور خود را بازنشانی کنند
  • اگر کاربر هنوز ثبت نام نکرده باشد، می تواند روی "ثبت نام" ضربه بزند و به فرم دیگری منتقل شود که به آنها امکان ثبت نام را می دهد.

باز هم، این فقط به چند خط کد نیاز دارد. کد موجود در ویجت AuthGate را به خاطر بیاورید:

lib/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, required this.clientId});

  final String clientId;

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

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

ویجت SignInScreen و آرگومان providers آن، تنها کد مورد نیاز برای دریافت تمام عملکردهای فوق الذکر است. اکنون باید صفحه ورود به سیستم را ببینید که دارای ورودی های متنی "ایمیل" و "رمز عبور" و همچنین دکمه "ورود به سیستم" است.

در حالی که کاربردی است، فاقد یک ظاهر طراحی شده است. ویجت پارامترهایی را برای سفارشی کردن ظاهر صفحه ورود به سیستم نمایش می دهد. به عنوان مثال، ممکن است بخواهید لوگوی شرکت خود را اضافه کنید.

صفحه ورود به سیستم را سفارشی کنید

headerBuilder

با استفاده از آرگومان SignInScreen.headerBuilder ، می توانید هر ویجتی را که می خواهید در بالای فرم ورود اضافه کنید. این ویجت فقط در صفحه نمایش های باریک مانند دستگاه های تلفن همراه نمایش داده می شود. در صفحه‌های گسترده، می‌توانید از SignInScreen.sideBuilder استفاده کنید، که بعداً در این کد لبه مورد بحث قرار خواهد گرفت.

فایل lib/auth_gate.dart را با این کد به روز کنید:

lib/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, required this.clientId});

  final String clientId;

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

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

The headerBuilder argument requires a function of the type HeaderBuilder, which
is defined in the FlutterFire UI package.

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

از آنجایی که این یک callback است، مقادیری را که می‌توانید استفاده کنید، مانند BuildContext و BoxConstraints نشان می‌دهد و از شما می‌خواهد که یک ویجت را برگردانید. هر ویجتی که برگردانید در بالای صفحه نمایش داده می شود. در این مثال، کد جدید یک تصویر را به بالای صفحه اضافه می کند. اکنون برنامه شما باید به این شکل باشد.

73d7548d91bbd2ab.png

سازنده زیرنویس

صفحه ورود به سیستم سه پارامتر اضافی را نشان می دهد که به شما امکان می دهد صفحه را سفارشی کنید: subtitleBuilder ، footerBuilder ، و sideBuilder .

subtitleBuilder کمی متفاوت است زیرا آرگومان‌های callback شامل یک عمل است که از نوع AuthAction است. AuthAction شماره‌ای است که می‌توانید از آن برای تشخیص اینکه صفحه‌ای که کاربر در آن قرار دارد، صفحه «ورود به سیستم» یا «ثبت‌نام» است استفاده کنید.

کد را در auth_gate.dart به روز کنید تا از subtitleBuilder استفاده کنید.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            subtitleBuilder: (context, action) {                     // Add from here...
              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!'),
              );
            },                                                       // To here.
          );
        }

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

آرگومان footerBuilder همان subtitleBuilder است. BoxConstraints یا shrinkOffset آشکار نمی‌کند، زیرا برای متن در نظر گرفته شده است تا تصویر. البته می توانید هر ویجتی را که می خواهید اضافه کنید.

با این کد یک پاورقی به صفحه ورود به سیستم خود اضافه کنید.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            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) {                       // Add from here...
              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),
                ),
              );
            },                                                       // To here.
          );
        }

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

ساید بیلدر

آرگومان SignInScreen.sidebuilder یک callback را می پذیرد و این بار آرگومان های آن callback BuildContext و double shrinkOffset هستند. ویجتی که sideBuilder برمی گرداند در سمت چپ علامت در فرم و فقط در صفحه های گسترده نمایش داده می شود. عملاً به این معنی است که ویجت فقط در دسکتاپ و برنامه های وب نمایش داده می شود.

در داخل، FlutterFire UI از یک نقطه شکست برای تعیین اینکه آیا محتوای هدر باید نمایش داده شود (در صفحه‌های بلند، مانند موبایل) یا محتوای جانبی (روی صفحه‌های گسترده، دسکتاپ یا وب) استفاده می‌کند. به طور خاص، اگر صفحه ای بیش از 800 پیکسل عرض داشته باشد، محتوای سازنده جانبی نشان داده می شود و محتوای هدر نشان داده نمی شود. اگر عرض صفحه نمایش کمتر از 800 پیکسل باشد، برعکس است.

برای افزودن ویجت های sideBuilder ، کد را در auth_gate.dart به روز کنید.

lib/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, required this.clientId});

  final String clientId;

  @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'),
                ),
              );
            },
            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 بروید. اگر از نام دیگری استفاده می‌کنید، «flutterfire-ui-codelab» یا پروژه دیگری را انتخاب کنید. این جدول را خواهید دید: f038fd9a58ed60d9.png
  2. روی دکمه "افزودن کاربر" کلیک کنید. 2d78390d4c5dbbfa.png
  3. آدرس ایمیل و رمز عبور کاربر جدید را وارد کنید. همانطور که در تصویر زیر وارد کرده ام، این می تواند یک ایمیل و رمز عبور جعلی باشد. این کار خواهد کرد، اما اگر از یک آدرس ایمیل جعلی استفاده کنید، عملکرد "گذرواژه فراموش شده" کار نخواهد کرد. 62ba0feb33d54add.png
  4. روی "افزودن کاربر" کلیک کنید 32b236b3ef94d4c7.png

اکنون، می توانید به برنامه Flutter خود بازگردید و با استفاده از صفحه ورود به سیستم وارد یک کاربر شوید. برنامه شما باید شبیه این باشد:

dd43d260537f3b1a.png

6. صفحه نمایش

FlutterFire UI همچنین ویجت ProfileScreen را ارائه می دهد که باز هم در چند خط کد به شما قابلیت های زیادی می دهد.

ویجت ProfileScreen اضافه کنید

به فایل home.dart در ویرایشگر متن خود بروید. با این کد آن را به روز کنید:

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

کد جدید توجه، تماس برگشتی به روش IconButton.isPressed است. هنگامی که IconButton فشار داده می شود، برنامه شما یک مسیر ناشناس جدید ایجاد می کند و به سمت آن حرکت می کند. آن مسیر ویجت ProfileScreen را نمایش می دهد که از پاسخ تماس MaterialPageRoute.builder برگردانده شده است.

برنامه خود را مجدداً بارگیری کنید و نماد را در سمت راست بالا (در نوار برنامه) فشار دهید و صفحه ای مانند این نمایش داده می شود:

36487fc4ab4f26a7.png

این رابط کاربری استاندارد ارائه شده توسط صفحه FlutterFire UI است. همه دکمه‌ها و فیلدهای متنی به Firebase Auth متصل شده‌اند و خارج از جعبه کار می‌کنند. برای مثال، می‌توانید نامی را در فیلد متنی «Name» وارد کنید، و FlutterFire UI متد FirebaseAuth.instance.currentUser?.updateDisplayName فراخوانی می‌کند، که این نام را در Firebase ذخیره می‌کند.

از سیستم خارج شوید

در حال حاضر، اگر دکمه "خروج از سیستم" را فشار دهید، برنامه تغییر نمی کند. شما را از سیستم خارج می‌کند، اما به ویجت AuthGate باز نمی‌گردید. برای پیاده سازی این، از پارامتر ProfileScreen.actions استفاده کنید.

ابتدا کد را در home.dart به روز کنید.

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

اکنون، هنگامی که نمونه ای از ProfileScreen ایجاد می کنید، لیستی از اقدامات را نیز به آرگومان ProfileScreen.actions ارسال می کنید. این اقدامات از نوع FlutterFireUiAction هستند. کلاس‌های مختلفی وجود دارد که زیرگروه‌های FlutterFireUiAction هستند، و به طور کلی شما از آنها برای اینکه به برنامه خود بگویید به تغییرات حالت احراز هویت مختلف واکنش نشان دهد، استفاده می‌کنید. SignedOutAction یک تابع فراخوانی را فراخوانی می کند که وقتی حالت احراز هویت Firebase به حالت فعلی کاربر تهی می شود، به آن می دهید.

با افزودن تماسی که هنگام فعال شدن SignedOutAction Navigator.of(context).pop() را فراخوانی می کند، برنامه به صفحه قبلی هدایت می شود. در این برنامه مثال، تنها یک مسیر دائمی وجود دارد که در صورت عدم ورود کاربر، صفحه ورود به سیستم و در صورت وجود کاربر صفحه اصلی را نشان می دهد. از آنجا که این اتفاق می افتد زمانی که کاربر از سیستم خارج می شود، برنامه صفحه ورود به سیستم را نمایش می دهد.

صفحه نمایه را سفارشی کنید

مشابه صفحه ورود به سیستم، صفحه نمایه قابل تنظیم است. اول اینکه، صفحه فعلی ما پس از حضور کاربر در صفحه نمایه، راهی برای بازگشت به صفحه اصلی ندارد. با دادن یک AppBar به ویجت ProfileScreen این مشکل را برطرف کنید.

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

آرگومان ProfileScreen.appBar ویجت AppBar را از بسته Flutter Material می‌پذیرد، بنابراین می‌توان با آن مانند هر AppBar دیگری که ساخته‌اید و به Scaffold ارسال کرده‌اید رفتار کرد. در این مثال، عملکرد پیش‌فرض افزودن خودکار دکمه «بازگشت» حفظ می‌شود و اکنون صفحه یک عنوان دارد.

کودکان را به صفحه نمایه اضافه کنید

ویجت ProfileScreen همچنین دارای یک آرگومان اختیاری به نام Children است. این آرگومان فهرستی از ویجت‌ها را می‌پذیرد، و آن ابزارک‌ها به‌صورت عمودی در داخل ویجت Column قرار می‌گیرند که قبلاً به صورت داخلی برای ساخت ProfileScreen استفاده شده است. این ویجت Column در روش ساخت ProfileScreen ، فرزندانی را که از آن عبور می‌دهید در بالای دکمه «خروج از سیستم» قرار می‌دهد.

کد را در home.dart به روز کنید تا آرم شرکت در اینجا نشان داده شود، مشابه صفحه ورود به سیستم.

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

برنامه خود را دوباره بارگیری کنید، و این را روی صفحه خواهید دید:

ebe5792b765dbf87.png

7. ورود به سیستم چند پلتفرمی Google Auth

FlutterFire UI همچنین ویجت ها و قابلیت هایی را برای احراز هویت با ارائه دهندگان شخص ثالث مانند Google، Twitter، Facebook، Apple و GitHub فراهم می کند.

برای ادغام با احراز هویت Google، افزونه رسمی firebase_ui_oauth_google و وابستگی های آن را نصب کنید، که جریان احراز هویت بومی را مدیریت می کند. در ترمینال، به ریشه پروژه Flutter خود بروید و دستور زیر را وارد کنید: 

flutter pub add google_sign_in firebase_ui_oauth_google

Google Sign-in Provider را فعال کنید

سپس، ارائه‌دهنده Google را در کنسول Firebase فعال کنید:

  1. به صفحه ارائه دهندگان ورود به سیستم احراز هویت در کنسول بروید.
  2. روی "افزودن ارائه دهنده جدید" کلیک کنید. 8286fb28be94bf30.png
  3. "Google" را انتخاب کنید. c4e28e6f4974be7f.png
  4. سوئیچ با برچسب "Enable" را تغییر دهید و "Save" را فشار دهید. e74ff86990763826.png
  5. اگر یک مدال با اطلاعاتی در مورد بارگیری فایل های پیکربندی ظاهر شد، روی "انجام شد" کلیک کنید.
  6. تأیید کنید که ارائه دهنده ورود به سیستم Google اضافه شده است. 5329ce0543c90d95.png

دکمه ورود به سیستم Google را اضافه کنید

با فعال بودن ورود به سیستم Google، ویجت مورد نیاز برای نمایش دکمه ورود به سیستم Google را به صفحه ورود اضافه کنید. به فایل auth_gate.dart بروید و کد را به صورت زیر به روز کنید:

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

import 'home.dart';

class AuthGate extends StatelessWidget {
  const AuthGate({super.key, required this.clientId});

  final String clientId;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return SignInScreen(
            providers: [
              EmailAuthProvider(),
              GoogleProvider(clientId: clientId),                         // Add this line
            ],
            headerBuilder: (context, constraints, shrinkOffset) {
              return Padding(
                padding: const EdgeInsets.all(20),
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Image.asset('assets/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 بروید.
  2. روی ارائه دهنده Google کلیک کنید. 9b3a325c5eca6e49.png
  3. روی پنل گسترش «پیکربندی وب SDK» کلیک کنید.
  4. مقدار را از "Web Client ID" کپی کنید. 711a79f0d931c60f.png
  5. به ویرایشگر متن خود برگردید و نمونه GoogleProvider را در فایل auth_gate.dart با ارسال این شناسه به پارامتر با نام clientId به‌روزرسانی کنید. 
GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

پس از وارد کردن شناسه سرویس گیرنده وب، برنامه خود را دوباره بارگیری کنید. وقتی دکمه «ورود به سیستم با Google» را فشار می‌دهید، اگر از وب استفاده می‌کنید، پنجره جدیدی ظاهر می‌شود که شما را در جریان ورود به سیستم Google راهنمایی می‌کند. در ابتدا، به نظر می رسد این است:

14e73e3c9de704bb.png

iOS را پیکربندی کنید

برای اینکه این کار در iOS کار کند، یک فرآیند پیکربندی اضافی وجود دارد.

  1. به صفحه تنظیمات پروژه در کنسول Firebase بروید. کارتی وجود خواهد داشت که برنامه های Firebase شما را به شکل زیر فهرست می کند: fefa674acbf213cc.png
  2. iOS را انتخاب کنید. توجه داشته باشید که نام برنامه شما با نامی که در تصویر نشان داده شده است متفاوت خواهد بود. اگر از پروژه flutter-codelabs/firebase-auth-flutterfire-ui/start برای دنبال کردن این کد لبه استفاده کرده باشید، در جایی که تصویر «کامل» را نشان می‌دهد، اسکرین‌شات «شروع» خواهد گفت.
  3. برای دانلود فایل پیکربندی مورد نیاز، روی دکمه ای که می گوید GoogleServices-Info.plist کلیک کنید. f89b3192871dfbe3.png
  4. فایل دانلود شده را به دایرکتوری به نام /ios/Runner در پروژه Flutter خود بکشید.
  5. Xcode را با اجرای دستور ترمینال زیر از ریشه پروژه خود باز کنید: open ios/Runner.xcworkspace
  6. روی فهرست Runner کلیک راست کرده و Add Files to "Runner" را انتخاب کنید. 858986063a4c5201.png
  7. GoogleService-Info.plist را از مدیر فایل انتخاب کنید.
  8. در ویرایشگر متن خود (که Xcode نیست)، ویژگی های CFBundleURLTypes را در زیر به فایل 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. آن مقدار را در متغیر clientId در فایل lib/main.dart قرار دهید.

lib/main.dart 

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

import 'app.dart';
import 'firebase_options.dart';

const clientId = 'YOUR_CLIENT_ID'; // Replace this value with your Client ID.

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

  runApp(const MyApp(clientId: clientId));
}

اگر برنامه Flutter شما قبلاً در iOS اجرا می شود، باید آن را به طور کامل خاموش کنید و سپس دوباره برنامه را اجرا کنید. در غیر این صورت، برنامه را در iOS اجرا کنید.

8. تبریک می گویم!

شما رابط کاربری Firebase Auth برای Flutter codelab را تکمیل کرده اید. می‌توانید کد تکمیل‌شده این Codelab را در دایرکتوری firebase-auth-flutterfire-ui/complete در GitHub بیابید.

آنچه را پوشش داده ایم

  • راه اندازی یک برنامه Flutter برای استفاده از Firebase
  • راه اندازی یک پروژه Firebase در کنسول Firebase
  • FlutterFire CLI
  • Firebase CLI
  • با استفاده از احراز هویت Firebase
  • با استفاده از FlutterFire UI برای رسیدگی به احراز هویت Firebase در برنامه Flutter خود

مراحل بعدی

بیشتر بدانید

Sparky اینجاست تا با شما جشن بگیرد!

2a0ad195769368b1.gif