FirebaseUI का इस्तेमाल करके, Flutter ऐप्लिकेशन में उपयोगकर्ता की पुष्टि करने का फ़्लो जोड़ें

1. शुरू करने से पहले

इस कोडलैब में, आपको FlutterFire यूज़र इंटरफ़ेस (यूआई) पैकेज का इस्तेमाल करके, अपने Flutter ऐप्लिकेशन में Firebase Authentication जोड़ने का तरीका पता चलेगा. इस पैकेज की मदद से, Flutter ऐप्लिकेशन में ईमेल और पासवर्ड की पुष्टि करने की सुविधा और Google Sign In की पुष्टि करने की सुविधा, दोनों जोड़ी जा सकती हैं. साथ ही, आपको Firebase प्रोजेक्ट सेट अप करने का तरीका भी पता चलेगा. साथ ही, अपने Flutter ऐप्लिकेशन में Firebase को शुरू करने के लिए, FlutterFire CLI का इस्तेमाल करने का तरीका भी पता चलेगा.

ज़रूरी शर्तें

इस कोडलैब में यह माना गया है कि आपके पास Flutter का कुछ अनुभव है. अगर नहीं, तो आपको पहले बुनियादी बातें जाननी होंगी. इन लिंक से आपको मदद मिलेगी:

• Flutter विजेट फ़्रेमवर्क के बारे में जानें
• अपना पहला Flutter ऐप्लिकेशन लिखना, पहला चरण कोडलैब आज़माएं

आपके पास Firebase का भी कुछ अनुभव होना चाहिए. हालांकि, अगर आपने कभी किसी Flutter प्रोजेक्ट में Firebase नहीं जोड़ा है, तो भी कोई बात नहीं. अगर आपको Firebase कंसोल के बारे में नहीं पता है या आपने Firebase का इस्तेमाल पहले कभी नहीं किया है, तो पहले ये लिंक देखें:

• Firebase के बुनियादी दस्तावेज़
• Flutter कोडलैब की मदद से Firebase के बारे में जानें.

आपको क्या बनाना है

इस कोडलैब में, Firebase for Authentication का इस्तेमाल करके, Flutter ऐप्लिकेशन के लिए पुष्टि करने का फ़्लो बनाने का तरीका बताया गया है. ऐप्लिकेशन में लॉगिन स्क्रीन, 'रजिस्टर करें' स्क्रीन, पासवर्ड रिकवरी स्क्रीन, और उपयोगकर्ता प्रोफ़ाइल स्क्रीन होगी.

आपको क्या सीखने को मिलेगा

इस कोडलैब में ये चीज़ें शामिल हैं:

• Flutter ऐप्लिकेशन में Firebase जोड़ना
• Firebase कंसोल सेट अप करना
• अपने ऐप्लिकेशन में Firebase जोड़ने के लिए, Firebase CLI का इस्तेमाल करना
• Dart में Firebase कॉन्फ़िगरेशन जनरेट करने के लिए, FlutterFire CLI का इस्तेमाल करना
• अपने Flutter ऐप्लिकेशन में Firebase Authentication जोड़ना
• कंसोल में Firebase Authentication सेट अप करना
• firebase_ui_auth पैकेज की मदद से, ईमेल और पासवर्ड से साइन इन करने की सुविधा जोड़ना
• firebase_ui_auth पैकेज के साथ उपयोगकर्ता रजिस्ट्रेशन जोड़ना
• ‘क्या आपको पासवर्ड याद नहीं है?' पेज जोड़ना
• firebase_ui_auth की मदद से, 'Google से साइन इन करें' सुविधा जोड़ना
• अपने ऐप्लिकेशन को कई साइन-इन प्रोवाइडर के साथ काम करने के लिए कॉन्फ़िगर करना.
• firebase_ui_auth पैकेज की मदद से, अपने ऐप्लिकेशन में उपयोगकर्ता प्रोफ़ाइल स्क्रीन जोड़ना

इस कोडलैब में, firebase_ui_auth पैकेज का इस्तेमाल करके, पुष्टि करने का बेहतर सिस्टम जोड़ने के बारे में बताया गया है. जैसा कि आपको दिखेगा, ऊपर दी गई सभी सुविधाओं के साथ, इस पूरे ऐप्लिकेशन को कोड की करीब 100 लाइनों में लागू किया जा सकता है.

आपको इन चीज़ों की ज़रूरत होगी

• Flutter और इंस्टॉल किए गए SDK टूल के बारे में जानकारी
• टेक्स्ट एडिटर (Flutter में JetBrains IDE, Android Studio, और VS Code का इस्तेमाल किया जा सकता है)
• Google Chrome ब्राउज़र या Flutter के लिए आपका पसंदीदा डेवलपमेंट टारगेट. (इस कोडलैब में कुछ टर्मिनल कमांड, यह मानकर चलेंगे कि आपका ऐप्लिकेशन Chrome पर चल रहा है)

2. Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

आपको सबसे पहले Firebase वेब कंसोल में Firebase प्रोजेक्ट बनाना होगा.

Firebase प्रोजेक्ट बनाना

1. Firebase में साइन इन करें.
2. Firebase कंसोल में, प्रोजेक्ट जोड़ें (या प्रोजेक्ट बनाएं) पर क्लिक करें. इसके बाद, अपने Firebase प्रोजेक्ट के लिए कोई नाम डालें. उदाहरण के लिए, "FlutterFire-UI-Codelab".
3. प्रोजेक्ट बनाने के विकल्पों पर क्लिक करें. अगर कहा जाए, तो Firebase की शर्तें स्वीकार करें. Google Analytics सेट अप करने की प्रोसेस को छोड़ें, क्योंकि आपको इस ऐप्लिकेशन के लिए Analytics का इस्तेमाल नहीं करना है.

Firebase प्रोजेक्ट के बारे में ज़्यादा जानने के लिए, Firebase प्रोजेक्ट के बारे में जानकारी लेख पढ़ें.

Firebase Authentication के लिए, ईमेल से साइन इन करने की सुविधा चालू करना

आपका ऐप्लिकेशन, Firebase Authentication का इस्तेमाल करके, उपयोगकर्ताओं को आपके ऐप्लिकेशन में साइन इन करने की अनुमति देता है. साथ ही, यह नए उपयोगकर्ताओं को Flutter ऐप्लिकेशन से रजिस्टर करने की अनुमति भी देता है.

Firebase Authentication को Firebase कंसोल का इस्तेमाल करके चालू करना होगा. साथ ही, चालू करने के बाद, इसे खास कॉन्फ़िगरेशन की ज़रूरत होगी.

उपयोगकर्ताओं को वेब ऐप्लिकेशन में साइन इन करने की अनुमति देने के लिए, आपको सबसे पहले साइन इन करने के लिए ईमेल/पासवर्ड का इस्तेमाल करना होगा. बाद में, आपको Google साइन-इन का तरीका जोड़ना होगा.

1. Firebase कंसोल में, बाईं ओर मौजूद पैनल में बिल्ड मेन्यू को बड़ा करें.
2. पुष्टि करना पर क्लिक करें. इसके बाद, शुरू करें बटन पर क्लिक करें. इसके बाद, साइन इन करने का तरीका टैब पर जाएं या सीधे साइन इन करने के तरीके टैब पर जाएं.
3. साइन इन करने की सुविधा देने वाली कंपनियों की सूची में, ईमेल/पासवर्ड पर क्लिक करें. इसके बाद, चालू करें स्विच को चालू की स्थिति पर सेट करें और सेव करें पर क्लिक करें.

3. Flutter ऐप्लिकेशन सेट अप करना

शुरू करने से पहले, आपको स्टार्टर कोड डाउनलोड करना होगा और Firebase CLI इंस्टॉल करना होगा.

स्टार्टर कोड पाना

कमांड लाइन से GitHub रिपॉज़िटरी को क्लोन करें:

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

इसके अलावा, अगर आपने GitHub का सीएलआई टूल इंस्टॉल किया हुआ है, तो:

gh repo clone flutter/codelabs flutter-codelabs

सैंपल कोड को आपकी मशीन पर मौजूद flutter-codelabs डायरेक्ट्री में क्लोन किया जाना चाहिए. इसमें कोडलैब के कलेक्शन का कोड होता है. इस कोडलैब का कोड, सब-डायरेक्ट्री flutter-codelabs/firebase-auth-flutterfire-ui में मौजूद है.

डायरेक्ट्री flutter-codelabs/firebase-auth-flutterfire-ui में दो Flutter प्रोजेक्ट हैं. एक का नाम complete है और दूसरे का नाम start है. start डायरेक्ट्री में एक अधूरा प्रोजेक्ट है. आपको इस पर सबसे ज़्यादा समय बिताना होगा.

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

अगर आपको आगे जाना है या यह देखना है कि कोई चीज़ पूरी होने पर कैसी दिखेगी, तो क्रॉस-रेफ़रंस के लिए 'पूरा हो गया' नाम की डायरेक्ट्री देखें.

अगर आपको कोडलैब के साथ-साथ खुद कोड जोड़ना है, तो आपको flutter-codelabs/firebase-auth-flutterfire-ui/start पर मौजूद Flutter ऐप्लिकेशन से शुरुआत करनी चाहिए. साथ ही, कोडलैब के दौरान उस प्रोजेक्ट में कोड जोड़ना चाहिए. उस डायरेक्ट्री को अपने पसंदीदा आईडीई में खोलें या इंपोर्ट करें.

Firebase CLI इंस्टॉल करना

Firebase CLI, आपके Firebase प्रोजेक्ट मैनेज करने के लिए टूल उपलब्ध कराता है. FlutterFire CLI के लिए सीएलआई ज़रूरी है. इसे कुछ देर में इंस्टॉल किया जाएगा.

सीएलआई को इंस्टॉल करने के कई तरीके हैं. firebase.google.com/docs/cli पर जाकर, अपने ऑपरेटिंग सिस्टम के लिए उपलब्ध सभी विकल्पों की समीक्षा करें.

CLI इंस्टॉल करने के बाद, आपको Firebase से पुष्टि करनी होगी.

1. नीचे दिया गया निर्देश चलाकर, अपने Google खाते का इस्तेमाल करके Firebase में लॉग इन करें:

   firebase login
   

2. यह कमांड आपकी लोकल मशीन को Firebase से कनेक्ट करता है और आपको अपने Firebase प्रोजेक्ट का ऐक्सेस देता है.

   ध्यान दें: firebase login कमांड, एक वेब पेज खोलता है जो आपकी मशीन पर localhost से कनेक्ट होता है. अगर किसी रिमोट मशीन का इस्तेमाल किया जा रहा है और आपके पास localhost का ऐक्सेस नहीं है, तो फ़्लैग --no-localhost के साथ कमांड चलाएं.

3. अपने Firebase प्रोजेक्ट की सूची बनाकर, यह जांच करें कि सीएलआई सही तरीके से इंस्टॉल हुआ है या नहीं. साथ ही, आपके खाते का ऐक्सेस है या नहीं. यह कमांड चलाएं:

   firebase projects:list
   

4. दिखाई गई सूची, Firebase कंसोल में मौजूद Firebase प्रोजेक्ट जैसी ही होनी चाहिए. आपको कम से कम flutterfire-ui-codelab.

FlutterFire सीएलआई इंस्टॉल करना

FlutterFire CLI एक टूल है, जिसकी मदद से Flutter ऐप्लिकेशन में, Firebase को उन सभी प्लैटफ़ॉर्म पर आसानी से इंस्टॉल किया जा सकता है जिन पर यह काम करता है. इसे Firebase CLI के आधार पर बनाया गया है.

सबसे पहले, सीएलआई इंस्टॉल करें:

dart pub global activate flutterfire_cli

पक्का करें कि सीएलआई इंस्टॉल हो. यह कमांड चलाएं और पुष्टि करें कि सीएलआई, सहायता मेन्यू दिखाता है.

flutterfire --help

अपने Firebase प्रोजेक्ट को Flutter ऐप्लिकेशन में जोड़ना

FlutterFire को कॉन्फ़िगर करना

FlutterFire का इस्तेमाल करके, ज़रूरी Dart कोड जनरेट किया जा सकता है. इससे, Flutter ऐप्लिकेशन में Firebase का इस्तेमाल किया जा सकता है.

flutterfire configure

यह कमांड चलाने पर, आपसे यह चुनने के लिए कहा जाएगा कि आपको किस Firebase प्रोजेक्ट का इस्तेमाल करना है और आपको कौनसे प्लैटफ़ॉर्म सेट अप करने हैं.

यहां दिए गए स्क्रीनशॉट में, वे प्रॉम्प्ट दिखाए गए हैं जिनका आपको जवाब देना होगा.

1. वह प्रोजेक्ट चुनें जिसका इस्तेमाल करना है. इस मामले में, flutterfire-ui-codelab का इस्तेमाल करें
2. चुनें कि आपको किन प्लैटफ़ॉर्म का इस्तेमाल करना है. इस कोडलैब में, वेब, iOS, और Android के लिए Flutter में Firebase Authentication को कॉन्फ़िगर करने का तरीका बताया गया है. हालांकि, सभी विकल्पों का इस्तेमाल करने के लिए, अपने Firebase प्रोजेक्ट को सेट अप किया जा सकता है.
3. इस स्क्रीनशॉट में, प्रोसेस के आखिर में मिलने वाला आउटपुट दिखाया गया है. अगर आपको Firebase के बारे में पता है, तो आपको पता चलेगा कि आपको कंसोल में प्लैटफ़ॉर्म ऐप्लिकेशन (उदाहरण के लिए, Android ऐप्लिकेशन) बनाने की ज़रूरत नहीं है. FlutterFire CLI ने यह काम आपके लिए कर दिया है.

यह प्रोसेस पूरी होने के बाद, अपने टेक्स्ट एडिटर में Flutter ऐप्लिकेशन देखें. FlutterFire CLI ने firebase_options.dart नाम की फ़ाइल में बदलाव किया है. इस फ़ाइल में FirebaseOptions नाम की एक क्लास होती है. इसमें स्टैटिक वैरिएबल होते हैं, जो हर प्लैटफ़ॉर्म के लिए ज़रूरी Firebase कॉन्फ़िगरेशन को सेव करते हैं. अगर आपने flutterfire configure चलाते समय सभी प्लैटफ़ॉर्म चुने हैं, तो आपको web, android, ios, और macos नाम की स्टैटिक वैल्यू दिखेंगी.

lib/firebase_options.dart

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

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

    switch (defaultTargetPlatform) {
      case TargetPlatform.android:
        return android;
      case TargetPlatform.iOS:
        return ios;
      case TargetPlatform.macOS:
        return macos;
      default:
        throw UnsupportedError(
          'DefaultFirebaseOptions are not supported for this platform.',
        );
    }
  }

  static const FirebaseOptions web = FirebaseOptions(
    apiKey: 'AIzaSyCqFjCV_9CZmYeIvcK9FVy4drmKUlSaIWY',
    appId: '1:963656261848:web:7219f7fca5fc70afb237ad',
    messagingSenderId: '963656261848',
    projectId: 'flutterfire-ui-codelab',
    authDomain: 'flutterfire-ui-codelab.firebaseapp.com',
    storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
    measurementId: 'G-DGF0CP099H',
  );

  static const FirebaseOptions android = FirebaseOptions(
    apiKey: 'AIzaSyDconZaCQpkxIJ5KQBF-3tEU0rxYsLkIe8',
    appId: '1:963656261848:android:c939ccc86ab2dcdbb237ad',
    messagingSenderId: '963656261848',
    projectId: 'flutterfire-ui-codelab',
    storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
  );

  static const FirebaseOptions ios = FirebaseOptions(
    apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
    appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
    messagingSenderId: '963656261848',
    projectId: 'flutterfire-ui-codelab',
    storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
    iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
    iosBundleId: 'com.example.complete',
  );

  static const FirebaseOptions macos = FirebaseOptions(
    apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
    appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
    messagingSenderId: '963656261848',
    projectId: 'flutterfire-ui-codelab',
    storageBucket: 'flutterfire-ui-codelab.firebasestorage.app',
    iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
    iosBundleId: 'com.example.complete',
  );
}

ध्यान दें: आपकी फ़ाइल में एपीआई कुंजियों के लिए अलग-अलग वैल्यू होनी चाहिए. इन कुंजियों को सार्वजनिक तौर पर शेयर करना पूरी तरह से सुरक्षित है. StackOverflow पर पोस्ट में, फ़्रैंक वैन पफ़ेलन ने इसकी वजहें बताई हैं.

Firebase प्रोजेक्ट में किसी खास प्लैटफ़ॉर्म के लिए खास बिल्ड का रेफ़रंस देने के लिए, Firebase 'ऐप्लिकेशन' शब्द का इस्तेमाल करता है. उदाहरण के लिए, FlutterFire-ui-codelab नाम के Firebase प्रोजेक्ट में कई ऐप्लिकेशन हैं: एक Android के लिए, एक iOS के लिए, एक macOS के लिए, और एक वेब के लिए.

DefaultFirebaseOptions.currentPlatform तरीका, Flutter के ज़रिए एक्सपोज़ किए गए TargetPlatform एनम का इस्तेमाल करके, उस प्लैटफ़ॉर्म का पता लगाता है जिस पर आपका ऐप्लिकेशन चल रहा है. इसके बाद, सही Firebase ऐप्लिकेशन के लिए ज़रूरी Firebase कॉन्फ़िगरेशन वैल्यू दिखाता है.

Flutter ऐप्लिकेशन में Firebase पैकेज जोड़ना

सेटअप का आखिरी चरण, अपने Flutter प्रोजेक्ट में काम के Firebase पैकेज जोड़ना है. firebase_options.dart फ़ाइल में गड़बड़ियां होनी चाहिए, क्योंकि यह उन Firebase पैकेज पर निर्भर करती है जिन्हें अभी तक नहीं जोड़ा गया है. टर्मिनल में, पक्का करें कि आप flutter-codelabs/firebase-emulator-suite/start पर, Flutter प्रोजेक्ट के रूट में हों. इसके बाद, ये तीन कमांड चलाएं:

flutter pub add firebase_core firebase_auth firebase_ui_auth

फ़िलहाल, आपको सिर्फ़ ये पैकेज चाहिए.

Firebase को शुरू करना

जोड़े गए पैकेज और 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 फ़्रेमवर्क पूरी तरह से बूट नहीं हो जाता. Firebase, नेटिव प्लैटफ़ॉर्म चैनलों का इस्तेमाल करता है. इसके लिए, फ़्रेमवर्क के चालू होने की ज़रूरत होती है.
2. Firebase.initializeApp आपके Flutter ऐप्लिकेशन और Firebase प्रोजेक्ट के बीच कनेक्शन सेट अप करता है. DefaultFirebaseOptions.currentPlatform को जनरेट की गई firebase_options.dart फ़ाइल से इंपोर्ट किया जाता है. इस स्टैटिक वैल्यू से पता चलता है कि आपका ऐप्लिकेशन किस प्लैटफ़ॉर्म पर चल रहा है. साथ ही, यह उस प्लैटफ़ॉर्म से जुड़ी Firebase कुंजियों को पास करती है.

4. Firebase यूज़र इंटरफ़ेस (यूआई) का शुरुआती पुष्टि करने वाला पेज जोड़ना

Auth के लिए Firebase UI, ऐसे विजेट उपलब्ध कराता है जो आपके ऐप्लिकेशन की पूरी स्क्रीन दिखाते हैं. ये स्क्रीन, आपके पूरे ऐप्लिकेशन में पुष्टि करने के अलग-अलग फ़्लो को मैनेज करती हैं. जैसे, साइन इन, रजिस्ट्रेशन, पासवर्ड भूल गए, उपयोगकर्ता प्रोफ़ाइल वगैरह. शुरू करने के लिए, अपने ऐप्लिकेशन में एक लैंडिंग पेज जोड़ें. यह मुख्य ऐप्लिकेशन के लिए पुष्टि करने वाले गार्ड के तौर पर काम करता है.

Material या Cupertino ऐप्लिकेशन

FlutterFire यूज़र इंटरफ़ेस (यूआई) के लिए ज़रूरी है कि आपका ऐप्लिकेशन, MaterialApp या CupertinoApp में रैप किया गया हो. आपकी पसंद के आधार पर, यूज़र इंटरफ़ेस (यूआई) में 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 यूज़र इंटरफ़ेस (यूआई) से नहीं दिया जाता.)

authStateChanges स्ट्रीम को शामिल करने के लिए, उस विजेट को अपडेट करना होगा.

authStateChanges एपीआई, मौजूदा उपयोगकर्ता (अगर वह साइन इन है) के साथ Stream दिखाता है. अगर उपयोगकर्ता साइन इन नहीं है, तो एपीआई शून्य दिखाता है. हमारे ऐप्लिकेशन में इस स्टेटस की सदस्यता लेने के लिए, Flutter के 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 यूज़र इंटरफ़ेस (यूआई) पैकेज से आता है. इस कोडलैब के अगले चरण में, इस बारे में बताया जाएगा. इस समय ऐप्लिकेशन चलाने पर, आपको साइन-इन करने के लिए खाली स्क्रीन दिखेगी.

5. साइन-इन स्क्रीन

FlutterFire यूज़र इंटरफ़ेस (यूआई) से मिलने वाला 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 आर्ग्युमेंट ही ज़रूरी है. अब आपको साइन इन करने के लिए एक स्क्रीन दिखेगी. इसमें, ‘ईमेल' और ‘पासवर्ड' टेक्स्ट इनपुट के साथ-साथ, ‘साइन इन करें' बटन भी दिखेगा.

यह काम करता है, लेकिन इसमें स्टाइल नहीं है. विजेट में पैरामीटर होते हैं, जिनकी मदद से साइन इन स्क्रीन को पसंद के मुताबिक बनाया जा सकता है. उदाहरण के लिए, हो सकता है कि आपको अपनी कंपनी का लोगो जोड़ना हो.

साइन-इन स्क्रीन को पसंद के मुताबिक बनाना

headerBuilder

SignInScreen.headerBuilder आर्ग्युमेंट का इस्तेमाल करके, साइन-इन फ़ॉर्म के ऊपर अपनी पसंद के विजेट जोड़े जा सकते हैं. यह विजेट सिर्फ़ मोबाइल डिवाइसों जैसी छोटी स्क्रीन पर दिखता है. वाइड स्क्रीन पर, SignInScreen.sideBuilder का इस्तेमाल किया जा सकता है. इस बारे में इस कोडलैब में आगे बताया गया है.

lib/auth_gate.dart फ़ाइल को इस कोड से अपडेट करें:

lib/auth_gate.dart

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

import 'home.dart';

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

  final String clientId;

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

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

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

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

यह एक कॉलबैक है, इसलिए इसमें ऐसी वैल्यू दिखती हैं जिनका इस्तेमाल किया जा सकता है. जैसे, BuildContext और BoxConstraints. साथ ही, आपको एक विजेट दिखाना होगा. जिस विजेट को वापस लाया जाता है वह स्क्रीन पर सबसे ऊपर दिखता है. इस उदाहरण में, नया कोड स्क्रीन पर सबसे ऊपर एक इमेज जोड़ता है. आपका ऐप्लिकेशन अब ऐसा दिखेगा.

सबटाइटल बिल्डर

साइन इन स्क्रीन पर तीन और पैरामीटर दिखते हैं. इनकी मदद से, स्क्रीन को पसंद के मुताबिक बनाया जा सकता है: subtitleBuilder, footerBuilder, और sideBuilder.

subtitleBuilder थोड़ा अलग है, क्योंकि कॉलबैक आर्ग्युमेंट में एक कार्रवाई शामिल होती है, जो AuthAction टाइप की होती है. AuthAction एक एनम है. इसका इस्तेमाल करके यह पता लगाया जा सकता है कि उपयोगकर्ता "साइन इन" स्क्रीन पर है या "रजिस्टर" स्क्रीन पर.

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 यूज़र इंटरफ़ेस (यूआई) में, ब्रेकपॉइंट का इस्तेमाल करके यह तय किया जाता है कि हेडर कॉन्टेंट (मोबाइल जैसी लंबी स्क्रीन पर) दिखाया जाना चाहिए या साइड कॉन्टेंट (चौड़ी स्क्रीन, डेस्कटॉप या वेब पर) दिखाया जाना चाहिए. खास तौर पर, अगर स्क्रीन 800 पिक्सल से ज़्यादा चौड़ी है, तो साइड बिल्डर कॉन्टेंट दिखाया जाता है और हेडर कॉन्टेंट नहीं दिखाया जाता. अगर स्क्रीन की चौड़ाई 800 पिक्सल से कम है, तो इसके उलट होगा.

sideBuilder विजेट जोड़ने के लिए, auth_gate.dart में कोड अपडेट करें.

lib/auth_gate.dart

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

import 'home.dart';

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

  final String clientId;

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

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

अगर Flutter वेब या MacOS का इस्तेमाल किया जा रहा है, तो विंडो की चौड़ाई बढ़ाने पर आपका ऐप्लिकेशन अब ऐसा दिखेगा.

उपयोगकर्ता बनाना

अब इस स्क्रीन के लिए पूरा कोड तैयार हो गया है. हालांकि, साइन-इन करने से पहले, आपको एक उपयोगकर्ता बनाना होगा. ऐसा करने के लिए, "रजिस्टर करें" स्क्रीन का इस्तेमाल करें या Firebase कंसोल में उपयोगकर्ता बनाएं.

कंसोल का इस्तेमाल करने के लिए:

1. Firebase कंसोल में"उपयोगकर्ता" टेबल पर जाएं. ‘flutterfire-ui-codelab' चुनें. अगर आपने कोई दूसरा नाम इस्तेमाल किया है, तो कोई दूसरा प्रोजेक्ट चुनें. आपको यह टेबल दिखेगी:
2. "उपयोगकर्ता जोड़ें" बटन पर क्लिक करें.
3. नए उपयोगकर्ता के लिए ईमेल पता और पासवर्ड डालें. यह ईमेल पता और पासवर्ड नकली हो सकता है, जैसा कि मैंने नीचे दी गई इमेज में डाला है. ऐसा किया जा सकता है. हालांकि, अगर किसी फ़र्ज़ी ईमेल पते का इस्तेमाल किया जाता है, तो "पासवर्ड याद नहीं है" सुविधा काम नहीं करेगी.
4. "उपयोगकर्ता जोड़ें" पर क्लिक करें

अब, अपने Flutter ऐप्लिकेशन पर वापस जाकर, साइन-इन पेज का इस्तेमाल करके किसी उपयोगकर्ता को साइन इन कराएं. आपका ऐप्लिकेशन ऐसा दिखना चाहिए:

6. प्रोफ़ाइल स्क्रीन

FlutterFire यूज़र इंटरफ़ेस (यूआई) में 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 कॉलबैक से दिखाया जाता है.

अपना ऐप्लिकेशन रीलोड करें और ऐप्लिकेशन बार में सबसे ऊपर दाईं ओर मौजूद आइकॉन को दबाएं. ऐसा करने पर, आपको ऐसा पेज दिखेगा:

यह FlutterFire यूज़र इंटरफ़ेस (यूआई) पेज से मिलने वाला स्टैंडर्ड यूज़र इंटरफ़ेस (यूआई) है. सभी बटन और टेक्स्ट फ़ील्ड, Firebase Auth से कनेक्ट होते हैं और बिना किसी सेटअप के काम करते हैं. उदाहरण के लिए, "नाम" टेक्स्टफ़ील्ड में कोई नाम डाला जा सकता है. ऐसा करने पर, FlutterFire यूज़र इंटरफ़ेस (यूआई), FirebaseAuth.instance.currentUser?.updateDisplayName तरीके को कॉल करेगा. यह तरीका, उस नाम को Firebase में सेव कर देगा.

ध्यान दें: इस उदाहरण में, "पुष्टि करने के लिए ईमेल भेजें" बटन, [e-mail] जैसे किसी फ़र्ज़ी ईमेल पते पर ईमेल भेजेगा. यह पुष्टि करने के लिए कि यह काम करता है, किसी ऐसे ईमेल पते से उपयोगकर्ता बनाएं जिसका ईमेल ऐक्सेस आपके पास हो.

साइन आउट करें

फ़िलहाल, "साइन आउट करें" बटन दबाने पर, ऐप्लिकेशन में कोई बदलाव नहीं होगा. ऐसा करने पर, आपको साइन आउट कर दिया जाएगा. हालांकि, आपको 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 की पुष्टि करने की स्थिति, currentUser के null होने पर दिया जाता है.

SignedOutAction ट्रिगर होने पर Navigator.of(context).pop() को कॉल करने वाला कॉलबैक जोड़ने पर, ऐप्लिकेशन पिछले पेज पर ले जाएगा. इस उदाहरण के ऐप्लिकेशन में, सिर्फ़ एक परमानेंट रूट है. अगर कोई उपयोगकर्ता साइन इन नहीं है, तो यह साइन इन स्क्रीन दिखाता है. अगर कोई उपयोगकर्ता साइन इन है, तो यह होम पेज दिखाता है. ऐसा तब होता है, जब उपयोगकर्ता साइन आउट करता है. इसलिए, ऐप्लिकेशन पर साइन इन करने की स्क्रीन दिखेगी.

प्रोफ़ाइल पेज को पसंद के मुताबिक बनाना

साइन इन स्क्रीन की तरह ही, प्रोफ़ाइल पेज को भी पसंद के मुताबिक बनाया जा सकता है. पहला, जब कोई उपयोगकर्ता प्रोफ़ाइल पेज पर पहुंच जाता है, तो हमारे मौजूदा पेज पर होम पेज पर वापस जाने का कोई तरीका नहीं है. ProfileScreen विजेट को ऐप्लिकेशन बार देकर, इस समस्या को ठीक करें.

lib/home.dart

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

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

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

ProfileScreen.appBar आर्ग्युमेंट, Flutter Material पैकेज से AppBar विजेट स्वीकार करता है. इसलिए, इसे किसी भी दूसरे AppBar की तरह ही माना जा सकता है जिसे आपने बनाया है और Scaffold को पास किया है. इस उदाहरण में, "वापस जाएं" बटन अपने-आप जुड़ने की डिफ़ॉल्ट सुविधा को बरकरार रखा गया है. साथ ही, स्क्रीन पर अब एक टाइटल भी है.

प्रोफ़ाइल स्क्रीन पर बच्चों की प्रोफ़ाइल जोड़ना

ProfileScreen विजेट में, children नाम का एक वैकल्पिक आर्ग्युमेंट भी होता है. यह आर्ग्युमेंट, विजेट की सूची स्वीकार करता है. इन विजेट को 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(),
          ],
        ),
      ),
    );
  }
}

अपना ऐप्लिकेशन फिर से लोड करें. इसके बाद, आपको स्क्रीन पर यह दिखेगा:

7. मल्टीप्लैटफ़ॉर्म Google Auth साइन इन

FlutterFire यूज़र इंटरफ़ेस (यूआई), Google, Twitter, Facebook, Apple, और GitHub जैसे तीसरे पक्ष की सेवा देने वाली कंपनियों के साथ पुष्टि करने के लिए, विजेट और फ़ंक्शन भी उपलब्ध कराता है.

Google की पुष्टि करने की सुविधा के साथ इंटिग्रेट करने के लिए, आधिकारिक firebase_ui_oauth_google प्लग इन और उसकी डिपेंडेंसी इंस्टॉल करें. इससे, पुष्टि करने का नेटिव तरीका मैनेज होगा. टर्मिनल में, अपने Flutter प्रोजेक्ट के रूट पर जाएं और यह कमांड डालें:

flutter pub add google_sign_in firebase_ui_oauth_google

Google साइन-इन की सुविधा देने वाली कंपनी को चालू करना

इसके बाद, Firebase कंसोल में Google प्रॉवाइडर को चालू करें:

1. कंसोल में, पुष्टि करने के लिए साइन इन करने की सुविधा देने वाली कंपनियां स्क्रीन पर जाएं.
2. "नया प्रोवाइडर जोड़ें" पर क्लिक करें.
3. "Google" चुनें.
4. "चालू करें" लेबल वाले स्विच को टॉगल करें और "सेव करें" दबाएं.
5. अगर कॉन्फ़िगरेशन फ़ाइलों को डाउनलोड करने के बारे में जानकारी वाला कोई मॉडल दिखता है, तो "हो गया" पर क्लिक करें.
6. पुष्टि करें कि Google साइन इन की सेवा देने वाली कंपनी को जोड़ दिया गया है.

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 से साइन इन करें' बटन दिखेगा.

साइन इन बटन को कॉन्फ़िगर करना

अतिरिक्त कॉन्फ़िगरेशन के बिना, यह बटन काम नहीं करता. अगर Flutter Web का इस्तेमाल करके डेवलप किया जा रहा है, तो इसे काम करने के लिए आपको सिर्फ़ यह चरण जोड़ना होगा. अन्य प्लैटफ़ॉर्म के लिए, कुछ और चरण पूरे करने पड़ते हैं. इनके बारे में थोड़ी देर में बताया जाएगा.

1. Firebase कंसोल में, पुष्टि करने वाली सेवा देने वाली कंपनियों के पेज पर जाएं.
2. Google की सेवा देने वाली कंपनी पर क्लिक करें.
3. "वेब SDK टूल का कॉन्फ़िगरेशन" एक्सपैंशन-पैनल पर क्लिक करें.
4. "वेब क्लाइंट आईडी" से वैल्यू कॉपी करें.
5. अपने टेक्स्ट एडिटर पर वापस जाएं और auth_gate.dart फ़ाइल में GoogleProvider के इंस्टेंस को अपडेट करें. इसके लिए, इस आईडी को clientId नाम वाले पैरामीटर में पास करें.

GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

वेब क्लाइंट आईडी डालने के बाद, अपना ऐप्लिकेशन रीलोड करें. अगर वेब का इस्तेमाल किया जा रहा है, तो "Google से साइन इन करें" बटन दबाने पर एक नई विंडो दिखेगी. इसमें, Google से साइन इन करने का तरीका बताया जाएगा. शुरुआत में, यह इस तरह दिखता है:

iOS को कॉन्फ़िगर करना

iOS पर इस सुविधा को काम करने के लिए, एक और कॉन्फ़िगरेशन की प्रोसेस की ज़रूरत होती है.

1. Firebase कंसोल में, प्रोजेक्ट सेटिंग स्क्रीन पर जाएं. आपको एक कार्ड दिखेगा, जिसमें आपके Firebase ऐप्लिकेशन की सूची होगी. यह कार्ड ऐसा दिखेगा:
2. iOS चुनें. ध्यान दें कि आपके ऐप्लिकेशन का नाम, स्क्रीनशॉट में दिखाए गए नाम से अलग होगा. अगर आपने इस कोडलैब के साथ flutter-codelabs/firebase-auth-flutterfire-ui/start प्रोजेक्ट का इस्तेमाल किया है, तो स्क्रीनशॉट में "पूरा हो गया" के बजाय "शुरू करें" दिखेगा.
3. ज़रूरी कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए, GoogleServices-Info.plist पर क्लिक करें.
4. डाउनलोड की गई फ़ाइल को अपने Flutter प्रोजेक्ट में, /ios/Runner नाम की डायरेक्ट्री में खींचें और छोड़ें.
5. अपने प्रोजेक्ट के रूट से, टर्मिनल में यह कमांड चलाकर Xcode खोलें: open ios/Runner.xcworkspace
6. Runner डायरेक्ट्री पर दायां क्लिक करें और "Runner" में फ़ाइलें जोड़ें को चुनें.
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. आपको वेब सेटअप में जोड़े गए GoogleProvider.clientId को, अपने Firebase iOS क्लाइंट आईडी से जुड़े क्लाइंट आईडी से बदलना होगा. सबसे पहले, यह आईडी firebase_options.dart फ़ाइल में iOS कॉन्स्टेंट के हिस्से के तौर पर मिल सकता है. iOSClientId को पास की गई वैल्यू कॉपी करें.

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

10. उस वैल्यू को 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));
}

अगर आपका Flutter ऐप्लिकेशन पहले से ही iOS पर चल रहा है, तो आपको उसे पूरी तरह बंद करके फिर से चलाना होगा. इसके अलावा, iOS में ऐप्लिकेशन चलाएं.

8. बधाई हो!

आपने Flutter के लिए Firebase Auth यूज़र इंटरफ़ेस (यूआई) का कोडलैब पूरा कर लिया है . इस कोडलैब का पूरा कोड, GitHub पर firebase-auth-flutterfire-ui/complete डायरेक्ट्री में देखा जा सकता है.

हमने क्या-क्या कवर किया है

• Firebase का इस्तेमाल करने के लिए, Flutter ऐप्लिकेशन सेट अप करना
• Firebase कंसोल में Firebase प्रोजेक्ट सेट अप करना
• FlutterFire सीएलआई
• Firebase CLI
• Firebase Authentication का इस्तेमाल करना
• अपने Flutter ऐप्लिकेशन में Firebase की पुष्टि करने की सुविधा को मैनेज करने के लिए, FlutterFire यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करना

अगले चरण

• Flutter में Firestore और पुष्टि करने की सुविधा का इस्तेमाल करने के बारे में ज़्यादा जानें: Firebase for Flutter Codelab के बारे में जानें
• Flutter ऐप्लिकेशन बनाने के लिए, Firebase के अन्य टूल एक्सप्लोर करें:
  • Cloud Storage
  • Cloud Functions
  • रीयलटाइम डेटाबेस

ज़्यादा जानें

• Firebase साइट: firebase.google.com
• Flutter साइट: flutter.dev
• FlutterFire Firebase Flutter विजेट: firebase.flutter.dev
• Firebase का YouTube चैनल
• Flutter का YouTube चैनल

Sparky आपके साथ जश्न मनाने के लिए तैयार है!