वेबसाइटों पर फायरबेस प्रमाणीकरण के साथ आरंभ करें

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

प्रमाणीकरण एसडीके जोड़ें और आरंभ करें

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

2. Firebase प्रमाणीकरण JS SDK जोड़ें और Firebase प्रमाणीकरण प्रारंभ करें:

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);

import firebase from "firebase/compat/app";
import "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
firebase.initializeApp(firebaseConfig);


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

(वैकल्पिक) फायरबेस लोकल एमुलेटर सूट के साथ प्रोटोटाइप और परीक्षण

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

एक प्रमाणीकरण एमुलेटर स्थानीय एमुलेटर सूट का हिस्सा है, जो आपके ऐप को अनुकरणीय डेटाबेस सामग्री और कॉन्फ़िगरेशन के साथ-साथ वैकल्पिक रूप से आपके अनुकरणीय परियोजना संसाधनों (कार्यों, अन्य डेटाबेस और सुरक्षा नियमों) के साथ बातचीत करने में सक्षम बनाता है।

प्रमाणीकरण एमुलेटर का उपयोग करने में कुछ ही कदम शामिल हैं:

1. एमुलेटर से कनेक्ट करने के लिए अपने ऐप के टेस्ट कॉन्फ़िगरेशन में कोड की एक पंक्ति जोड़ना।
2. आपकी स्थानीय प्रोजेक्ट निर्देशिका की जड़ से, firebase emulators:start ।
3. इंटरएक्टिव प्रोटोटाइप के लिए स्थानीय एमुलेटर सूट यूआई का उपयोग करना, या गैर-इंटरैक्टिव परीक्षण के लिए प्रमाणीकरण एमुलेटर रेस्ट एपीआई।

अपने ऐप को प्रमाणीकरण एमुलेटर से कनेक्ट करें पर एक विस्तृत मार्गदर्शिका उपलब्ध है। अधिक जानकारी के लिए, स्थानीय इम्यूलेटर सूट का परिचय देखें।

आइए अब आगे बढ़ते हैं कि उपयोगकर्ताओं को कैसे प्रमाणित किया जाए।

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

एक फॉर्म बनाएं जो नए उपयोगकर्ताओं को उनके ईमेल पते और पासवर्ड का उपयोग करके आपके ऐप के साथ पंजीकरण करने की अनुमति देता है। जब कोई उपयोगकर्ता फॉर्म भरता है, तो उपयोगकर्ता द्वारा प्रदान किए गए ईमेल पते और पासवर्ड को सत्यापित करें, फिर उन्हें createUserWithEmailAndPassword विधि में पास करें:

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

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

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 विधि को कॉल करें:

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

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 पद्धति का उपयोग करके पर्यवेक्षक को संलग्न करें। जब कोई उपयोगकर्ता सफलतापूर्वक साइन इन करता है, तो आप पर्यवेक्षक में उपयोगकर्ता के बारे में जानकारी प्राप्त कर सकते हैं।

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

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

अगले कदम

अन्य पहचान प्रदाताओं और अनाम अतिथि खातों के लिए समर्थन जोड़ने का तरीका जानें:

• गूगल साइन-इन
• फेसबुक लॉग इन
• ट्विटर लॉगिन
• गिटहब लॉगिन
• अनाम साइन-इन