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

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

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

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

2. फ़ायरबेस प्रमाणीकरण जेएस एसडीके जोड़ें और फ़ायरबेस प्रमाणीकरण प्रारंभ करें:

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

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

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

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

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

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

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

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

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

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

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

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

अगले कदम

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

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