Firebase से पुष्टि करने की सुविधा का इस्तेमाल करके, उपयोगकर्ताओं को साइन इन करने के एक या इससे ज़्यादा तरीकों का इस्तेमाल करके आपके ऐप्लिकेशन में साइन इन करने की अनुमति दी जा सकती है. इनमें, ईमेल पते और पासवर्ड साइन-इन के साथ-साथ Google साइन इन और Facebook लॉगिन जैसे फ़ेडरेटेड आइडेंटिटी प्रोवाइडर शामिल हैं. इस ट्यूटोरियल की मदद से, Firebase से पुष्टि करने की सुविधा का इस्तेमाल शुरू किया जा सकता है. इसमें ऐप्लिकेशन में ईमेल पता और पासवर्ड से साइन-इन करने का तरीका बताया गया है.
पुष्टि करने के लिए इस्तेमाल होने वाला SDK टूल जोड़ना और शुरू करना
अगर आपने पहले से ऐसा नहीं किया है, तो Firebase JS SDK टूल इंस्टॉल करें और Firebase शुरू करें.
Firebase से पुष्टि करने वाला JS SDK जोड़ें और Firebase से पुष्टि करने की प्रोसेस शुरू करें:
Web
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
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 लोकल एम्युलेटर सुइट की मदद से प्रोटोटाइप बनाएं और टेस्ट करें
आपका ऐप्लिकेशन उपयोगकर्ताओं की पुष्टि कैसे करता है, इस बारे में बात करने से पहले, चलिए कुछ टूल के बारे में जानते हैं. जिनका इस्तेमाल करके पुष्टि करने की सुविधा को प्रोटोटाइप किया जा सकता है और उसकी जांच की जा सकती है: Firebase का लोकल एम्युलेटर सुइट. अगर आपको पुष्टि करने की तकनीकों और सेवा देने वाली कंपनियों में से कोई एक चुनना है, तो पुष्टि करें और Firebase के सुरक्षा नियमों का इस्तेमाल करके सार्वजनिक और निजी डेटा के साथ अलग-अलग डेटा मॉडल आज़माएं या साइन-इन यूज़र इंटरफ़ेस (यूआई) डिज़ाइन का प्रोटोटाइप बनाएं, ताकि लाइव सेवाओं को डिप्लॉय किए बिना स्थानीय तौर पर काम किया जा सके.
पुष्टि करने वाला एम्युलेटर, Local Emulator Suite का हिस्सा होता है. इससे आपका ऐप्लिकेशन, एम्युलेट किए गए डेटाबेस कॉन्टेंट और कॉन्फ़िगरेशन से इंटरैक्ट कर पाता है. साथ ही, वह एम्युलेट किए गए प्रोजेक्ट के संसाधनों (फ़ंक्शन, दूसरे डेटाबेस, और सुरक्षा के नियम) के साथ भी इंटरैक्ट करता है.
पुष्टि करने वाले एम्युलेटर का इस्तेमाल करने के लिए, आपको कुछ चरणों को पूरा करना होगा:
- एम्युलेटर से कनेक्ट करने के लिए, अपने ऐप्लिकेशन के टेस्ट कॉन्फ़िगरेशन में कोड की एक लाइन जोड़ना.
- आपकी लोकल प्रोजेक्ट डायरेक्ट्री के रूट से,
firebase emulators:start
पर चल रहा है. - इंटरैक्टिव प्रोटोटाइपिंग के लिए, लोकल एम्युलेटर सुइट यूज़र इंटरफ़ेस (यूआई) या नॉन-इंटरैक्टिव टेस्टिंग के लिए पुष्टि करने वाले एम्युलेटर REST API का इस्तेमाल करना.
इस बारे में ज़्यादा जानकारी देने वाली गाइड, अपने ऐप्लिकेशन को पुष्टि करने वाले एम्युलेटर से कनेक्ट करें पर उपलब्ध है. ज़्यादा जानकारी के लिए, 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; // .. });
Web
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
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
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
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 // ... } });
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 // ... } });
अगले चरण
पहचान देने वाली दूसरी कंपनियों और पहचान छिपाने वाले मेहमान खातों के लिए, सहायता जोड़ने का तरीका जानें:
- Google साइन इन
- Facebook में लॉगिन करना
- Twitter में लॉगिन
- GitHub में लॉगिन करें
- पहचान छिपाकर साइन इन करना