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

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

अपने ऐप्लिकेशन को Firebase से कनेक्ट करें

Firebase एसडीके स्थापित करें । कॉन्फ़िगरेशन कोड को अपने वेब पेज में बताए अनुसार पेस्ट करना सुनिश्चित करें।

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

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

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

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

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

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

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

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

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

वेब संस्करण 9

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;
    // ..
  });

वेब संस्करण 8

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

मौजूदा उपयोगकर्ताओं में साइन इन करें

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

वेब संस्करण 9

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

वेब संस्करण 8

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

प्रमाणीकरण स्थिति पर्यवेक्षक सेट करें और उपयोगकर्ता डेटा प्राप्त करें

आपके ऐप के ऐसे प्रत्येक पृष्ठ के लिए जिन्हें साइन-इन किए गए उपयोगकर्ता के बारे में जानकारी की आवश्यकता है, एक पर्यवेक्षक को वैश्विक प्रमाणीकरण ऑब्जेक्ट में संलग्न करें। जब भी उपयोगकर्ता की साइन-इन स्थिति बदलती है तो इस पर्यवेक्षक को कॉल किया जाता है।

पर्यवेक्षक का उपयोग कर देते हैं onAuthStateChanged विधि। जब कोई उपयोगकर्ता सफलतापूर्वक साइन इन करता है, तो आप ऑब्जर्वर में उपयोगकर्ता के बारे में जानकारी प्राप्त कर सकते हैं।

वेब संस्करण 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

वेब संस्करण 8

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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

अगला कदम

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