FirebaseUI का उपयोग करके फ़्लटर ऐप में उपयोगकर्ता प्रमाणीकरण प्रवाह जोड़ें

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

इस कोडलैब में, आप सीखेंगे कि फ़्लटरफ़ायर यूआई पैकेज का उपयोग करके अपने फ़्लटर ऐप में फ़ायरबेस प्रमाणीकरण कैसे जोड़ें। इस पैकेज के साथ, आप फ़्लटर ऐप में ईमेल/पासवर्ड प्रमाणीकरण और Google साइन इन प्रमाणीकरण दोनों जोड़ देंगे। आप यह भी सीखेंगे कि फ़ायरबेस प्रोजेक्ट कैसे सेट करें, और अपने फ़्लटर ऐप में फ़ायरबेस को प्रारंभ करने के लिए फ़्लटरफ़ायर सीएलआई का उपयोग करें।

आवश्यक शर्तें

यह कोडलैब मानता है कि आपके पास कुछ फ़्लटर अनुभव है। यदि नहीं, तो हो सकता है कि आप पहले बुनियादी बातें सीखना चाहें। निम्नलिखित लिंक सहायक हैं:

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

आप क्या बनाएंगे

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

6604fc9157f2c6ae.pngeab9509a41074930.pngda49189a5838e0bb.pngb2ccfb3632b77878.png

आप क्या सीखेंगे

इस कोडलैब में शामिल हैं:

  • फ़्लटर ऐप में फ़ायरबेस जोड़ना
  • फायरबेस कंसोल सेटअप
  • अपने एप्लिकेशन में फ़ायरबेस जोड़ने के लिए फ़ायरबेस सीएलआई का उपयोग करना
  • डार्ट में फायरबेस कॉन्फ़िगरेशन उत्पन्न करने के लिए फ़्लटरफ़ायर सीएलआई का उपयोग करना
  • अपने फ़्लटर ऐप में फ़ायरबेस प्रमाणीकरण जोड़ना
  • कंसोल में फायरबेस प्रमाणीकरण सेटअप
  • ईमेल और पासवर्ड जोड़कर firebase_ui_auth पैकेज के साथ साइन इन करें
  • firebase_ui_auth पैकेज के साथ उपयोगकर्ता पंजीकरण जोड़ा जा रहा है
  • 'पासवर्ड भूल गए?' जोड़ा जा रहा है पृष्ठ
  • firebase_ui_auth के साथ Google साइन-इन जोड़ा जा रहा है
  • एकाधिक साइन-इन प्रदाताओं के साथ काम करने के लिए अपने ऐप को कॉन्फ़िगर करना।
  • firebase_ui_auth पैकेज के साथ अपने एप्लिकेशन में एक उपयोगकर्ता प्रोफ़ाइल स्क्रीन जोड़ना

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

आपको किस चीज़ की ज़रूरत पड़ेगी

  • फ़्लटर और स्थापित एसडीके का कार्यसाधक ज्ञान
  • एक टेक्स्ट एडिटर (जेटब्रेन आईडीई, एंड्रॉइड स्टूडियो और वीएस कोड फ़्लटर द्वारा समर्थित हैं)
  • Google Chrome ब्राउज़र, या फ़्लटर के लिए आपका अन्य पसंदीदा विकास लक्ष्य। (इस कोडलैब में कुछ टर्मिनल कमांड मान लेंगे कि आप अपना ऐप क्रोम पर चला रहे हैं)

2. एक फायरबेस प्रोजेक्ट बनाएं और सेट करें

पहला कार्य जो आपको पूरा करना होगा वह फ़ायरबेस के वेब कंसोल में फ़ायरबेस प्रोजेक्ट बनाना है।

एक फायरबेस प्रोजेक्ट बनाएं

  1. फायरबेस में साइन इन करें।
  2. फायरबेस कंसोल में, प्रोजेक्ट जोड़ें (या एक प्रोजेक्ट बनाएं ) पर क्लिक करें, और अपने फायरबेस प्रोजेक्ट के लिए एक नाम दर्ज करें (उदाहरण के लिए, " फ्लटरफायर-यूआई-कोडेलैब ")।

df42a5e3d9584b48.png

  1. प्रोजेक्ट निर्माण विकल्पों पर क्लिक करें। संकेत मिलने पर फायरबेस शर्तों को स्वीकार करें। Google Analytics सेट करना छोड़ें, क्योंकि आप इस ऐप के लिए Analytics का उपयोग नहीं करेंगे।

d1fcec48bf251eaa.png

फायरबेस प्रोजेक्ट्स के बारे में अधिक जानने के लिए, फायरबेस प्रोजेक्ट्स को समझें देखें।

आप जो ऐप बना रहे हैं वह आपके उपयोगकर्ताओं को आपके ऐप में साइन इन करने की अनुमति देने के लिए फायरबेस प्रमाणीकरण का उपयोग करता है। यह नए उपयोगकर्ताओं को फ़्लटर एप्लिकेशन से पंजीकरण करने की भी अनुमति देता है।

फायरबेस प्रमाणीकरण को फायरबेस कंसोल का उपयोग करके सक्षम करने की आवश्यकता है, और सक्षम होने के बाद विशेष कॉन्फ़िगरेशन की आवश्यकता है।

फायरबेस प्रमाणीकरण के लिए ईमेल साइन-इन सक्षम करें

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

  1. फायरबेस कंसोल में, बाएं पैनल में बिल्ड मेनू का विस्तार करें।
  2. प्रमाणीकरण पर क्लिक करें, और फिर प्रारंभ करें बटन पर क्लिक करें, फिर साइन-इन विधि टैब पर क्लिक करें (या सीधे साइन-इन विधि टैब पर जाने के लिए यहां क्लिक करें )।
  3. साइन-इन प्रदाताओं की सूची में ईमेल/पासवर्ड पर क्लिक करें, सक्षम स्विच को चालू स्थिति पर सेट करें और फिर सहेजें पर क्लिक करें। 58e3e3e23c2f16a4.png

3. फ़्लटर ऐप सेट करें

शुरू करने से पहले आपको स्टार्टर कोड डाउनलोड करना होगा और फायरबेस सीएलआई इंस्टॉल करना होगा।

स्टार्टर कोड प्राप्त करें

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

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

वैकल्पिक रूप से, यदि आपके पास GitHub का CLI टूल स्थापित है:

gh repo clone flutter/codelabs flutter-codelabs

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

निर्देशिका flutter-codelabs/firebase-auth-flutterfire-ui दो फ़्लटर प्रोजेक्ट शामिल हैं। एक को complete तथा दूसरे को start कहा जाता है। start निर्देशिका में एक अधूरा प्रोजेक्ट है, और यह वह जगह है जहां आप सबसे अधिक समय बिताएंगे।

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

यदि आप आगे बढ़ना चाहते हैं, या देखना चाहते हैं कि पूरा होने पर कुछ कैसा दिखना चाहिए, तो क्रॉस-रेफरेंस के लिए पूर्ण नामक निर्देशिका में देखें।

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

फायरबेस सीएलआई स्थापित करें

फायरबेस सीएलआई आपके फायरबेस प्रोजेक्ट्स के प्रबंधन के लिए उपकरण प्रदान करता है। फ़्लटरफ़ायर सीएलआई के लिए सीएलआई आवश्यक है, जिसे आप थोड़ी देर में स्थापित करेंगे।

सीएलआई स्थापित करने के कई तरीके हैं। सबसे आसान तरीका, यदि आप MacOS या Linux का उपयोग कर रहे हैं, तो इस कमांड को अपने टर्मिनल से चलाना है:

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

सीएलआई स्थापित करने के बाद, आपको फायरबेस से प्रमाणित करना होगा।

  1. निम्नलिखित कमांड चलाकर अपने Google खाते का उपयोग करके फायरबेस में लॉग इन करें:
firebase login
  1. यह कमांड आपकी स्थानीय मशीन को फायरबेस से जोड़ता है और आपको आपके फायरबेस प्रोजेक्ट्स तक पहुंच प्रदान करता है।
  1. अपने फायरबेस प्रोजेक्ट्स को सूचीबद्ध करके जांचें कि सीएलआई ठीक से स्थापित है और आपके खाते तक उसकी पहुंच है। निम्न आदेश चलाएँ:
firebase projects:list
  1. प्रदर्शित सूची फायरबेस कंसोल में सूचीबद्ध फायरबेस परियोजनाओं के समान होनी चाहिए। आपको कम से कम flutterfire-ui-codelab.

फ़्लटरफ़ायर सीएलआई स्थापित करें

फ़्लटरफ़ायर सीएलआई एक उपकरण है जो आपके फ़्लटर ऐप में सभी समर्थित प्लेटफ़ॉर्म पर फ़ायरबेस की स्थापना प्रक्रिया को आसान बनाने में मदद करता है। इसे फायरबेस सीएलआई के शीर्ष पर बनाया गया है।

सबसे पहले, सीएलआई स्थापित करें:

dart pub global activate flutterfire_cli

सुनिश्चित करें कि सीएलआई स्थापित किया गया था। निम्नलिखित कमांड चलाएँ और सुनिश्चित करें कि सीएलआई सहायता मेनू आउटपुट करता है।

flutterfire -—help

अपने फ़ायरबेस प्रोजेक्ट को अपने फ़्लटर ऐप में जोड़ें

फ़्लटरफ़ायर कॉन्फ़िगर करें

आप अपने फ़्लटर ऐप में फ़ायरबेस का उपयोग करने के लिए आवश्यक डार्ट कोड उत्पन्न करने के लिए फ़्लटरफ़ायर का उपयोग कर सकते हैं।

flutterfire configure

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

निम्नलिखित स्क्रीनशॉट वे संकेत दिखाते हैं जिनका आपको उत्तर देना होगा।

  1. वह प्रोजेक्ट चुनें जिसका आप उपयोग करना चाहते हैं. इस स्थिति में, flutterfire-ui-codelab उपयोग करें 1359cdeb83204baa.png
  2. चुनें कि आप कौन से प्लेटफ़ॉर्म का उपयोग करना चाहते हैं। इस कोडलैब में, वेब, आईओएस और एंड्रॉइड के लिए फ़्लटर के लिए फ़ायरबेस प्रमाणीकरण को कॉन्फ़िगर करने के चरण हैं, लेकिन आप सभी विकल्पों का उपयोग करने के लिए अपना फ़ायरबेस प्रोजेक्ट सेट कर सकते हैं। 301c9534f594f472.png
  3. यह स्क्रीनशॉट प्रक्रिया के अंत में आउटपुट दिखाता है। यदि आप फायरबेस से परिचित हैं, तो आप देखेंगे कि आपको कंसोल में प्लेटफ़ॉर्म एप्लिकेशन (उदाहरण के लिए, एक एंड्रॉइड एप्लिकेशन) बनाने की ज़रूरत नहीं थी, और फ़्लटरफ़ायर सीएलआई ने आपके लिए यह किया। 12199a85ade30459.png

जब यह पूरा हो जाए, तो अपने टेक्स्ट एडिटर में फ़्लटर ऐप देखें। फ़्लटरफ़ायर सीएलआई ने 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.appspot.com',
   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.appspot.com',
 );

 static const FirebaseOptions ios = FirebaseOptions(
   apiKey: 'AIzaSyBqLWsqFjYAdGyihKTahMRDQMo0N6NVjAs',
   appId: '1:963656261848:ios:d9e01cfe8b675dfcb237ad',
   messagingSenderId: '963656261848',
   projectId: 'flutterfire-ui-codelab',
   storageBucket: 'flutterfire-ui-codelab.appspot.com',
   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.appspot.com',
   iosClientId: '963656261848-v7r3vq1v6haupv0l1mdrmsf56ktnua60.apps.googleusercontent.com',
   iosBundleId: 'com.example.complete',
 );
}

फायरबेस प्रोजेक्ट में किसी विशिष्ट प्लेटफॉर्म के लिए विशिष्ट बिल्ड को संदर्भित करने के लिए फायरबेस एप्लिकेशन शब्द का उपयोग करता है। उदाहरण के लिए, फ़्लटरफायर-यूआई-कोडलैब नामक फायरबेस प्रोजेक्ट में कई एप्लिकेशन हैं: एक एंड्रॉइड के लिए, एक आईओएस के लिए, एक मैकओएस के लिए और एक वेब के लिए।

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

फ़्लटर ऐप में फ़ायरबेस पैकेज जोड़ें

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

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add firebase_ui_auth

ये एकमात्र पैकेज हैं जिनकी आपको इस समय आवश्यकता है।

फायरबेस आरंभ करें

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

मुख्य.डार्ट

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


 runApp(const MyApp());
}

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

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

4. प्रारंभिक फायरबेस यूआई ऑथ पेज जोड़ें

ऑथ के लिए फायरबेस यूआई विजेट प्रदान करता है जो आपके एप्लिकेशन में संपूर्ण स्क्रीन का प्रतिनिधित्व करता है। ये स्क्रीन आपके पूरे एप्लिकेशन में अलग-अलग प्रमाणीकरण प्रवाह को संभालती हैं, जैसे साइन इन, पंजीकरण, पासवर्ड भूल गए, उपयोगकर्ता प्रोफ़ाइल, और बहुत कुछ। आरंभ करने के लिए, अपने ऐप में एक लैंडिंग पृष्ठ जोड़ें जो मुख्य एप्लिकेशन के लिए प्रमाणीकरण गार्ड के रूप में कार्य करता है।

सामग्री या क्यूपर्टिनो ऐप

फ़्लटरफ़ायर यूआई के लिए आवश्यक है कि आपका एप्लिकेशन मटेरियल ऐप या क्यूपर्टिनो ऐप में लपेटा गया हो। आपकी पसंद के आधार पर, यूआई स्वचालित रूप से सामग्री या क्यूपर्टिनो विजेट के अंतर को प्रतिबिंबित करेगा। इस कोडलैब के लिए, MaterialApp का उपयोग करें, जो पहले से ही 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 Auth प्लगइन का उपयोग करके FirebaseAuth के authStateChanges को सुनना है।

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

उस विजेट को authStateChanges स्ट्रीम को शामिल करने के लिए अद्यतन करने की आवश्यकता है।

authStateChanges API वर्तमान उपयोगकर्ता (यदि वे साइन इन हैं) के साथ एक Stream लौटाता है, या यदि वे साइन इन नहीं हैं तो शून्य लौटाता है। हमारे एप्लिकेशन में इस स्थिति की सदस्यता लेने के लिए, आप फ़्लटर के स्ट्रीमबिल्डर विजेट का उपयोग कर सकते हैं और स्ट्रीम को इसमें पास कर सकते हैं।

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 एक विजेट है जो फ़्लटरफ़ायर यूआई पैकेज से आता है। इस कोडलैब के अगले चरण का फोकस इसी पर होगा। जब आप इस बिंदु पर ऐप चलाते हैं, तो आपको एक खाली साइन-इन स्क्रीन दिखनी चाहिए।

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

फ़्लटरफ़ायर यूआई द्वारा प्रदान किया गया 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 तर्क का उपयोग करके, आप साइन-इन फॉर्म के ऊपर जो भी विजेट चाहते हैं उसे जोड़ सकते हैं। इस कोड के साथ 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();
     },
   );
 }
}

हेडरबिल्डर तर्क के लिए हेडरबिल्डर प्रकार के एक फ़ंक्शन की आवश्यकता होती है, जिसे फ़्लटरफ़ायर यूआई पैकेज में परिभाषित किया गया है।

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

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

73d7548d91bbd2ab.png

उपशीर्षक निर्माता

साइन-इन स्क्रीन तीन अतिरिक्त मापदंडों को उजागर करती है जो आपको स्क्रीन को अनुकूलित करने की अनुमति देती है: subtitleBuilder , footerBuilder , और sideBuilder ।

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

सबटाइटलबिल्डर का उपयोग करने के लिए 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();
     },
   );
 }
}

एप्लिकेशन को पुनः लोड करें, और यह इस तरह दिखना चाहिए

फ़ुटरबिल्डर तर्क उपशीर्षकबिल्डर के समान है। यह 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();
     },
   );
 }}

साइड बिल्डर

साइनइनस्क्रीन.साइडबिल्डर तर्क कॉलबैक स्वीकार करता है, और इस बार उस कॉलबैक के तर्क BuildContext और double shrinkOffset हैं। साइडबिल्डर जो विजेट लौटाता है वह साइन इन फॉर्म के बाईं ओर और केवल चौड़ी स्क्रीन पर प्रदर्शित किया जाएगा। प्रभावी रूप से इसका मतलब है कि विजेट केवल डेस्कटॉप और वेब ऐप्स पर प्रदर्शित किया जाएगा।

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

साइडबिल्डर विजेट जोड़ने के लिए 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();
     },
   );
 }
}

जब आप विंडो की चौड़ाई बढ़ाते हैं तो आपका ऐप इस तरह दिखना चाहिए (यदि आप फ़्लटर वेब या MacOS का उपयोग कर रहे हैं)।

8dc60b4e5d7dd2d0.png

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

इस बिंदु पर, इस स्क्रीन के लिए सभी कोड तैयार हो गए हैं। हालाँकि, साइन-इन करने से पहले, आपको एक उपयोगकर्ता बनाना होगा। आप इसे "रजिस्टर" स्क्रीन के साथ कर सकते हैं, या आप फायरबेस कंसोल में एक उपयोगकर्ता बना सकते हैं।

कंसोल का उपयोग करने के लिए:

  1. फ़ायरबेस कंसोल में "उपयोगकर्ता" तालिका पर जाएँ।
  2. यहाँ क्लिक करें
  3. 'फ़्लटरफ़ायर-यूआई-कोडलैब' चुनें (या यदि आपने भिन्न नाम का उपयोग किया है तो कोई अन्य प्रोजेक्ट)। आपको यह तालिका दिखाई देगी:

f038fd9a58ed60d9.png

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

2d78390d4c5dbbfa.png

  1. नए उपयोगकर्ता के लिए एक ईमेल पता और पासवर्ड दर्ज करें। यह एक नकली ईमेल और पासवर्ड हो सकता है, जैसा कि मैंने नीचे दी गई छवि में दर्ज किया है। वह काम करेगा, लेकिन यदि आप नकली ईमेल पते का उपयोग करते हैं तो "पासवर्ड भूल गए" कार्यक्षमता काम नहीं करेगी।

62ba0feb33d54add.png

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

32b236b3ef94d4c7.png

अब, आप अपने फ़्लटर एप्लिकेशन पर वापस लौट सकते हैं, और साइन-इन पृष्ठ के माध्यम से किसी उपयोगकर्ता में साइन इन कर सकते हैं। आपका ऐप इस तरह दिखना चाहिए:

dd43d260537f3b1a.png

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

फ़्लटरफ़ायर यूआई एक ProfileScreen विजेट भी प्रदान करता है, जो फिर से, आपको कोड की कुछ पंक्तियों में बहुत सारी कार्यक्षमता प्रदान करता है।

प्रोफ़ाइलस्क्रीन विजेट जोड़ें

अपने टेक्स्ट एडिटर में 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 कॉलबैक से लौटाया जाता है।

अपने ऐप को पुनः लोड करें, और शीर्ष-दाएं (ऐप बार में) आइकन को दबाएं, और यह इस तरह एक पेज प्रदर्शित करेगा:

36487fc4ab4f26a7.png

यह फ़्लटरफ़ायर यूआई पेज द्वारा प्रदान किया गया मानक यूआई है। सभी बटन और टेक्स्ट फ़ील्ड फ़ायरबेस ऑथ से जुड़े हैं, और बॉक्स से बाहर काम करते हैं। उदाहरण के लिए, आप "नाम" टेक्स्टफील्ड में एक नाम दर्ज कर सकते हैं, और फ़्लटरफायर यूआई FirebaseAuth.instance.currentUser?.updateDisplayName विधि को कॉल करेगा, जो उस नाम को फायरबेस में सहेज लेगा।

भाग रद्द करना

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

सबसे पहले, होम.डार्ट में कोड अपडेट करें।

घर.डार्ट

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 के उपप्रकार हैं, और सामान्य तौर पर आप उनका उपयोग अपने ऐप को विभिन्न प्रमाणीकरण स्थिति परिवर्तनों पर प्रतिक्रिया करने के लिए कहने के लिए करते हैं। साइनडआउटएक्शन एक कॉलबैक फ़ंक्शन को कॉल करता है जिसे आप तब देते हैं जब फ़ायरबेस प्रमाणीकरण स्थिति वर्तमान उपयोगकर्ता के शून्य में बदल जाती है।

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

प्रोफ़ाइल पृष्ठ को अनुकूलित करें

साइन इन पेज के समान, प्रोफ़ाइल पेज अनुकूलन योग्य है। सबसे पहले, हमारे वर्तमान पेज के पास एक बार उपयोगकर्ता के प्रोफाइल पेज पर आने के बाद होम पेज पर वापस जाने का कोई तरीका नहीं है। प्रोफ़ाइलस्क्रीन विजेट को AppBar देकर इसे ठीक करें।

घर.डार्ट

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 तर्क फ़्लटर मटेरियल पैकेज से एक AppBar विजेट को स्वीकार करता है, इसलिए इसे आपके द्वारा बनाए गए किसी भी अन्य AppBar की तरह माना जा सकता है और Scaffold में पास किया जा सकता है। इस उदाहरण में, स्वचालित रूप से "बैक" बटन जोड़ने की डिफ़ॉल्ट कार्यक्षमता रखी गई है, और स्क्रीन पर अब एक शीर्षक है।

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

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

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

घर.डार्ट

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

अपना ऐप पुनः लोड करें, और आप इसे स्क्रीन पर देखेंगे:

ebe5792b765dbf87.png

7. मल्टीप्लेटफॉर्म गूगल ऑथ साइन इन

फ़्लटरफ़ायर यूआई Google, Twitter, Facebook, Apple और Github जैसे तृतीय पक्ष प्रदाताओं के साथ प्रमाणीकरण के लिए विजेट और कार्यक्षमता भी प्रदान करता है।

Google प्रमाणीकरण के साथ एकीकृत करने के लिए, आधिकारिक firebase_ui_oauth_google प्लगइन और इसकी निर्भरताएँ स्थापित करें, जो मूल प्रमाणीकरण प्रवाह को संभालेंगे। टर्मिनल में, अपने फ़्लटर प्रोजेक्ट के रूट पर जाएँ और निम्नलिखित कमांड दर्ज करें:

flutter pub add google_sign_in
flutter pub add firebase_ui_oauth_google

Google साइन-इन प्रदाता सक्षम करें

इसके बाद, फायरबेस कंसोल में Google प्रदाता को सक्षम करें:

  1. कंसोल में प्रमाणीकरण साइन-इन प्रदाता स्क्रीन पर नेविगेट करें।
  2. "नया प्रदाता जोड़ें" पर क्लिक करें। 8286fb28be94bf30.png
  3. "Google" चुनें. c4e28e6f4974be7f.png
  4. "सक्षम करें" लेबल वाले स्विच को टॉगल करें, और "सहेजें" दबाएँ। e74ff86990763826.png
  5. यदि कॉन्फ़िगरेशन फ़ाइलों को डाउनलोड करने के बारे में जानकारी वाला कोई मॉडल दिखाई देता है, तो "संपन्न" पर क्लिक करें।
  6. पुष्टि करें कि Google साइन-इन प्रदाता जोड़ा गया है। 5329ce0543c90d95.png

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 साइन इन बटन दिखाई देगा।

aca71a46a011bfb5.png

साइन-इन बटन कॉन्फ़िगर करें

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

  1. फायरबेस कंसोल में प्रमाणीकरण प्रदाता पृष्ठ पर नेविगेट करें।
  2. Google प्रदाता पर क्लिक करें. 9b3a325c5eca6e49.png
  3. "वेब एसडीके कॉन्फ़िगरेशन" विस्तार-पैनल पर क्लिक करें।
  4. 'वेब क्लाइंट आईडी' से मान कॉपी करें 711a79f0d931c60f.png
  5. अपने टेक्स्ट एडिटर पर वापस लौटें, और इस आईडी को clientId नामित पैरामीटर में पास करके फ़ाइल auth_gate.dart में GoogleProvider के इंस्टेंस को अपडेट करें।
GoogleProvider(
   clientId: "YOUR_WEBCLIENT_ID"
)

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

14e73e3c9de704bb.png

आईओएस कॉन्फ़िगर करें

इसे iOS पर काम करने के लिए, एक अतिरिक्त कॉन्फ़िगरेशन प्रक्रिया है।

  1. फायरबेस कंसोल में प्रोजेक्ट सेटिंग्स स्क्रीन पर नेविगेट करें। एक कार्ड होगा जो आपके फायरबेस ऐप्स को सूचीबद्ध करेगा जो इस तरह दिखेगा: fefa674acbf213cc.png
  2. आईओएस पर क्लिक करें. ध्यान दें कि आपके आवेदन का नाम मेरे से अलग होगा। जहाँ मेरा कहता है "पूर्ण" तो आपका कहेगा "प्रारंभ", यदि आपने इस कोडलैब के साथ अनुसरण करने के लिए flutter-codelabs/firebase-auth-flutterfire-ui/start प्रोजेक्ट का उपयोग किया है।
  3. आवश्यक कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए "GoogleServices-Info.plist" बटन पर क्लिक करें। f89b3192871dfbe3.png
  4. डाउनलोड की गई फ़ाइल को उस निर्देशिका में खींचें और छोड़ें जिसे कहा जाता है। /ios/Runner आपके फ़्लटर प्रोजेक्ट में।
  5. अपने प्रोजेक्ट के रूट से निम्नलिखित टर्मिनल कमांड चलाकर Xcode खोलें:

ios/Runner.xcworkspace खोलें

  1. रनर निर्देशिका पर राइट-क्लिक करें और "रनर" में फ़ाइलें जोड़ें चुनें। 858986063a4c5201.png
  2. फ़ाइल प्रबंधक से GoogleService-Info.plist चुनें.
  3. अपने टेक्स्ट एडिटर में वापस जाएं (जो कि Xcode नहीं है), नीचे दी गई CFBundleURLTypes विशेषताओं को [my_project]/ios/Runner/Info.plist फ़ाइल में जोड़ें।
<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
        <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLSchemes</key>
                <array>
                        <!-- TODO Replace this value: -->
                        <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
                        <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
                </array>
        </dict>
</array>
<!-- End of the Google Sign-in Section -->

यदि आपका फ़्लटर ऐप पहले से ही iOS में चल रहा है, तो आपको इसे पूरी तरह से बंद करना होगा और फिर एप्लिकेशन को फिर से चलाना होगा। अन्यथा, ऐप को iOS में चलाएं।

8. बधाई हो!

आपने फ़्लटर कोडलैब के लिए फ़ायरबेस ऑथेंट यूआई पूरा कर लिया है। आप इस कोडेलैब के लिए पूरा कोड जीथब पर "पूर्ण" निर्देशिका में पा सकते हैं: फ़्लटर कोडेलैब्स

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

  • फायरबेस का उपयोग करने के लिए फ़्लटर ऐप सेट करना
  • फ़ायरबेस कंसोल में फ़ायरबेस प्रोजेक्ट सेट करना
  • फ़्लटरफायर सीएलआई
  • फायरबेस सीएलआई
  • फायरबेस प्रमाणीकरण का उपयोग करना
  • अपने फ़्लटर ऐप में फ़ायरबेस ऑथ को आसानी से संभालने के लिए फ़्लटरफ़ायर यूआई का उपयोग करना

अगले कदम

और अधिक जानें

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

2a0ad195769368b1.gif