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

১. শুরু করার আগে

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

পূর্বশর্ত

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

• ফ্লাটার উইজেট ফ্রেমওয়ার্ক ঘুরে দেখুন
• আপনার প্রথম ফ্লাটার অ্যাপ লিখুন, পর্ব ১ কোডল্যাবটি চেষ্টা করুন।

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

• ফায়ারবেস ফান্ডামেন্টালস ডক্স
• ফ্লাটার কোডল্যাবের মাধ্যমে ফায়ারবেস সম্পর্কে জানুন ।

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

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

আপনি যা শিখবেন

এই কোডল্যাবে যা যা অন্তর্ভুক্ত রয়েছে:

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

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

আপনার যা যা লাগবে

• ফ্লাটার সম্পর্কে কার্যকরী জ্ঞান এবং এসডিকে ইনস্টল করা থাকতে হবে।
• একটি টেক্সট এডিটর (জেটব্রেইনস আইডিই, অ্যান্ড্রয়েড স্টুডিও এবং ভিএস কোড ফ্লাটার দ্বারা সমর্থিত)
• গুগল ক্রোম ব্রাউজার, অথবা ফ্লাটার ডেভেলপমেন্টের জন্য আপনার পছন্দের অন্য কোনো প্ল্যাটফর্ম। (এই কোডল্যাবের কিছু টার্মিনাল কমান্ড ধরে নেবে যে আপনি আপনার অ্যাপটি ক্রোমে চালাচ্ছেন)

২. একটি ফায়ারবেস প্রজেক্ট তৈরি ও সেট আপ করুন।

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

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

1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
2. নতুন প্রজেক্ট তৈরি করতে বাটনটিতে ক্লিক করুন এবং তারপর একটি প্রজেক্টের নাম লিখুন (উদাহরণস্বরূপ, FlutterFire-UI-Codelab )।
   
3. চালিয়ে যান-এ ক্লিক করুন।
4. অনুরোধ করা হলে, Firebase-এর শর্তাবলী পর্যালোচনা করে গ্রহণ করুন এবং তারপর 'চালিয়ে যান' (Continue ) বোতামে ক্লিক করুন।
5. (ঐচ্ছিক) Firebase কনসোলে AI সহায়তা সক্রিয় করুন (Firebase-এ এটিকে "Gemini" বলা হয়)।
6. এই কোডল্যাবের জন্য আপনার গুগল অ্যানালিটিক্স-এর প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স অপশনটি বন্ধ করে দিন ।
7. Create project-এ ক্লিক করুন, আপনার প্রজেক্টটি প্রস্তুত হওয়া পর্যন্ত অপেক্ষা করুন, এবং তারপর Continue-তে ক্লিক করুন।

ফায়ারবেস প্রজেক্ট সম্পর্কে আরও জানতে, “ফায়ারবেস প্রজেক্ট বুঝুন” দেখুন।

ফায়ারবেস অথেনটিকেশনের জন্য ইমেল সাইন-ইন সক্রিয় করুন

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

ফায়ারবেস কনসোল ব্যবহার করে ফায়ারবেস অথেনটিকেশন চালু করতে হয় এবং একবার চালু হয়ে গেলে এর জন্য বিশেষ কনফিগারেশনের প্রয়োজন হয়।

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

1. Firebase কনসোলে, বাম প্যানেলে থাকা Build মেনুটি প্রসারিত করুন।
2. Authentication-এ ক্লিক করুন, এবং তারপর Get Started বোতামে ক্লিক করে Sign-in method ট্যাবে যান (অথবা সরাসরি Sign-in method ট্যাবে যান)।
3. সাইন-ইন প্রদানকারীদের তালিকা থেকে ইমেল/পাসওয়ার্ড-এ ক্লিক করুন, ‘Enable’ সুইচটি অন অবস্থানে সেট করুন এবং তারপরে ‘Save’-এ ক্লিক করুন।

৩. ফ্লাটার অ্যাপ সেট আপ করুন

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

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

কমান্ড লাইন থেকে গিটহাব রিপোজিটরিটি ক্লোন করুন:

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

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

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

ফায়ারবেস সিএলআই ইনস্টল করুন

ফায়ারবেস সিএলআই আপনার ফায়ারবেস প্রোজেক্টগুলো পরিচালনা করার জন্য বিভিন্ন টুল সরবরাহ করে। ফ্লাটারফায়ার সিএলআই-এর জন্য এই সিএলআই-টি প্রয়োজন, যা আপনি একটু পরেই ইনস্টল করবেন।

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

CLI ইনস্টল করার পর, আপনাকে Firebase-এর সাথে প্রমাণীকরণ করতে হবে।

1. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেসে লগ ইন করুন:

   firebase login
   

2. এই কমান্ডটি আপনার লোকাল মেশিনকে ফায়ারবেসের সাথে সংযুক্ত করে এবং আপনাকে আপনার ফায়ারবেস প্রজেক্টগুলোতে অ্যাক্সেস প্রদান করে।
3. আপনার Firebase প্রজেক্টগুলো তালিকাভুক্ত করে পরীক্ষা করুন যে CLI সঠিকভাবে ইনস্টল করা আছে এবং আপনার অ্যাকাউন্টে এর অ্যাক্সেস আছে। নিম্নলিখিত কমান্ডটি চালান:

   firebase projects:list
   

4. প্রদর্শিত তালিকাটি ফায়ারবেস কনসোলে তালিকাভুক্ত ফায়ারবেস প্রজেক্টগুলোর মতোই হওয়া উচিত। আপনি অন্তত flutterfire-ui-codelab.

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

ফ্লাটারফায়ার সিএলআই হলো এমন একটি টুল যা আপনার ফ্লাটার অ্যাপে সমস্ত সমর্থিত প্ল্যাটফর্মে ফায়ারবেস ইনস্টলেশন প্রক্রিয়াকে সহজ করতে সাহায্য করে। এটি ফায়ারবেস সিএলআই-এর উপর ভিত্তি করে তৈরি।

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

dart pub global activate flutterfire_cli

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

flutterfire --help

আপনার ফ্লাটার অ্যাপে আপনার ফায়ারবেস প্রজেক্ট যোগ করুন

ফ্লাটারফায়ার কনফিগার করুন

আপনার ফ্লাটার অ্যাপে ফায়ারবেস ব্যবহার করার জন্য প্রয়োজনীয় ডার্ট কোড তৈরি করতে আপনি ফ্লাটারফায়ার ব্যবহার করতে পারেন।

flutterfire configure

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

নিচের স্ক্রিনশটগুলোতে সেই প্রশ্নগুলো দেখানো হয়েছে যেগুলোর উত্তর আপনাকে দিতে হবে।

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

এটি সম্পন্ন হলে, আপনার টেক্সট এডিটরে ফ্লাটার অ্যাপটি দেখুন। ফ্লাটারফায়ার সিএলআই firebase_options.dart নামের একটি ফাইল পরিবর্তন করেছে। এই ফাইলে FirebaseOptions নামের একটি ক্লাস রয়েছে, যেখানে প্রতিটি প্ল্যাটফর্মের জন্য প্রয়োজনীয় ফায়ারবেস কনফিগারেশন ধারণকারী স্ট্যাটিক ভেরিয়েবল আছে। আপনি যদি 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',
  );
}

ফায়ারবেস একটি প্রোজেক্টে কোনো নির্দিষ্ট প্ল্যাটফর্মের জন্য তৈরি বিশেষ বিল্ডকে বোঝাতে 'অ্যাপ্লিকেশন' শব্দটি ব্যবহার করে। উদাহরণস্বরূপ, FlutterFire-ui-codelab নামক ফায়ারবেস প্রোজেক্টটিতে একাধিক অ্যাপ্লিকেশন রয়েছে: একটি অ্যান্ড্রয়েডের জন্য, একটি আইওএস-এর জন্য, একটি ম্যাকওএস-এর জন্য এবং একটি ওয়েবের জন্য।

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

ফ্লাটার অ্যাপে ফায়ারবেস প্যাকেজ যোগ করুন

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

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

৪. প্রাথমিক ফায়ারবেস UI অথেন্টিকেশন পেজ যোগ করুন

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

প্রমাণীকরণ অবস্থা যাচাই করুন

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

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

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

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

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 রিটার্ন করবে।
• এরপরে, স্ট্রিম থেকে প্রাপ্ত মানটিতে User অবজেক্টটি আছে কিনা তা যাচাই করার জন্য কোডটি snapshot.hasData ব্যবহার করছে।
• যদি তা না থাকে, তবে এটি একটি SignInScreen উইজেট ফেরত দেবে। আপাতত, এই স্ক্রিনটি কিছুই করবে না, এটি পরবর্তী ধাপে আপডেট করা হবে।
• অন্যথায়, এটি একটি HomeScreen ফেরত দেয়, যা অ্যাপ্লিকেশনটির মূল অংশ এবং শুধুমাত্র প্রমাণীকৃত ব্যবহারকারীরাই এতে প্রবেশ করতে পারে।

SignInScreen হলো FlutterFire UI প্যাকেজের একটি উইজেট। এই কোডল্যাবের পরবর্তী ধাপে এটিই হবে মূল আলোচ্য বিষয়। এই পর্যায়ে আপনি যখন অ্যাপটি চালাবেন, তখন একটি ফাঁকা সাইন-ইন স্ক্রিন দেখতে পাবেন।

৫. সাইন-ইন স্ক্রিন

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

• ব্যবহারকারীদের সাইন ইন করার অনুমতি দেয়
• ব্যবহারকারীরা যদি তাদের পাসওয়ার্ড ভুলে যান, তাহলে তারা 'Forgot password?'-এ ট্যাপ করে পাসওয়ার্ড রিসেট করার জন্য একটি ফর্মে যেতে পারবেন।
• যদি কোনো ব্যবহারকারী এখনও নিবন্ধিত না হয়ে থাকেন, তাহলে তিনি "নিবন্ধন করুন" বোতামে ট্যাপ করলে অন্য একটি ফর্মে চলে যাবেন, যেখান থেকে তিনি নিবন্ধন করতে পারবেন।

আবারও, এর জন্য মাত্র কয়েক লাইন কোড প্রয়োজন। 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 আর্গুমেন্টটিই যথেষ্ট। এখন আপনি একটি সাইন-ইন স্ক্রিন দেখতে পাবেন, যেখানে 'email' ও 'password' টেক্সট ইনপুটের পাশাপাশি একটি 'Sign In' বাটনও থাকবে।

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

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

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

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

headerBuilder আর্গুমেন্টটির জন্য HeaderBuilder টাইপের একটি ফাংশন প্রয়োজন, যা FlutterFire UI প্যাকেজে সংজ্ঞায়িত করা আছে।

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

যেহেতু এটি একটি কলব্যাক, তাই এটি BuildContext এবং BoxConstraints মতো ব্যবহারযোগ্য ভ্যালুগুলো প্রকাশ করে এবং এর জন্য আপনাকে একটি উইজেট রিটার্ন করতে হবে। আপনি যে উইজেটটি রিটার্ন করবেন, সেটি স্ক্রিনের উপরে প্রদর্শিত হবে। এই উদাহরণে, নতুন কোডটি স্ক্রিনের উপরে একটি ছবি যোগ করে। আপনার অ্যাপ্লিকেশনটি এখন দেখতে এইরকম হবে।

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

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

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

lib/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 আর্গুমেন্টটি একটি কলব্যাক গ্রহণ করে, এবং এইবার সেই কলব্যাকের আর্গুমেন্টগুলো হলো BuildContext এবং double shrinkOffset । sideBuilder যে উইজেটটি রিটার্ন করে, সেটি সাইন-ইন ফর্মের বাম দিকে এবং শুধুমাত্র ওয়াইড স্ক্রিনে প্রদর্শিত হবে। এর মানে হলো, উইজেটটি কেবল ডেস্কটপ এবং ওয়েব অ্যাপেই প্রদর্শিত হবে।

অভ্যন্তরীণভাবে, FlutterFire UI একটি ব্রেকপয়েন্ট ব্যবহার করে নির্ধারণ করে যে হেডার কন্টেন্ট দেখানো হবে (লম্বা স্ক্রিনে, যেমন মোবাইলে) নাকি সাইড কন্টেন্ট দেখানো হবে (চওড়া স্ক্রিনে, যেমন ডেস্কটপ বা ওয়েবে)। নির্দিষ্টভাবে, যদি কোনো স্ক্রিন ৮০০ পিক্সেলের বেশি চওড়া হয়, তাহলে সাইড বিল্ডার কন্টেন্ট দেখানো হয় এবং হেডার কন্টেন্ট দেখানো হয় না। যদি স্ক্রিনটি ৮০০ পিক্সেলের কম চওড়া হয়, তবে এর বিপরীতটি ঘটে।

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(
            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) {                   // Add from here...
              return Padding(
                padding: const EdgeInsets.all(20),
                child: AspectRatio(
                  aspectRatio: 1,
                  child: Image.asset('assets/flutterfire_300x.png'),
                ),
              );                                                     // To here.
            },
          );
        }

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

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

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

এই পর্যায়ে, এই স্ক্রিনের জন্য সমস্ত কোড লেখা শেষ। তবে, সাইন-ইন করার আগে আপনাকে একজন ইউজার তৈরি করতে হবে। আপনি "রেজিস্টার" স্ক্রিন থেকে এটি করতে পারেন, অথবা ফায়ারবেস কনসোলেও একজন ইউজার তৈরি করতে পারেন।

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

1. Firebase কনসোলে "Users" টেবিলে যান। 'flutterfire-ui-codelab' নির্বাচন করুন, অথবা আপনি যদি ভিন্ন নাম ব্যবহার করে থাকেন তবে অন্য কোনো প্রজেক্ট নির্বাচন করুন। আপনি এই টেবিলটি দেখতে পাবেন:
2. 'ব্যবহারকারী যোগ করুন' বোতামটি ক্লিক করুন।
3. নতুন ব্যবহারকারীর জন্য একটি ইমেল ঠিকানা এবং পাসওয়ার্ড দিন। এটি একটি নকল ইমেল এবং পাসওয়ার্ডও হতে পারে, যেমনটি আমি নীচের ছবিতে দিয়েছি। সেটি কাজ করবে, কিন্তু আপনি যদি একটি নকল ইমেল ঠিকানা ব্যবহার করেন, তাহলে "পাসওয়ার্ড ভুলে গেছেন" (Forgot password) সুবিধাটি কাজ করবে না।
4. 'ব্যবহারকারী যোগ করুন'-এ ক্লিক করুন

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

৬. প্রোফাইল স্ক্রিন

ফ্লাটারফায়ার 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 কলব্যাক থেকে রিটার্ন করা হয়।

আপনার অ্যাপটি রিলোড করুন, এবং উপরের ডানদিকের (অ্যাপ বারে) আইকনটিতে ক্লিক করুন, তাহলে এইরকম একটি পেজ প্রদর্শিত হবে:

এটি ফ্লাটারফায়ার UI পেজের দেওয়া স্ট্যান্ডার্ড UI। সমস্ত বাটন এবং টেক্সট ফিল্ড ফায়ারবেস অথেন্টিকেশনের সাথে সংযুক্ত এবং কোনো অতিরিক্ত কনফিগারেশন ছাড়াই কাজ করে। উদাহরণস্বরূপ, আপনি "Name" টেক্সটফিল্ডে একটি নাম লিখলে, ফ্লাটারফায়ার UI তখন FirebaseAuth.instance.currentUser?.updateDisplayName মেথডটিকে কল করবে, যা সেই নামটি ফায়ারবেসে সংরক্ষণ করবে।

সাইন আউট

এই মুহূর্তে, আপনি "সাইন আউট" বোতামটি চাপলে অ্যাপটি পরিবর্তিত হবে না। এটি আপনাকে সাইন আউট করে দেবে, কিন্তু আপনাকে 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 এর সাবটাইপ হিসেবে বিভিন্ন ক্লাস রয়েছে, এবং সাধারণত আপনি আপনার অ্যাপকে বিভিন্ন অথেন্টিকেশন স্টেটের পরিবর্তনে প্রতিক্রিয়া জানাতে এগুলি ব্যবহার করেন। যখন Firebase অথেন্টিকেশন স্টেট পরিবর্তিত হয়ে currentUser-এর মান null হয়ে যায়, তখন SignedOutAction আপনার দেওয়া একটি কলব্যাক ফাংশনকে কল করে।

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

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

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

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

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

সাইন ইন স্ক্রিনের মতো করে এখানে কোম্পানির লোগো দেখানোর জন্য 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('assets/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(),
          ],
        ),
      ),
    );
  }
}

আপনার অ্যাপটি রিলোড করুন, এবং আপনি স্ক্রিনে এটি দেখতে পাবেন:

৭. মাল্টিপ্ল্যাটফর্ম গুগল অথেন্টিকেশন সাইন ইন

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

গুগল অথেন্টিকেশনের সাথে ইন্টিগ্রেট করতে, অফিসিয়াল firebase_ui_oauth_google প্লাগইন এবং এর ডিপেন্ডেন্সিগুলো ইনস্টল করুন, যা নেটিভ অথেন্টিকেশন ফ্লো পরিচালনা করবে। টার্মিনালে, আপনার ফ্লাটার প্রজেক্টের রুটে যান এবং নিম্নলিখিত কমান্ডটি লিখুন:

flutter pub add google_sign_in firebase_ui_oauth_google

গুগল সাইন-ইন প্রদানকারী সক্রিয় করুন

এরপরে, Firebase Console- এ Google প্রোভাইডারটি সক্রিয় করুন:

1. কনসোলে থাকা অথেনটিকেশন সাইন-ইন প্রোভাইডার্স স্ক্রিনে যান।
2. 'নতুন প্রদানকারী যোগ করুন'-এ ক্লিক করুন।
3. 'Google' নির্বাচন করুন।
4. 'Enable' লেবেলযুক্ত সুইচটি টগল করুন এবং 'Save' চাপুন।
5. কনফিগারেশন ফাইল ডাউনলোড করার তথ্যসহ কোনো মোডাল উইন্ডো দেখা গেলে, "সম্পন্ন" (Done) বোতামে ক্লিক করুন।
6. গুগল সাইন-ইন প্রদানকারী যুক্ত করা হয়েছে কিনা তা নিশ্চিত করুন।

গুগল সাইন-ইন বোতাম যোগ করুন

গুগল সাইন-ইন চালু করা থাকলে, সাইন-ইন স্ক্রিনে একটি স্টাইলিশ গুগল সাইন-ইন বাটন দেখানোর জন্য প্রয়োজনীয় উইজেটটি যোগ করুন। 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('assets/flutterfire_300x.png'),
                ),
              );
            },
          );
        }

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

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

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

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

অতিরিক্ত কনফিগারেশন ছাড়া বাটনটি কাজ করে না। আপনি যদি ফ্লাটার ওয়েব (Flutter Web) দিয়ে ডেভেলপ করেন, তবে এটি কাজ করানোর জন্য আপনাকে শুধু এই একটি ধাপই যোগ করতে হবে। অন্যান্য প্ল্যাটফর্মের জন্য অতিরিক্ত ধাপের প্রয়োজন হয়, যা নিয়ে একটু পরেই আলোচনা করা হয়েছে।

1. Firebase Console- এ Authentication providers পৃষ্ঠায় যান।
2. গুগল প্রোভাইডারে ক্লিক করুন।
3. ‘Web SDK configuration’ এক্সপ্যানশন-প্যানেলটিতে ক্লিক করুন।
4. 'ওয়েব ক্লায়েন্ট আইডি' থেকে মানটি কপি করুন।
5. আপনার টেক্সট এডিটরে ফিরে যান এবং clientId নামের প্যারামিটারে এই আইডিটি পাস করে auth_gate.dart ফাইলে GoogleProvider এর ইনস্ট্যান্সটি আপডেট করুন।

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

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

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

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

1. Firebase কনসোলে প্রজেক্ট সেটিংস স্ক্রিনে যান। সেখানে আপনার Firebase অ্যাপগুলির একটি তালিকা সহ একটি কার্ড থাকবে, যা দেখতে এইরকম:
2. iOS নির্বাচন করুন। মনে রাখবেন, আপনার অ্যাপ্লিকেশনের নাম স্ক্রিনশটে দেখানো নাম থেকে ভিন্ন হবে। স্ক্রিনশটে যেখানে "complete" লেখা আছে, আপনারটিতে সেখানে "start" লেখা থাকবে, যদি আপনি এই কোডল্যাবটি অনুসরণ করার জন্য flutter-codelabs/firebase-auth-flutterfire-ui/start প্রজেক্টটি ব্যবহার করে থাকেন।
3. প্রয়োজনীয় কনফিগারেশন ফাইলটি ডাউনলোড করতে GoogleServices-Info.plist লেখা বাটনটিতে ক্লিক করুন।
4. ডাউনলোড করা ফাইলটি আপনার ফ্লাটার প্রজেক্টের /ios/Runner নামের ডিরেক্টরিতে ড্র্যাগ করুন।
5. আপনার প্রোজেক্টের রুট থেকে নিম্নলিখিত টার্মিনাল কমান্ডটি চালিয়ে Xcode খুলুন: open ios/Runner.xcworkspace
6. Runner ডিরেক্টরিতে রাইট-ক্লিক করুন এবং "Add Files to "Runner" নির্বাচন করুন।
7. ফাইল ম্যানেজার থেকে GoogleService-Info.plist নির্বাচন করুন।
8. আপনার টেক্সট এডিটরে (যেটি Xcode নয়) ফিরে গিয়ে, নিচের CFBundleURLTypes অ্যাট্রিবিউটগুলো ios/Runner/Info.plist ফাইলে যোগ করুন। অবশ্যই REVERSE_CLIENT_ID GoogleService-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>REVERSE_CLIENT_ID</string>
       </array>
     </dict>
   </array>
   <!-- End of the Google Sign-in Section -->
   

9. firebase_options.dart ফাইলটি আপডেট করতে flutterfire configure কমান্ডটি আবার চালান। যদি CLI জিজ্ঞাসা করে যে আপনি বিদ্যমান firebase.json ফাইলটি পুনরায় ব্যবহার করতে চান কিনা, তাহলে `yes` নির্বাচন করুন।
10. ওয়েব সেটআপে যোগ করা 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',
    );
    

11. 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 iosClientId.

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

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

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

অ্যান্ড্রয়েড কনফিগার করুন

অ্যান্ড্রয়েডে গুগল সাইন-ইন ব্যবহার করতে হলে, প্রথমে আপনাকে আপনার ফায়ারবেস প্রজেক্টে অ্যাপের SHA-1 ফিঙ্গারপ্রিন্টটি রেজিস্টার করতে হবে।

1. আপনার অ্যাপের জন্য সাইনিং রিপোর্ট তৈরি করতে, আপনার প্রজেক্টের android ডিরেক্টরিতে যান এবং নিম্নলিখিত কমান্ডটি চালান:

./gradlew signingReport

2. কমান্ডটি সম্পন্ন হওয়ার পর, আপনি ভ্যারিয়েন্টগুলোর একটি তালিকা এবং তাদের সাইনিং তথ্য দেখতে পাবেন। debug ভ্যারিয়েন্টের অধীনে SHA-1 কী-টি খুঁজুন এবং সেটি কপি করুন।

3. Firebase কনসোলের প্রজেক্ট সেটিংস স্ক্রিনে যান এবং আপনার অ্যান্ড্রয়েড অ্যাপটি নির্বাচন করুন। Add fingerprint বোতামে ক্লিক করুন এবং আপনার কপি করা SHA-1 কী-টি রেজিস্টার করুন।

৮. অভিনন্দন!

আপনি ফ্লাটারের জন্য ফায়ারবেস অথোরাইজেশন UI কোডল্যাবটি সম্পন্ন করেছেন। এই কোডল্যাবের সম্পূর্ণ কোডটি আপনি গিটহাবের firebase-auth-flutterfire-ui/complete ডিরেক্টরিতে খুঁজে পাবেন।

আমরা যা আলোচনা করেছি

• ফায়ারবেস ব্যবহার করার জন্য একটি ফ্লাটার অ্যাপ সেট আপ করা
• ফায়ারবেস কনসোলে একটি ফায়ারবেস প্রজেক্ট সেট আপ করা
• ফ্লাটারফায়ার সিএলআই
• ফায়ারবেস সিএলআই
• ফায়ারবেস অথেনটিকেশন ব্যবহার করে
• আপনার ফ্লাটার অ্যাপে ফায়ারবেস অথেন্টিকেশন পরিচালনা করতে ফ্লাটারফায়ার UI ব্যবহার করুন

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

• ফ্লাটারে ফায়ারস্টোর এবং অথেনটিকেশন ব্যবহার সম্পর্কে আরও জানুন: কোডল্যাবের জন্য ফায়ারবেস সম্পর্কে জানুন।
• আপনার ফ্লাটার অ্যাপ্লিকেশন তৈরির জন্য ফায়ারবেসের অন্যান্য টুলগুলো অন্বেষণ করুন:
  • ক্লাউড স্টোরেজ
  • ক্লাউড ফাংশন
  • রিয়েলটাইম ডেটাবেস

আরও জানুন

• ফায়ারবেস সাইট: firebase.google.com
• ফ্লাটার সাইট: flutter.dev
• ফ্লাটারফায়ার ফায়ারবেস ফ্লাটার উইজেট: firebase.flutter.dev
• ফায়ারবেস ইউটিউব চ্যানেল
• ফ্লাটার ইউটিউব চ্যানেল

স্পার্কি তোমাদের সাথে উদযাপন করতে এসেছে!