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

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

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

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

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

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

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

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

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

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

आपको यह जानकारी मिलेगी

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

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

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

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

• Flutter के काम करने की जानकारी और इंस्टॉल किया गया SDK टूल
• टेक्स्ट एडिटर (JetBrains IDE, Android Studio, और VS Code), Flutter के साथ काम करता है)
• 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 से पुष्टि करने की सुविधा को, Firebase कंसोल का इस्तेमाल करके चालू किया जाना चाहिए. इसे चालू करने के बाद, खास कॉन्फ़िगरेशन की ज़रूरत होती है.

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

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

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

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

स्टार्टर कोड पाएं

कमांड लाइन से 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 सीएलआई के लिए सीएलआई की ज़रूरत होती है, जिसे इंस्टॉल करने में कुछ समय लगता है.

सीएलआई को इंस्टॉल करने के कई तरीके हैं. MacOS या Linux का इस्तेमाल करने पर, अपने टर्मिनल से इस निर्देश को चलाना सबसे आसान तरीका है:

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

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

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

firebase login

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

3. अपने Firebase प्रोजेक्ट की सूची बनाकर जांच करें कि सीएलआई सही तरीके से इंस्टॉल किया गया है और उसके पास आपके खाते का ऐक्सेस है. नीचे दिया गया निर्देश चलाएं:

firebase projects:list

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

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

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 से पुष्टि करने की सुविधा को कॉन्फ़िगर करने का तरीका बताया गया है. हालांकि, सभी विकल्पों का इस्तेमाल करने के लिए आप अपना Firebase प्रोजेक्ट सेट अप कर सकते हैं.
3. यह स्क्रीनशॉट, प्रोसेस के आखिर में मिलने वाला आउटपुट दिखाता है. अगर आपको Firebase के बारे में पता है, तो आपको पता चलेगा कि आपको Console में प्लैटफ़ॉर्म ऐप्लिकेशन (उदाहरण के लिए, Android ऐप्लिकेशन) बनाने की ज़रूरत नहीं है. FlutterFire CLI ने यह काम आपके लिए कर दिया है.

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

firebase_options.dart

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

/// Default [FirebaseOptions] for use with your Firebase apps.
///
/// Example:
/// ```dart
/// import 'firebase_options.dart';
/// // ...
/// await Firebase.initializeApp(
///   options: DefaultFirebaseOptions.currentPlatform,
/// );
/// ```
class DefaultFirebaseOptions {
 static FirebaseOptions get currentPlatform {
   if (kIsWeb) {
     return web;
   }
   // ignore: missing_enum_constant_in_switch
   switch (defaultTargetPlatform) {
     case TargetPlatform.android:
       return android;
     case TargetPlatform.iOS:
       return ios;
     case TargetPlatform.macOS:
       return macos;
   }

   throw UnsupportedError(
     'DefaultFirebaseOptions are not supported for this platform.',
   );
 }

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

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

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

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

Firebase प्रोजेक्ट में किसी खास प्लैटफ़ॉर्म के लिए खास बिल्ड का रेफ़रंस देने के लिए, Firebase 'ऐप्लिकेशन' शब्द का इस्तेमाल करता है. उदाहरण के लिए, 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

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

फ़िलहाल, आपको सिर्फ़ इन पैकेज की ज़रूरत है.

Firebase शुरू करें

जोड़े गए पैकेज और DefaultFirebaseOptions.currentPlatform, का इस्तेमाल करने के लिए, main.dart फ़ाइल में main फ़ंक्शन में कोड अपडेट करें.

main.dart

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


 runApp(const MyApp());
}

यह कोड दो काम करता है.

1. WidgetsFlutterBinding.ensureInitialized(), Flutter को निर्देश देता है कि वे तब तक ऐप्लिकेशन विजेट कोड को न चलाएं, जब तक कि Flutter फ़्रेमवर्क पूरी तरह से चालू नहीं हो जाता. Firebase, नेटिव प्लैटफ़ॉर्म चैनलों का इस्तेमाल करता है. इसके लिए, फ़्रेमवर्क को चलाने की ज़रूरत होती है.
2. Firebase.initializeApp, आपके Flutter ऐप्लिकेशन और Firebase प्रोजेक्ट के बीच कनेक्शन सेट अप करता है. DefaultFirebaseOptions.currentPlatform को हमारी जनरेट की गई firebase_options.dart फ़ाइल से इंपोर्ट किया गया है. यह स्टैटिक मान पता लगाता है कि आप किस प्लैटफ़ॉर्म पर चल रहे हैं और उससे जुड़ी Firebase कुंजियों को पास करता है.

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

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

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

FlutterFire यूज़र इंटरफ़ेस (यूआई) के लिए यह ज़रूरी है कि आपका ऐप्लिकेशन MaterialApp या CupertinoApp में किया गया हो. आपके चुने गए विकल्प के आधार पर, यूज़र इंटरफ़ेस (यूआई) अपने-आप मटीरियल या क्यूपर्टिनो विजेट के अंतर दिखाएगा. इस कोडलैब के लिए, MaterialApp का इस्तेमाल करें. यह app.dart में ऐप्लिकेशन में पहले से ही जोड़ा गया है.

app.dart

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

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

पुष्टि करने की स्थिति देखें

साइन-इन स्क्रीन दिखाने से पहले, आपको यह तय करना होगा कि उपयोगकर्ता की पुष्टि की गई है या नहीं. इसकी जांच करने का सबसे सामान्य तरीका यह है कि Firebase पुष्टि प्लगिन का इस्तेमाल करके FirebaseAuth के authStateState को सुनें.

ऊपर दिए गए कोड सैंपल में, MaterialApp अपने बिल्ड तरीके में AuthGate विजेट बना रहा है. (यह पसंद के मुताबिक बनाया गया विजेट है, जिसे FlutterFire यूज़र इंटरफ़ेस (यूआई) से नहीं दिया गया है.)

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

authStateChanges एपीआई, मौजूदा उपयोगकर्ता (अगर उसने साइन इन किया हुआ है) के साथ Stream दिखाता है और अगर वह साइन इन नहीं है, तो उसे शून्य करता है. हमारे ऐप्लिकेशन में इस स्थिति की सदस्यता लेने के लिए, Flutter के StreamBuilder विजेट का इस्तेमाल किया जा सकता है. साथ ही, उस पर स्ट्रीम को भेजा जा सकता है.

StreamBuilder एक ऐसा विजेट है जो आपके पास की गई स्ट्रीम के डेटा के नए स्नैपशॉट के आधार पर अपने-आप बन जाता है. जब स्ट्रीम से कोई नया स्नैपशॉट लिया जाता है, तो यह अपने-आप फिर से बन जाता है.

auth_gate.dart में कोड अपडेट करें.

auth_gate.dart

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

import 'home.dart';

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

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

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

• StreamBuilder.stream को FirebaseAuth.instance.authStateChanged, ऊपर बताई गई स्ट्रीम दी जा रही है. अगर उपयोगकर्ता ने पुष्टि की है, तो यह Firebase User ऑब्जेक्ट दिखाएगी. (अन्यथा, यह null दिखाएगा.)
• इसके बाद, कोड snapshot.hasData का इस्तेमाल करके यह जांच कर रहा है कि स्ट्रीम की वैल्यू में User ऑब्जेक्ट है या नहीं.
• अगर कोई क्वेरी नहीं है, तो यह SignInScreen विजेट दिखाएगा. फ़िलहाल, उस स्क्रीन पर कुछ भी नहीं होगा. इसे अगले चरण में अपडेट किया जाएगा.
• ऐसा न होने पर, यह HomeScreen दिखाता है. यह ऐप्लिकेशन का मुख्य हिस्सा है, जिसे सिर्फ़ पुष्टि किए गए उपयोगकर्ता ऐक्सेस कर सकते हैं.

SignInScreen एक विजेट है, जो FlutterFire यूज़र इंटरफ़ेस (यूआई) पैकेज से आता है. इस कोडलैब के अगले चरण में, इस बारे में बताया जाएगा. इस समय ऐप्लिकेशन चलाने पर, आपको साइन इन करने के लिए खाली स्क्रीन दिखेगी.

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

FlutterFire यूज़र इंटरफ़ेस (यूआई) से मिलने वाला SignInScreen विजेट, ये सुविधाएं जोड़ता है:

• उपयोगकर्ताओं को साइन इन करने की अनुमति देता है
• अगर उपयोगकर्ता अपना पासवर्ड भूल गए हैं, तो वे "पासवर्ड याद नहीं हैं?" पर टैप करके अपना पासवर्ड रीसेट करने के लिए फ़ॉर्म पर जा सकते हैं.
• अगर कोई उपयोगकर्ता अब तक रजिस्टर नहीं हुआ है, तो वह "रजिस्टर करें" पर टैप कर सकता है. इसके बाद, उसे साइन अप करने के लिए एक फ़ॉर्म पर ले जाया जाएगा.

इसके लिए, सिर्फ़ कुछ लाइनें कोड की ज़रूरत होती हैं. पुष्टि विजेट में मौजूद कोड को वापस लाएं:

auth_gate.dart

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

import 'home.dart';

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

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

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

ऊपर बताई गई सभी सुविधाएं पाने के लिए, SignInScreen विजेट और उसका providers आर्ग्युमेंट ही ज़रूरी है. अब आपको एक साइन इन स्क्रीन दिखेगी, जिसमें 'ईमेल' और 'पासवर्ड' टेक्स्ट इनपुट मौजूद हैं. साथ ही, 'साइन इन करें' बटन भी दिख रहा है.

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

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

हेडरबिल्डर

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

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

auth_gate.dart

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

import 'home.dart';

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

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

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

headerBuilder आर्ग्युमेंट के लिए, HeaderBuilder टाइप का फ़ंक्शन ज़रूरी है. इस फ़ंक्शन के बारे में FlutterFire यूज़र इंटरफ़ेस (यूआई) पैकेज में बताया गया है.

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

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

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

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

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

SubtitleBuilder का इस्तेमाल करने के लिए, auth_gate.dart में कोड को अपडेट करें.

auth_gate.dart

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

import 'home.dart';

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

 @override
 Widget build(BuildContext context) {
   return StreamBuilder<User?>(
     stream: FirebaseAuth.instance.authStateChanges(),
     builder: (context, snapshot) {
       if (!snapshot.hasData) {
         return SignInScreen(
           providers: [
              EmailAuthProvider()
           ],
           headerBuilder: (context, constraints, shrinkOffset) {
             return Padding(
               padding: const EdgeInsets.all(20),
               child: AspectRatio(
                 aspectRatio: 1,
                 child: Image.asset('flutterfire_300x.png'),
               ),
             );
           },
           subtitleBuilder: (context, action) {
             return Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: action == AuthAction.signIn
                   ? const Text('Welcome to FlutterFire, please sign in!')
                   : const Text('Welcome to Flutterfire, please sign up!'),
             );
           },
         );
       }

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

ऐप्लिकेशन फिर से लोड करें. यह ऐसा दिखना चाहिए

फ़ुटर बिल्डर

footerBuilder आर्ग्युमेंट, SubtitleBuilder के जैसा ही है. यह BoxConstraints या shrinkOffset को सार्वजनिक नहीं करता, क्योंकि इसे इमेज के बजाय टेक्स्ट के लिए बनाया गया है. (हालांकि आप अपनी पसंद का कोई भी विजेट जोड़ सकते हैं.)

अपनी साइन-इन स्क्रीन पर इस कोड के साथ फ़ुटर जोड़ें.

auth_gate.dart

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

import 'home.dart';

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

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

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

साइड बिल्डर

SignInScreen.side Builder आर्ग्युमेंट, कॉलबैक को स्वीकार करता है और इस बार उस कॉलबैक के लिए आर्ग्युमेंट BuildContext और double shrinkOffset हैं. sideBuilder जो विजेट दिखाता है वह साइन इन फ़ॉर्म की बाईं ओर दिखेगा. यह सिर्फ़ वाइड स्क्रीन पर दिखेगा. इसका मतलब है कि बैज सिर्फ़ डेस्कटॉप और वेब ऐप्लिकेशन पर ही दिखेगा.

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

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

auth_gate.dart

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

import 'home.dart';

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

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

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

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

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

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

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

2. "उपयोगकर्ता जोड़ें" बटन पर क्लिक करें.

3. नए उपयोगकर्ता के लिए ईमेल पता और पासवर्ड डालें. यह ईमेल पता और पासवर्ड नकली हो सकता है, जैसा कि मैंने नीचे दी गई इमेज में डाला है. ऐसा करने पर, खाता ऐक्सेस किया जा सकता है. हालांकि, नकली ईमेल पते का इस्तेमाल करने पर, "पासवर्ड याद नहीं है" सुविधा काम नहीं करेगी.

4. "उपयोगकर्ता जोड़ें" पर क्लिक करें

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

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

FlutterFire का यूज़र इंटरफ़ेस (यूआई) एक ProfileScreen विजेट भी देता है. इससे, आपको कुछ लाइनों में ही कई सुविधाएं मिलती हैं.

ProfileScreen विजेट जोड़ना

अपने टेक्स्ट एडिटर में home.dart फ़ाइल पर जाएं. इसे इस कोड के साथ अपडेट करें:

home.dart

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

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

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

नोट का नया कोड, IconButton.isPressed method. को पास किया गया कॉलबैक है. जब उस IconButton को दबाया जाता है, तो आपका ऐप्लिकेशन एक नया अनाम रूट बनाता है और उस पर नेविगेट करता है. यह रूट, ProfileScreen विजेट दिखाएगा, जो कि MaterialPageRoute.builder कॉलबैक से मिलता है.

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

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

साइन आउट किया जा रहा है

फ़िलहाल, अगर आप "साइन आउट करें" बटन दबाते हैं, तो ऐप्लिकेशन नहीं बदलेगा. इससे आपको साइन आउट कर दिया जाएगा, लेकिन आपको AuthGate विजेट पर वापस नहीं भेजा जाएगा. इसे लागू करने के लिए, ProfileScreen.actions पैरामीटर का इस्तेमाल करें.

पहले, home.dart में कोड अपडेट करें.

home.dart

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

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

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

अब ProfileScreen का इंस्टेंस बनाते समय, आप इसे ProfileScreen.actions आर्ग्युमेंट में कार्रवाइयों की सूची भी पास करते हैं. ये कार्रवाइयां FlutterFireUiAction टाइप की होती हैं. कई अलग-अलग क्लास, FlutterFireUiAction के सब-टाइप हैं. आम तौर पर, इनका इस्तेमाल करके अपने ऐप्लिकेशन को पुष्टि करने की स्थिति में होने वाले अलग-अलग बदलावों के बारे में बताया जाता है. SignedOutAction, उस कॉलबैक फ़ंक्शन को कॉल करता है जिसे Firebase की पुष्टि करने की स्थिति, currentUser के null होने पर दिया जाता है.

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

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

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

home.dart

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

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

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

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

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

ProfileScreen विजेट में चिल्ड्रन नाम का एक वैकल्पिक तर्क भी होता है. यह आर्ग्युमेंट, विजेट की सूची स्वीकार करता है. इन विजेट को कॉलम विजेट के अंदर वर्टिकल तौर पर रखा जाएगा. कॉलम विजेट का इस्तेमाल, ProfileScreen बनाने के लिए पहले से ही किया जा रहा है. ProfileScreen के बिल्ड करने के तरीके में मौजूद कॉलम विजेट, उन बच्चों को "साइन आउट करें" बटन के ऊपर दिखाएगा जिन्हें आपने पास किया है.

साइन इन स्क्रीन की तरह ही, यहां कंपनी का लोगो दिखाने के लिए, home.dart में कोड अपडेट करें.

home.dart

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

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

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

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

7. एक से ज़्यादा प्लैटफ़ॉर्म पर Google पुष्टि के लिए साइन इन करने की सुविधा

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

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

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

'Google साइन इन' सेवा देने वाली कंपनी को चालू करें

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

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

Google से साइन इन करने का बटन जोड़ना

Google साइन इन की सुविधा चालू होने पर, साइन इन पेज पर स्टाइलिश Google साइन इन बटन दिखाने के लिए ज़रूरी विजेट जोड़ें. auth_gate.dart फ़ाइल पर जाएं और कोड को यहां दिए गए कोड से बदलें:

auth_gate.dart

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

import 'home.dart';

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

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

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

साइनइनस्क्रीन विजेट कॉन्फ़िगरेशन में GoogleProvider(clientId: "YOUR_WEBCLIENT_ID") को जोड़ने के बाद, सिर्फ़ नया कोड जोड़ा जा सकता है.

इसे जोड़ने के बाद, अपने ऐप्लिकेशन को फिर से लोड करें. ऐसा करने पर आपको '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. डाउनलोड की गई फ़ाइल को खींचकर नाम की डायरेक्ट्री में छोड़ें ./ios/Runner को जोड़ें.
5. अपने प्रोजेक्ट के रूट से, टर्मिनल में यह कमांड चलाकर Xcode खोलें: open ios/Runner.xcworkspace
6. रनर डायरेक्ट्री पर राइट क्लिक करें और "रनर" में फ़ाइलें जोड़ें चुनें.
7. फ़ाइल मैनेजर से GoogleService-Info.plist चुनें.
8. अपने टेक्स्ट एडिटर (जो Xcode नहीं है) में वापस जाकर, [my_project]/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. उस वैल्यू को AuthGate विजेट में GoogleProvider.clientId आर्ग्युमेंट में चिपकाएं.

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

import 'home.dart';


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

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

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

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

8. बधाई हो!

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

हमने इन विषयों के बारे में बताया

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

अगले चरण

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

और जानें

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

आपके साथ जश्न मनाने के लिए Sparky उपलब्ध है!