FirebaseUI ব্যবহার করে একটি Flutter অ্যাপে ব্যবহারকারীর প্রমাণীকরণ প্রবাহ যোগ করুন

1. আপনি শুরু করার আগে

এই কোডল্যাবে, আপনি শিখবেন কিভাবে FlutterFire UI প্যাকেজ ব্যবহার করে আপনার Flutter অ্যাপে Firebase প্রমাণীকরণ যোগ করতে হয়। এই প্যাকেজের মাধ্যমে, আপনি একটি Flutter অ্যাপে ইমেল এবং পাসওয়ার্ড প্রমাণীকরণ এবং Google সাইন ইন প্রমাণীকরণ উভয়ই যোগ করবেন। আপনি কীভাবে একটি ফায়ারবেস প্রজেক্ট সেট আপ করবেন তাও শিখবেন এবং আপনার ফ্লাটার অ্যাপে ফায়ারবেস শুরু করতে FlutterFire CLI ব্যবহার করুন।

পূর্বশর্ত

এই কোডল্যাব ধরে নেয় যে আপনার কিছু ফ্লটার অভিজ্ঞতা আছে। যদি তা না হয়, আপনি প্রথমে মৌলিক বিষয়গুলো শিখতে চাইতে পারেন। নিম্নলিখিত লিঙ্কগুলি সহায়ক:

আপনার কিছু ফায়ারবেসের অভিজ্ঞতাও থাকা উচিত, কিন্তু আপনি যদি কখনোই ফায়ারবেসকে ফ্লাটার প্রজেক্টে যোগ না করেন তাহলে ঠিক আছে। আপনি যদি Firebase কনসোলের সাথে অপরিচিত হন, অথবা আপনি Firebase-এ সম্পূর্ণ নতুন হয়ে থাকেন, তাহলে প্রথমে নিম্নলিখিত লিঙ্কগুলি দেখুন:

আপনি যা তৈরি করবেন

এই কোডল্যাব প্রমাণীকরণের জন্য ফায়ারবেস ব্যবহার করে একটি ফ্লাটার অ্যাপের জন্য প্রমাণীকরণ প্রবাহ তৈরি করার মাধ্যমে আপনাকে গাইড করে। অ্যাপ্লিকেশনটিতে একটি লগইন স্ক্রিন, একটি 'রেজিস্টার' স্ক্রিন, একটি পাসওয়ার্ড পুনরুদ্ধার স্ক্রীন এবং একটি ব্যবহারকারীর প্রোফাইল স্ক্রীন থাকবে।

6604fc9157f2c6ae.pngeab9509a41074930.pngda49189a5838e0bb.pngb2ccfb3632b77878.png

আপনি কি শিখবেন

এই কোডল্যাব কভার করে:

  • একটি Flutter অ্যাপে Firebase যোগ করা হচ্ছে
  • ফায়ারবেস কনসোল সেটআপ
  • আপনার অ্যাপ্লিকেশনে Firebase যোগ করতে Firebase CLI ব্যবহার করে
  • ডার্টে ফায়ারবেস কনফিগারেশন তৈরি করতে FlutterFire CLI ব্যবহার করে
  • আপনার Flutter অ্যাপে Firebase প্রমাণীকরণ যোগ করা হচ্ছে
  • কনসোলে ফায়ারবেস প্রমাণীকরণ সেটআপ
  • firebase_ui_auth প্যাকেজের সাথে ইমেল এবং পাসওয়ার্ড সাইন ইন করা
  • firebase_ui_auth প্যাকেজের সাথে ব্যবহারকারীর নিবন্ধন যোগ করা হচ্ছে
  • একটি 'পাসওয়ার্ড ভুলে গেছেন?' পৃষ্ঠা
  • firebase_ui_auth সাথে Google সাইন-ইন যোগ করা হচ্ছে
  • একাধিক সাইন-ইন প্রদানকারীর সাথে কাজ করার জন্য আপনার অ্যাপ কনফিগার করা হচ্ছে।
  • firebase_ui_auth প্যাকেজের সাথে আপনার অ্যাপ্লিকেশনে একটি ব্যবহারকারী প্রোফাইল স্ক্রীন যোগ করা হচ্ছে

এই কোডল্যাবটি বিশেষভাবে firebase_ui_auth প্যাকেজ ব্যবহার করে একটি শক্তিশালী প্রমাণীকরণ সিস্টেম যোগ করার সাথে সম্পর্কিত। আপনি দেখতে পাবেন, উপরের সমস্ত বৈশিষ্ট্য সহ এই সম্পূর্ণ অ্যাপটি প্রায় 100 লাইন কোডের সাথে প্রয়োগ করা যেতে পারে।

আপনি কি প্রয়োজন হবে

  • ফ্লটারের কাজের জ্ঞান, এবং SDK ইনস্টল করা আছে
  • একটি পাঠ্য সম্পাদক (JetBrains IDE's, Android Studio, এবং VS Code Flutter দ্বারা সমর্থিত)
  • গুগল ক্রোম ব্রাউজার, বা ফ্লটারের জন্য আপনার অন্যান্য পছন্দের ডেভেলপমেন্ট টার্গেট। (এই কোডল্যাবের কিছু টার্মিনাল কমান্ড ধরে নিবে আপনি Chrome এ আপনার অ্যাপ চালাচ্ছেন)

2. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

ফায়ারবেস ওয়েব কনসোলে একটি ফায়ারবেস প্রজেক্ট তৈরি করার জন্য আপনাকে প্রথম কাজটি করতে হবে।

একটি ফায়ারবেস প্রকল্প তৈরি করুন

  1. Firebase এ সাইন ইন করুন।
  2. Firebase কনসোলে, প্রজেক্ট যোগ করুন (বা একটি প্রকল্প তৈরি করুন ) ক্লিক করুন এবং আপনার ফায়ারবেস প্রকল্পের জন্য একটি নাম লিখুন (উদাহরণস্বরূপ, " FlutterFire-UI-Codelab ")। df42a5e3d9584b48.png
  3. প্রকল্প তৈরির বিকল্পগুলির মাধ্যমে ক্লিক করুন। অনুরোধ করা হলে Firebase শর্তাবলী স্বীকার করুন। Google Analytics সেট আপ করা এড়িয়ে যান, কারণ আপনি এই অ্যাপের জন্য Analytics ব্যবহার করবেন না। d1fcec48bf251eaa.png

ফায়ারবেস প্রকল্পগুলি সম্পর্কে আরও জানতে, ফায়ারবেস প্রকল্পগুলি বুঝতে দেখুন।

Firebase প্রমাণীকরণের জন্য ইমেল সাইন-ইন সক্ষম করুন

আপনি যে অ্যাপটি তৈরি করছেন সেটি আপনার ব্যবহারকারীদের আপনার অ্যাপে সাইন ইন করার অনুমতি দিতে Firebase প্রমাণীকরণ ব্যবহার করে। এটি নতুন ব্যবহারকারীদের Flutter অ্যাপ্লিকেশন থেকে নিবন্ধন করার অনুমতি দেয়।

ফায়ারবেস কনসোল ব্যবহার করে ফায়ারবেস প্রমাণীকরণ সক্ষম করা দরকার এবং একবার সক্রিয় করার জন্য বিশেষ কনফিগারেশন প্রয়োজন।

ব্যবহারকারীদের ওয়েব অ্যাপে সাইন ইন করার অনুমতি দিতে, আপনি প্রথমে ইমেল/পাসওয়ার্ড সাইন-ইন পদ্ধতি ব্যবহার করবেন। পরে, আপনি Google সাইন-ইন পদ্ধতি যোগ করবেন।

  1. Firebase কনসোলে, বাম প্যানেলে বিল্ড মেনুটি প্রসারিত করুন।
  2. প্রমাণীকরণ ক্লিক করুন, এবং তারপরে শুরু করুন বোতামে ক্লিক করুন, তারপর সাইন-ইন পদ্ধতি ট্যাবে (বা সরাসরি সাইন-ইন পদ্ধতি ট্যাবে যান)।
  3. সাইন-ইন প্রদানকারীর তালিকায় ইমেল/পাসওয়ার্ডে ক্লিক করুন, সক্ষম সুইচটি অন অবস্থানে সেট করুন এবং তারপর সংরক্ষণ করুন ক্লিক করুন।

58e3e3e23c2f16a4.png

3. Flutter অ্যাপ সেট আপ করুন

আমরা শুরু করার আগে আপনাকে স্টার্টার কোড ডাউনলোড করতে হবে এবং Firebase CLI ইনস্টল করতে হবে।

স্টার্টার কোড পান

কমান্ড লাইন থেকে GitHub সংগ্রহস্থল ক্লোন করুন:

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

বিকল্পভাবে, আপনার যদি GitHub এর CLI টুল ইনস্টল করা থাকে:

gh repo clone flutter/codelabs flutter-codelabs

নমুনা কোডটি আপনার মেশিনের flutter-codelabs ডিরেক্টরিতে ক্লোন করা উচিত, যেটিতে কোডল্যাবগুলির একটি সংগ্রহের জন্য কোড রয়েছে। এই কোডল্যাবের কোডটি সাব-ডিরেক্টরি flutter-codelabs/firebase-auth-flutterfire-ui তে রয়েছে।

flutter-codelabs/firebase-auth-flutterfire-ui ডিরেক্টরিতে দুটি ফ্লাটার প্রকল্প রয়েছে। একটিকে বলা হয় complete এবং অন্যটিকে start বলা হয়। start ডিরেক্টরীতে একটি অসম্পূর্ণ প্রজেক্ট রয়েছে এবং এটিই যেখানে আপনি সবচেয়ে বেশি সময় ব্যয় করবেন।

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

আপনি যদি এড়িয়ে যেতে চান, বা সম্পূর্ণ হলে কিছু কেমন হওয়া উচিত তা দেখতে চান, সম্পূর্ণ থেকে ক্রস-রেফারেন্স নামের ডিরেক্টরিতে দেখুন।

আপনি যদি কোডল্যাবের সাথে অনুসরণ করতে চান, এবং নিজে কোড যোগ করতে চান, তাহলে আপনাকে flutter-codelabs/firebase-auth-flutterfire-ui/start এ Flutter অ্যাপ দিয়ে শুরু করতে হবে এবং কোডল্যাব জুড়ে সেই প্রোজেক্টে কোড যোগ করতে হবে। আপনার পছন্দের IDE-এ সেই ডিরেক্টরিটি খুলুন বা আমদানি করুন।

Firebase CLI ইনস্টল করুন

Firebase CLI আপনার Firebase প্রকল্পগুলি পরিচালনা করার জন্য সরঞ্জাম সরবরাহ করে। FlutterFire CLI-এর জন্য CLI প্রয়োজন, যা আপনি একটু পরেই ইনস্টল করবেন।

CLI ইনস্টল করার বিভিন্ন উপায় রয়েছে। firebase.google.com/docs/cli এ আপনার অপারেটিং সিস্টেমের জন্য উপলব্ধ সমস্ত বিকল্প পর্যালোচনা করুন।

CLI ইনস্টল করার পরে, আপনাকে অবশ্যই Firebase দিয়ে প্রমাণীকরণ করতে হবে।

  1. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার Google অ্যাকাউন্ট ব্যবহার করে Firebase এ লগ ইন করুন: 
    firebase login
  2. এই কমান্ডটি আপনার স্থানীয় মেশিনকে Firebase এর সাথে সংযুক্ত করে এবং আপনাকে আপনার Firebase প্রকল্পগুলিতে অ্যাক্সেস প্রদান করে।
  3. আপনার ফায়ারবেস প্রকল্পগুলি তালিকাভুক্ত করে পরীক্ষা করুন যে CLI সঠিকভাবে ইনস্টল করা আছে এবং আপনার অ্যাকাউন্টে অ্যাক্সেস রয়েছে। নিম্নলিখিত কমান্ড চালান: 
    firebase projects:list
  4. প্রদর্শিত তালিকাটি Firebase কনসোলে তালিকাভুক্ত Firebase প্রকল্পগুলির মতোই হওয়া উচিত৷ আপনি অন্তত flutterfire-ui-codelab.

FlutterFire CLI ইনস্টল করুন

FlutterFire CLI হল একটি টুল যা আপনার Flutter অ্যাপের সমস্ত সমর্থিত প্ল্যাটফর্ম জুড়ে Firebase-এর ইনস্টলেশন প্রক্রিয়া সহজ করতে সাহায্য করে। এটি Firebase CLI-এর উপরে তৈরি করা হয়েছে।

প্রথমে, CLI ইনস্টল করুন:

dart pub global activate flutterfire_cli

নিশ্চিত করুন যে CLI ইনস্টল করা হয়েছে। নিম্নলিখিত কমান্ডটি চালান এবং যাচাই করুন যে CLI সাহায্য মেনুটি আউটপুট করে।

flutterfire --help

আপনার Flutter অ্যাপে আপনার Firebase প্রকল্প যোগ করুন

FlutterFire কনফিগার করুন

আপনার Flutter অ্যাপে Firebase ব্যবহার করার জন্য প্রয়োজনীয় ডার্ট কোড তৈরি করতে আপনি FlutterFire ব্যবহার করতে পারেন।

flutterfire configure

এই কমান্ডটি চালানো হলে, আপনি কোন ফায়ারবেস প্রকল্পটি ব্যবহার করতে চান এবং কোন প্ল্যাটফর্ম সেট আপ করতে চান তা নির্বাচন করার জন্য আপনাকে অনুরোধ করা হবে।

নিম্নলিখিত স্ক্রিনশটগুলি আপনাকে উত্তর দিতে হবে এমন প্রম্পটগুলি দেখায়৷

  1. আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন। এই ক্ষেত্রে, flutterfire-ui-codelab ব্যবহার করুন 1359cdeb83204baa.png
  2. আপনি কোন প্ল্যাটফর্ম ব্যবহার করতে চান তা নির্বাচন করুন। এই কোডল্যাবে, ওয়েব, iOS এবং Android এর জন্য Flutter-এর জন্য Firebase প্রমাণীকরণ কনফিগার করার ধাপ রয়েছে, কিন্তু আপনি সমস্ত বিকল্প ব্যবহার করার জন্য আপনার Firebase প্রকল্প সেট আপ করতে পারেন। 301c9534f594f472.png
  3. এই স্ক্রিনশটটি প্রক্রিয়ার শেষে আউটপুট দেখায়। আপনি যদি Firebase এর সাথে পরিচিত হন তবে আপনি লক্ষ্য করবেন যে কনসোলে আপনাকে প্ল্যাটফর্ম অ্যাপ্লিকেশন (উদাহরণস্বরূপ, একটি Android অ্যাপ্লিকেশন) তৈরি করতে হবে না এবং FlutterFire CLI আপনার জন্য এটি করেছে। 12199a85ade30459.png

এটি সম্পূর্ণ হলে, আপনার টেক্সট এডিটরে ফ্লাটার অ্যাপটি দেখুন। 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 একটি ফায়ারবেস প্রকল্পে একটি নির্দিষ্ট প্ল্যাটফর্মের জন্য নির্দিষ্ট বিল্ড উল্লেখ করতে শব্দ অ্যাপ্লিকেশন ব্যবহার করে। উদাহরণস্বরূপ, FlutterFire-ui-codelab নামক ফায়ারবেস প্রকল্পে একাধিক অ্যাপ্লিকেশন রয়েছে: একটি Android এর জন্য, একটি iOS এর জন্য, একটি macOS এর জন্য এবং একটি ওয়েবের জন্য।

DefaultFirebaseOptions.currentPlatform পদ্ধতিটি আপনার অ্যাপটি যে প্ল্যাটফর্মে চলছে তা শনাক্ত করতে Flutter দ্বারা উন্মোচিত TargetPlatform enum ব্যবহার করে এবং তারপর সঠিক Firebase অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় Firebase কনফিগারেশন মান প্রদান করে।

Flutter অ্যাপে Firebase প্যাকেজ যোগ করুন

চূড়ান্ত সেটআপ পদক্ষেপটি হল প্রাসঙ্গিক ফায়ারবেস প্যাকেজগুলি আপনার ফ্লাটার প্রকল্পে যোগ করা। firebase_options.dart ফাইলটিতে ত্রুটি থাকা উচিত, কারণ এটি Firebase প্যাকেজগুলির উপর নির্ভর করে যেগুলি এখনও যোগ করা হয়নি৷ টার্মিনালে, নিশ্চিত করুন যে আপনি flutter-codelabs/firebase-emulator-suite/start এ Flutter প্রকল্পের মূলে আছেন। তারপরে, নিম্নলিখিত তিনটি কমান্ড চালান: 

flutter pub add firebase_core firebase_auth firebase_ui_auth

এই সময়ে আপনার প্রয়োজন শুধুমাত্র এই প্যাকেজ.

ফায়ারবেস শুরু করুন

যোগ করা প্যাকেজ এবং DefaultFirebaseOptions.currentPlatform, main.dart ফাইলের main ফাংশনে কোড আপডেট করুন।

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 ফ্রেমওয়ার্ক সম্পূর্ণরূপে বুট না হওয়া পর্যন্ত অ্যাপ্লিকেশন উইজেট কোড চালানো শুরু না করতে। ফায়ারবেস নেটিভ প্ল্যাটফর্ম চ্যানেল ব্যবহার করে, যার জন্য ফ্রেমওয়ার্ক চালানোর প্রয়োজন হয়।
  2. Firebase.initializeApp আপনার Flutter অ্যাপ এবং আপনার Firebase প্রকল্পের মধ্যে একটি সংযোগ সেট আপ করে। DefaultFirebaseOptions.currentPlatform আমাদের তৈরি করা firebase_options.dart ফাইল থেকে আমদানি করা হয়েছে। এই স্ট্যাটিক মানটি সনাক্ত করে যে আপনি কোন প্ল্যাটফর্মে চলছেন এবং সংশ্লিষ্ট ফায়ারবেস কীগুলিতে পাস করে৷

4. প্রাথমিক Firebase UI প্রমাণীকরণ পৃষ্ঠা যোগ করুন

Auth-এর জন্য Firebase UI উইজেটগুলি প্রদান করে যা আপনার অ্যাপ্লিকেশনে সমগ্র স্ক্রীনগুলিকে উপস্থাপন করে৷ এই স্ক্রিনগুলি আপনার অ্যাপ্লিকেশন জুড়ে বিভিন্ন প্রমাণীকরণ প্রবাহ পরিচালনা করে, যেমন সাইন ইন, রেজিস্ট্রেশন, পাসওয়ার্ড ভুলে গেছি, ব্যবহারকারীর প্রোফাইল এবং আরও অনেক কিছু। শুরু করতে, আপনার অ্যাপে একটি ল্যান্ডিং পৃষ্ঠা যোগ করুন যা মূল অ্যাপ্লিকেশনে একটি প্রমাণীকরণ গার্ড হিসেবে কাজ করে।

উপাদান বা Cupertino অ্যাপ

FlutterFire UI এর জন্য আপনার অ্যাপ্লিকেশনটি একটি MaterialApp বা CupertinoApp এ মোড়ানো প্রয়োজন। আপনার পছন্দের উপর নির্ভর করে, UI স্বয়ংক্রিয়ভাবে উপাদান বা 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),
    );
  }
}

প্রমাণীকরণ অবস্থা পরীক্ষা করুন

আপনি একটি সাইন-ইন স্ক্রীন প্রদর্শন করার আগে, ব্যবহারকারী প্রমাণীকৃত কিনা তা নির্ধারণ করতে হবে৷ এটি পরীক্ষা করার সবচেয়ে সাধারণ উপায় হল Firebase Auth প্লাগইন ব্যবহার করে FirebaseAuth এর authStateChanges শোনা।

উপরের কোড নমুনায়, MaterialApp তার build পদ্ধতিতে একটি AuthGate উইজেট তৈরি করছে। (এটি একটি কাস্টম উইজেট, FlutterFire UI দ্বারা সরবরাহ করা হয়নি।)

authStateChanges স্ট্রীম অন্তর্ভুক্ত করতে সেই উইজেটটিকে আপডেট করতে হবে।

authStateChanges API বর্তমান ব্যবহারকারীর সাথে একটি Stream ফেরত দেয় (যদি তারা সাইন ইন করে থাকে), অথবা যদি তারা না থাকে তাহলে শূন্য। আমাদের অ্যাপ্লিকেশনে এই রাজ্যে সদস্যতা নিতে, আপনি Flutter's StreamBuilder উইজেট ব্যবহার করতে পারেন এবং এটিতে স্ট্রিম পাস করতে পারেন।

StreamBuilder হল এমন একটি উইজেট যা আপনি যে স্ট্রিমটি পাস করেন তার সর্বশেষ স্ন্যাপশটের উপর ভিত্তি করে নিজেকে তৈরি করে৷ যখন 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 হল একটি উইজেট যা FlutterFire UI প্যাকেজ থেকে আসে। এটি এই কোডল্যাবের পরবর্তী ধাপের ফোকাস হবে। আপনি যখন এই সময়ে অ্যাপটি চালাবেন, তখন আপনার একটি ফাঁকা সাইন-ইন স্ক্রীন দেখতে হবে।

5. সাইন-ইন স্ক্রীন

FlutterFire UI দ্বারা প্রদত্ত SignInScreen উইজেট নিম্নলিখিত কার্যকারিতা যোগ করে:

  • ব্যবহারকারীদের সাইন ইন করার অনুমতি দেয়
  • ব্যবহারকারীরা তাদের পাসওয়ার্ড ভুলে গেলে, তারা "পাসওয়ার্ড ভুলে গেছেন?" এবং তাদের পাসওয়ার্ড রিসেট করার জন্য একটি ফর্মে নিয়ে যাওয়া হবে
  • যদি একজন ব্যবহারকারী এখনও নিবন্ধিত না হন, তারা "নিবন্ধন করুন" এ ট্যাপ করতে পারেন এবং অন্য একটি ফর্মে নিয়ে যেতে পারেন যা তাদের সাইন আপ করতে দেয়৷

আবার, এর জন্য কোডের মাত্র কয়েকটি লাইন প্রয়োজন। 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 যুক্তি, পূর্বোক্ত সমস্ত কার্যকারিতা পাওয়ার জন্য প্রয়োজনীয় একমাত্র কোড। আপনি এখন একটি সাইন-ইন স্ক্রীন দেখতে পাবেন যাতে 'ইমেল' এবং 'পাসওয়ার্ড' টেক্সট ইনপুট রয়েছে, সেইসাথে একটি 'সাইন ইন' বোতাম রয়েছে।

কার্যকরী থাকাকালীন, এটি স্টাইলিং অভাব. উইজেট সাইন-ইন স্ক্রীনের চেহারা কাস্টমাইজ করতে পরামিতি প্রকাশ করে। উদাহরণস্বরূপ, আপনি আপনার কোম্পানির লোগো যোগ করতে চাইতে পারেন।

সাইন-ইন স্ক্রীন কাস্টমাইজ করুন

হেডার বিল্ডার

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

যেহেতু এটি একটি কলব্যাক, এটি আপনার ব্যবহার করতে পারে এমন মানগুলিকে প্রকাশ করে, যেমন BuildContext এবং BoxConstraints , এবং আপনাকে একটি উইজেট ফেরত দিতে হবে৷ আপনি যে উইজেটটি ফেরত দেন তা পর্দার শীর্ষে প্রদর্শিত হয়। এই উদাহরণে, নতুন কোডটি স্ক্রিনের শীর্ষে একটি চিত্র যুক্ত করে। আপনার আবেদন এখন এই মত দেখা উচিত.

73d7548d91bbd2ab.png

সাবটাইটেল নির্মাতা

সাইন-ইন স্ক্রীন তিনটি অতিরিক্ত প্যারামিটার প্রকাশ করে যা আপনাকে স্ক্রীন কাস্টমাইজ করতে দেয়: subtitleBuilder , footerBuilder , এবং sideBuilder ৷

subtitleBuilder কিছুটা আলাদা যে কলব্যাক আর্গুমেন্টে একটি অ্যাকশন অন্তর্ভুক্ত থাকে, যা AuthAction টাইপের। AuthAction হল একটি enum যেটি আপনি সনাক্ত করতে ব্যবহার করতে পারেন যে ব্যবহারকারীর স্ক্রীনটি "সাইন ইন" স্ক্রীন বা "রেজিস্টার" স্ক্রীন কিনা।

subtitleBuilder ব্যবহার করতে 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) {                     // 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();
      },
    );
  }
}

ফুটারবিল্ডার আর্গুমেন্ট সাবটাইটেলবিল্ডারের মতই। এটি 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 আর্গুমেন্ট একটি কলব্যাক গ্রহণ করে এবং এবার সেই কলব্যাকের আর্গুমেন্ট হল 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();
      },
    );
  }
}

আপনি যখন উইন্ডোর প্রস্থ প্রসারিত করেন (যদি আপনি ফ্লাটার ওয়েব বা ম্যাকওএস ব্যবহার করেন) তখন আপনার অ্যাপটি এখন এইরকম হওয়া উচিত।

8dc60b4e5d7dd2d0.png

একটি ব্যবহারকারী তৈরি করুন

এই মুহুর্তে, এই পর্দার জন্য সমস্ত কোড সম্পন্ন হয়। আপনি সাইন-ইন করার আগে, যদিও, আপনাকে একটি ব্যবহারকারী তৈরি করতে হবে। আপনি "রেজিস্টার" স্ক্রীন দিয়ে এটি করতে পারেন, অথবা আপনি Firebase কনসোলে একজন ব্যবহারকারী তৈরি করতে পারেন।

কনসোল ব্যবহার করতে:

  1. Firebase কনসোলে "ব্যবহারকারী" টেবিলে যান। 'flutterfire-ui-codelab' নির্বাচন করুন, অথবা যদি আপনি একটি ভিন্ন নাম ব্যবহার করেন তাহলে অন্য কোনো প্রকল্প। আপনি এই টেবিলটি দেখতে পাবেন: f038fd9a58ed60d9.png
  2. "ব্যবহারকারী যোগ করুন" বোতামে ক্লিক করুন। 2d78390d4c5dbbfa.png
  3. নতুন ব্যবহারকারীর জন্য একটি ইমেল ঠিকানা এবং পাসওয়ার্ড লিখুন। এটি একটি জাল ইমেল এবং পাসওয়ার্ড হতে পারে, যেমনটি আমি নীচের ছবিতে প্রবেশ করেছি৷ এটি কাজ করবে, কিন্তু আপনি যদি একটি জাল ইমেল ঠিকানা ব্যবহার করেন তবে "পাসওয়ার্ড ভুলে গেছেন" কার্যকারিতা কাজ করবে না। 62ba0feb33d54add.png
  4. "ব্যবহারকারী যোগ করুন" ক্লিক করুন 32b236b3ef94d4c7.png

এখন, আপনি আপনার ফ্লটার অ্যাপ্লিকেশনে ফিরে যেতে পারেন, এবং সাইন-ইন পৃষ্ঠা ব্যবহার করে একজন ব্যবহারকারীকে সাইন ইন করতে পারেন৷ আপনার অ্যাপটি এইরকম হওয়া উচিত:

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 পৃষ্ঠা দ্বারা প্রদত্ত আদর্শ UI। সমস্ত বোতাম এবং পাঠ্য ক্ষেত্রগুলি Firebase Auth পর্যন্ত তারযুক্ত এবং বাক্সের বাইরে কাজ করে৷ উদাহরণস্বরূপ, আপনি "নাম" টেক্সটফিল্ডে একটি নাম লিখতে পারেন এবং 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 auth স্টেট পরিবর্তন করে বর্তমান ব্যবহারকারী শূন্য হয়।

একটি কলব্যাক যোগ করে যা Navigator.of(context).pop() কল করে যখন SignedOutAction ট্রিগার হয়, অ্যাপটি আগের পৃষ্ঠায় নেভিগেট করবে। এই উদাহরণের অ্যাপে, শুধুমাত্র একটি স্থায়ী রুট আছে, যা সাইন ইন স্ক্রীন দেখায় যদি কোনো ব্যবহারকারী সাইন ইন না করে থাকে এবং যদি কোনো ব্যবহারকারী থাকে তাহলে হোম পেজ। কারণ এটি ঘটে যখন ব্যবহারকারী সাইন আউট করেন, অ্যাপটি সাইন ইন স্ক্রীন প্রদর্শন করবে।

প্রোফাইল পৃষ্ঠা কাস্টমাইজ করুন

সাইন ইন স্ক্রিনের মতো, প্রোফাইল পৃষ্ঠাটি কাস্টমাইজযোগ্য। প্রথমত, আমাদের বর্তমান পৃষ্ঠায় হোম পেজে ফিরে যাওয়ার কোনো উপায় নেই একবার ব্যবহারকারী প্রোফাইল পৃষ্ঠায়। ProfileScreen উইজেটকে একটি AppBar দিয়ে এটি ঠিক করুন।

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 আর্গুমেন্ট Flutter Material প্যাকেজ থেকে একটি AppBar উইজেট গ্রহণ করে, তাই এটিকে আপনার তৈরি করা এবং একটি Scaffold পাস করা অন্য যেকোন AppBar মতো বিবেচনা করা যেতে পারে। এই উদাহরণে, একটি "ব্যাক" বোতাম স্বয়ংক্রিয়ভাবে যোগ করার ডিফল্ট কার্যকারিতা রাখা হয়, এবং পর্দায় এখন একটি শিরোনাম রয়েছে৷

প্রোফাইল স্ক্রিনে শিশুদের যোগ করুন

ProfileScreen উইজেটে শিশুদের নামে একটি ঐচ্ছিক যুক্তিও রয়েছে। এই যুক্তিটি উইজেটগুলির একটি তালিকা গ্রহণ করে এবং সেই উইজেটগুলি একটি Column উইজেটের ভিতরে উল্লম্বভাবে স্থাপন করা হবে যা ইতিমধ্যেই ProfileScreen তৈরি করতে অভ্যন্তরীণভাবে ব্যবহৃত হয়েছে। ProfileScreen বিল্ড পদ্ধতিতে এই Column উইজেটটি আপনার পাস করা বাচ্চাদের "সাইন আউট" বোতামের উপরে রাখবে।

এখানে কোম্পানির লোগো দেখানোর জন্য 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 pub add google_sign_in firebase_ui_oauth_google

Google সাইন-ইন প্রদানকারী সক্ষম করুন৷

এর পরে, Firebase কনসোলে Google প্রদানকারী সক্ষম করুন:

  1. কনসোলে প্রমাণীকরণ সাইন-ইন প্রদানকারীর স্ক্রিনে নেভিগেট করুন।
  2. "নতুন প্রদানকারী যোগ করুন" ক্লিক করুন। 8286fb28be94bf30.png
  3. "গুগল" নির্বাচন করুন। c4e28e6f4974be7f.png
  4. "সক্ষম করুন" লেবেলযুক্ত সুইচটি টগল করুন এবং "সংরক্ষণ করুন" টিপুন। 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();
      },
    );
  }
}

এখানে শুধুমাত্র নতুন কোডটি হল SignInScreen উইজেট কনফিগারেশনে GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") যোগ করা।

এটি যোগ করার সাথে, আপনার অ্যাপটি পুনরায় লোড করুন এবং আপনি একটি Google সাইন ইন বোতাম দেখতে পাবেন।

aca71a46a011bfb5.png

সাইন-ইন বোতাম কনফিগার করুন

অতিরিক্ত কনফিগারেশন ছাড়া বোতামটি কাজ করে না। আপনি যদি ফ্লাটার ওয়েবের সাথে ডেভেলপ করছেন, তাহলে এটি কাজ করার জন্য আপনাকে যোগ করতে হবে একমাত্র পদক্ষেপ। অন্যান্য প্ল্যাটফর্মের জন্য অতিরিক্ত পদক্ষেপের প্রয়োজন, যা একটু আলোচনা করা হয়েছে।

  1. Firebase কনসোলে প্রমাণীকরণ প্রদানকারীর পৃষ্ঠায় নেভিগেট করুন।
  2. Google প্রদানকারীতে ক্লিক করুন। 9b3a325c5eca6e49.png
  3. "ওয়েব SDK কনফিগারেশন" সম্প্রসারণ-প্যানেলে ক্লিক করুন৷
  4. "ওয়েব ক্লায়েন্ট আইডি" থেকে মান কপি করুন। 711a79f0d931c60f.png
  5. আপনার টেক্সট এডিটরে ফিরে যান এবং auth_gate.dart ফাইলে GoogleProvider এর ইনস্ট্যান্স আপডেট করুন এই আইডিটি clientId নামের প্যারামিটারে দিয়ে। 
GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

একবার ওয়েব ক্লায়েন্ট আইডি প্রবেশ করানো হলে, আপনার অ্যাপটি পুনরায় লোড করুন। আপনি যখন "Google এর সাথে সাইন ইন করুন" বোতাম টিপুন, একটি নতুন উইন্ডো প্রদর্শিত হবে, যদি আপনি ওয়েব ব্যবহার করেন, যা আপনাকে Google সাইন ইন প্রবাহের মাধ্যমে নিয়ে যাবে৷ প্রাথমিকভাবে, এটি এই মত দেখায়:

14e73e3c9de704bb.png

iOS কনফিগার করুন

এটি iOS এ কাজ করার জন্য, একটি অতিরিক্ত কনফিগারেশন প্রক্রিয়া আছে।

  1. Firebase কনসোলে প্রজেক্ট সেটিংস স্ক্রিনে নেভিগেট করুন। এমন একটি কার্ড থাকবে যা আপনার ফায়ারবেস অ্যাপগুলির তালিকা করবে যা দেখতে এইরকম: fefa674acbf213cc.png
  2. iOS নির্বাচন করুন। মনে রাখবেন যে আপনার অ্যাপ্লিকেশনের নামটি স্ক্রিনশটে দেখানো একটি থেকে আলাদা হবে। যেখানে স্ক্রিনশট বলে "সম্পূর্ণ" আপনারটি বলবে "শুরু", যদি আপনি এই কোডল্যাবের সাথে অনুসরণ করার জন্য flutter-codelabs/firebase-auth-flutterfire-ui/start প্রকল্প ব্যবহার করেন।
  3. প্রয়োজনীয় কনফিগারেশন ফাইল ডাউনলোড করতে GoogleServices-Info.plist বলে বোতামটি ক্লিক করুন। f89b3192871dfbe3.png
  4. ডাউনলোড করা ফাইলটিকে আপনার ফ্লাটার প্রকল্পে /ios/Runner নামক ডিরেক্টরিতে টেনে আনুন।
  5. আপনার প্রকল্পের রুট থেকে নিম্নলিখিত টার্মিনাল কমান্ডটি চালিয়ে Xcode খুলুন: open ios/Runner.xcworkspace
  6. রানার ডিরেক্টরিতে ডান-ক্লিক করুন এবং "রানার"-এ ফাইল যোগ করুন নির্বাচন করুন। 858986063a4c5201.png
  7. ফাইল ম্যানেজার থেকে GoogleService-Info.plist নির্বাচন করুন।
  8. আপনার টেক্সট এডিটরে ফিরে যান (এটি Xcode নয়), ios/Runner/Info.plist ফাইলে নিচের CFBundleURLTypes বৈশিষ্ট্যগুলি যোগ করুন। 
    <!-- 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. আপনাকে আপনার Firebase iOS ক্লায়েন্ট আইডির সাথে যুক্ত ক্লায়েন্ট আইডি দিয়ে ওয়েব সেটআপে যোগ করা GoogleProvider.clientId প্রতিস্থাপন করতে হবে। প্রথমত, আপনি iOS ধ্রুবকের অংশ হিসাবে firebase_options.dart ফাইলে এই আইডিটি খুঁজে পেতে পারেন। 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. lib/main.dart ফাইলের clientId ভেরিয়েবলে সেই মানটি পেস্ট করুন।

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

যদি আপনার ফ্লাটার অ্যাপটি ইতিমধ্যেই iOS-এ চলছে, তাহলে আপনাকে এটি সম্পূর্ণরূপে বন্ধ করতে হবে এবং তারপরে অ্যাপ্লিকেশনটি পুনরায় চালাতে হবে। অন্যথায়, iOS এ অ্যাপটি চালান।

8. অভিনন্দন!

আপনি Flutter codelab-এর জন্য Firebase Auth UI সম্পূর্ণ করেছেন। আপনি GitHub-এ firebase-auth-flutterfire-ui/complete ডিরেক্টরিতে এই কোডল্যাবের সম্পূর্ণ কোডটি খুঁজে পেতে পারেন।

আমরা কভার করেছি কি

  • Firebase ব্যবহার করতে একটি Flutter অ্যাপ সেট আপ করা হচ্ছে
  • Firebase কনসোলে একটি Firebase প্রকল্প সেট আপ করা হচ্ছে
  • FlutterFire CLI
  • ফায়ারবেস CLI
  • ফায়ারবেস প্রমাণীকরণ ব্যবহার করা
  • আপনার Flutter অ্যাপে Firebase প্রমাণীকরণ পরিচালনা করতে FlutterFire UI ব্যবহার করা

পরবর্তী পদক্ষেপ

আরও জানুন

স্পার্কি আপনার সাথে উদযাপন করতে এখানে!

2a0ad195769368b1.gif