वेबसाइटों पर Firebase से पुष्टि करने की सुविधा का इस्तेमाल शुरू करना

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

पुष्टि करने के लिए इस्तेमाल होने वाला SDK टूल जोड़ना और शुरू करना

  1. यदि आपने पहले से ऐसा नहीं किया है, तो Firebase JS SDK इंस्टॉल करके, Firebase शुरू करें.

  2. Firebase से पुष्टि करने वाला JS SDK जोड़ें और Firebase से पुष्टि करने की प्रोसेस शुरू करें:

Web 

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(ज़रूरी नहीं) Firebase लोकल एम्युलेटर सुइट की मदद से प्रोटोटाइप बनाएं और टेस्ट करें

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

पुष्टि करने वाला एम्युलेटर, Local Emulator Suite का हिस्सा है. यह आपके ऐप्लिकेशन को एम्युलेट किए गए डेटाबेस कॉन्टेंट और कॉन्फ़िगरेशन के साथ इंटरैक्ट करने की अनुमति देता है, जैसे कि विकल्प के तौर पर, आपके एम्युलेट किए गए प्रोजेक्ट रिसोर्स (फ़ंक्शन, अन्य डेटाबेस, और सुरक्षा के नियम शामिल हैं).

पुष्टि करने वाले एम्युलेटर का इस्तेमाल करने के लिए, आपको कुछ चरणों को पूरा करना होगा:

  1. एम्युलेटर से कनेक्ट करने के लिए, अपने ऐप्लिकेशन के टेस्ट कॉन्फ़िगरेशन में कोड की लाइन जोड़ना.
  2. आपकी लोकल प्रोजेक्ट डायरेक्ट्री के रूट से, firebase emulators:start पर चल रहा है.
  3. इंटरैक्टिव प्रोटोटाइपिंग के लिए, Local Emulator Suite यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करना या नॉन-इंटरैक्टिव टेस्टिंग के लिए, पुष्टि करने वाला एम्युलेटर REST API.

इस बारे में ज़्यादा जानकारी देने वाली गाइड, अपने ऐप्लिकेशन को पुष्टि करने वाले एम्युलेटर से कनेक्ट करें पर उपलब्ध है. ज़्यादा जानकारी के लिए, Local Emulator Suite का परिचय देखें.

आइए, अब उपयोगकर्ताओं की पुष्टि करने के तरीके के बारे में बात करते हैं.

नए उपयोगकर्ताओं के लिए साइन अप करें

एक ऐसा फ़ॉर्म बनाएं जिससे नए उपयोगकर्ता अपने ईमेल का इस्तेमाल करके, आपके ऐप्लिकेशन पर रजिस्टर कर सकें पता और पासवर्ड डालें. जब कोई उपयोगकर्ता फ़ॉर्म भर लेता है, तो ईमेल की पुष्टि करें उपयोगकर्ता का पता और पासवर्ड डालें, फिर उन्हें createUserWithEmailAndPassword तरीका:

Web

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

Web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

मौजूदा उपयोगकर्ताओं को साइन इन करने की अनुमति है

एक ऐसा फ़ॉर्म बनाएं जिससे मौजूदा उपयोगकर्ता अपने ईमेल पते से साइन इन कर सकें और पासवर्ड डालें. जब कोई उपयोगकर्ता फ़ॉर्म भर लेता है, तो signInWithEmailAndPassword तरीका:

Web

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
auth_signin_password.js

Web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

पुष्टि की स्थिति के लिए ऑब्ज़र्वर सेट करें और उपयोगकर्ता का डेटा पाएं

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

onAuthStateChanged तरीके का इस्तेमाल करके, ऑब्ज़र्वर को अटैच करें. जब कोई उपयोगकर्ता साइन इन करने पर, आपको ऑब्ज़र्वर में उपयोगकर्ता के बारे में जानकारी मिल सकती है.

Web

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

अगले चरण

पहचान देने वाली दूसरी कंपनियों और पहचान छिपाने वाले मेहमान के लिए, सहायता जोड़ने का तरीका जानें खाते: