欢迎参加我们将于 2022 年 10 月 18 日举办的 Firebase 峰会(线上线下同时进行),了解 Firebase 如何帮助您加快应用开发速度、满怀信心地发布应用,并在之后根据需要轻松地扩大应用规模。立即报名

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

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

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

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

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

Web version 9

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 version 8

import firebase from "firebase/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 विधि में पास करें:

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

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

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

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

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

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

अगले कदम

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