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

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

Authentication SDK टूल जोड़ें और उसे शुरू करें

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

2. Firebase Authentication JS SDK टूल जोड़ें और Firebase Authentication को शुरू करें:

Web

ट्री-शेकेबल मॉड्यूलर वेब एपीआई के बारे में ज़्यादा जानें और namespaced API से अपग्रेड करें.

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

ट्री-शेकेबल मॉड्यूलर वेब एपीआई के बारे में ज़्यादा जानें और namespaced API से अपग्रेड करें.

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 Local Emulator Suite की मदद से प्रोटोटाइप बनाना और उसकी जांच करना

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

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

Authentication एम्युलेटर का इस्तेमाल करने के लिए, बस कुछ ही चरणों को पूरा करना होता है:

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

ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन को Authentication एम्युलेटर से कनेक्ट करें लेख पढ़ें. ज़्यादा जानकारी के लिए, 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

अगले चरण

अन्य आइडेंटिटी प्रोवाइडर और मेहमान खातों के लिए, सहायता पाने का तरीका जानें:

• Google साइन-इन
• Facebook Login
• Twitter पर लॉगिन करना
• GitHub Login
• पहचान छिपाकर साइन इन करना