paint-brush
रिएक्ट वेब एप्लिकेशन के साथ फायरबेस पासवर्ड रहित प्रमाणीकरण कैसे सेट करेंद्वारा@pictureinthenoise
1,964 रीडिंग
1,964 रीडिंग

रिएक्ट वेब एप्लिकेशन के साथ फायरबेस पासवर्ड रहित प्रमाणीकरण कैसे सेट करें

द्वारा Picture in the Noise17m2023/09/24
Read on Terminal Reader

बहुत लंबा; पढ़ने के लिए

एप्लिकेशन बनाते समय पासवर्ड रहित प्रमाणीकरण एक आकर्षक विकल्प है। यह उपयोगकर्ता अनुभव और डेवलपर अनुभव को सरल बनाता है। यह ट्यूटोरियल एक सरल रिएक्ट वेब एप्लिकेशन के साथ फायरबेस पासवर्ड रहित प्रमाणीकरण को लागू करने के चरणों के बारे में बताता है।
featured image - रिएक्ट वेब एप्लिकेशन के साथ फायरबेस पासवर्ड रहित प्रमाणीकरण कैसे सेट करें
Picture in the Noise HackerNoon profile picture
0-item

परिचय

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


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


इस गाइड में, आप एक सरल लॉगिन/पुष्टि/प्रोफ़ाइल/लॉगआउट वर्कफ़्लो बनाएंगे जो फ़ायरबेस के पासवर्ड रहित प्रमाणीकरण को लागू करता है।

शुरू करने से पहले

Google विभिन्न फ़ायरबेस प्रमाणीकरण सीमाएँ निर्धारित करता है। यदि आप निःशुल्क स्पार्क योजना का उपयोग कर रहे हैं, तो ध्यान दें कि आप प्रति दिन 5 साइन-इन लिंक ईमेल तक सीमित रहेंगे। हालांकि स्पार्क योजना परीक्षण उद्देश्यों के लिए पर्याप्त हो सकती है, आपको इस सीमा से ऊपर जाने के लिए पे-एज़-यू-गो ब्लेज़ योजना में अपग्रेड करना होगा।


आवश्यक शर्तें

इस पूरे गाइड में, मैं रिएक्ट वेब एप्लिकेशन गाइड के साथ फायरबेस प्रमाणीकरण कैसे सेट करें, इसका उल्लेख पूर्व अपेक्षित गाइड के रूप में और संबंधित प्रोजेक्ट को पूर्व अपेक्षित प्रोजेक्ट के रूप में करूंगा।

इस गाइड को पूरा करने के लिए, आपको यह करना होगा:


  • सभी आवश्यक शर्तों सहित पूर्वापेक्षित मार्गदर्शिका पूरी कर ली।


चरण 1 - अपने फायरबेस प्रोजेक्ट के साथ पासवर्ड रहित प्रमाणीकरण सक्षम करना

आवश्यक मार्गदर्शिका में, आपने बुनियादी ईमेल/पासवर्ड प्रमाणीकरण के लिए एक नया फायरबेस प्रोजेक्ट बनाया है। अब, आप उसी प्रोजेक्ट को पासवर्ड रहित प्रमाणीकरण के लिए सक्षम करेंगे। अपने फायरबेस खाते में लॉगिन करें और गो टू कंसोल पर क्लिक करें।


  1. फायरबेस प्रोजेक्ट डैशबोर्ड पर सूचीबद्ध अपने प्रमाणीकरण प्रोजेक्ट पर क्लिक करें। यह मार्गदर्शिका प्रोजेक्ट नाम my-auth-test उपयोग करती है।

  2. बाएं पैनल मेनू में प्रमाणीकरण पर क्लिक करें।

  3. मुख्य विंडो में साइन-इन विधि टैब पर क्लिक करें।

  4. आवश्यक मार्गदर्शिका में आपके कार्य से, साइन-इन प्रदाता तालिका को पहले से ही सक्षम की स्थिति के साथ प्रदाता कॉलम के अंतर्गत ईमेल/पासवर्ड प्रदर्शित करना चाहिए। ईमेल/पासवर्ड प्रदाता के लिए कॉन्फ़िगरेशन पैनल खोलने के लिए पेंसिल आइकन पर क्लिक करें।

  5. ईमेल लिंक (पासवर्ड रहित साइन-इन) सक्षम करने के लिए टॉगल पर क्लिक करें।

  6. सहेजें पर क्लिक करें.


आपका फायरबेस प्रोजेक्ट अब पासवर्ड रहित प्रमाणीकरण का समर्थन करने के लिए कॉन्फ़िगर किया गया है।

चरण 2 - एक नया रिएक्ट प्रोजेक्ट बनाना और पैकेज स्थापित करना

चरण 2ए - एक नया रिएक्ट प्रोजेक्ट बनाना

अपने इच्छित एप्लिकेशन नाम का उपयोग करके एक नया रिएक्ट प्रोजेक्ट बनाएं। यह मार्गदर्शिका passwordless-auth उपयोग करती है।


 npx create-react-app passwordless-auth


चरण 2बी - पैकेज स्थापित करना

इस गाइड के लिए 3 Node.js पैकेजों की स्थापना की आवश्यकता है:



उपरोक्त तीन पैकेजों में से प्रत्येक को npm के माध्यम से स्थापित करें:


 npm install firebase


 npm install react-router-dom


 npm install bootstrap


चरण 3 - पूर्वावश्यकता परियोजना से firebase.js प्रतिलिपि बनाएँ

आवश्यक प्रोजेक्ट में, आपने एक firebase.js फ़ाइल बनाई है जो Firebase प्रमाणीकरण सेवा का एक उदाहरण बनाने के लिए आपके Firebase प्रोजेक्ट कॉन्फ़िगरेशन डेटा का उपयोग करती है। आपकी firebase.js फ़ाइल में आपके Firebase प्रोजेक्ट कॉन्फ़िगरेशन मानों के साथ निम्नलिखित संरचना होनी चाहिए:


 import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth }


firebase.js अपने नए रिएक्ट प्रोजेक्ट फ़ोल्डर में कॉपी करें।


यदि आपको अपने फायरबेस प्रोजेक्ट कॉन्फ़िगरेशन की समीक्षा करने की आवश्यकता है, तो बाएं पैनल मेनू में प्रोजेक्ट अवलोकन के बगल में गियर आइकन पर क्लिक करें। सामान्य टैब पहले से ही चयनित होना चाहिए. वेब ऐप्स पैनल वाले आपके ऐप्स अनुभाग तक नीचे स्क्रॉल करें। वेब ऐप्स पैनल के भीतर npm विकल्प पहले से ही चुना जाना चाहिए। आपके प्रोजेक्ट कॉन्फ़िगरेशन मान प्रदर्शित कोड ब्लॉक में सूचीबद्ध होंगे।


चरण 4 - रिएक्ट एप्लिकेशन का निर्माण

चरण 4ए - रिएक्ट एप्लिकेशन घटकों का अवलोकन

रिएक्ट एप्लिकेशन में 5 घटक शामिल होंगे: App , Layout , Login , Confirm , और Profile

App


  • App घटक रूटिंग सहित समग्र एप्लिकेशन संरचना को परिभाषित करता है।

Layout

  • Layout घटक एप्लिकेशन मार्कअप को निर्दिष्ट करता है जो सभी मार्गों पर सुसंगत रहता है।

Login

  • एप्लिकेशन में उपयोगकर्ता का प्रवेश बिंदु लॉगिन फॉर्म है।
  • जब कोई उपयोगकर्ता अपने ईमेल पते के माध्यम से लॉगिन करने का प्रयास करता है, तो साइन-इन लिंक वाला एक ईमेल उसके ईमेल पते पर भेजा जाता है।

Confirm

  • जब उपयोगकर्ता साइन-इन लिंक पर क्लिक करता है तो उसे Confirm पृष्ठ पर भेज दिया जाता है।
  • पेज उपयोगकर्ता से लॉग इन करते समय उपयोग किए गए ईमेल पते की पुष्टि करने का अनुरोध करता है।

Profile

  • उपयोगकर्ता को उनके ईमेल पते की पुष्टि करने के बाद Profile पृष्ठ पर भेज दिया जाता है।
  • उपयोगकर्ता अपने खाते से लॉगआउट करने के लिए Profile पृष्ठ पर लॉगआउट बटन पर क्लिक कर सकता है।

अंतिम src निर्देशिका में निम्नलिखित फ़ाइलें होंगी:


 src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx


चरण 4बी - रिएक्ट प्रोजेक्ट टेम्पलेट को साफ़ करना और आवश्यक प्रोजेक्ट से फ़ाइलों की प्रतिलिपि बनाना

  1. आप रिएक्ट प्रोजेक्ट टेम्पलेट से उन्हीं फ़ाइलों को हटा सकते हैं जैसा कि आवश्यक मार्गदर्शिका के चरण 5बी.1 में वर्णित है। अपने रिएक्ट प्रोजेक्ट से निम्नलिखित फ़ाइलें हटाएँ:
  • reportWebVitals.js
  • setupTests.js
  • logo.svg
  • index.css
  • App.css
  • App.test.js
  1. पूर्व अपेक्षित प्रोजेक्ट से index.js अपने नए प्रोजेक्ट फ़ोल्डर में कॉपी करें। यह मार्गदर्शिका उसी फ़ाइल का उपयोग करती है. यदि आपको index.js फिर से बनाने की आवश्यकता है, तो आवश्यक मार्गदर्शिका का चरण 5बी.2 देखें या नीचे दिए गए कोड ब्लॉक को कॉपी करें।

  2. पूर्व अपेक्षित प्रोजेक्ट से Layout.jsx अपने नए प्रोजेक्ट फ़ोल्डर में कॉपी करें। यह मार्गदर्शिका उसी फ़ाइल का उपयोग करती है. यदि आपको Layout.jsx फिर से बनाने की आवश्यकता है, तो आवश्यक मार्गदर्शिका का चरण 5d देखें या नीचे दिए गए कोड ब्लॉक को कॉपी करें। वैकल्पिक रूप से, आप Layout.jsx के <p> टैग में प्रोजेक्ट टेक्स्ट को React With Firebase Passwordless Authentication के लिए अपडेट कर सकते हैं।


आपकी index.js और Layout.jsx फ़ाइलें इस प्रकार होनी चाहिए:


 // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );


 // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( <div className = "container-fluid"> <div className = "row justify-content-center mt-3"> <div className = "col-md-4 text-center"> <p className = "lead">React With Firebase Passwordless Authentication</p> </div> <Outlet /> </div> </div> ) } export default Layout


चरण 4c - App.js निर्माण

App.js फ़ाइल काफी हद तक वही है जो पूर्व अपेक्षित प्रोजेक्ट में है, केवल दो पंक्तियों में परिवर्तन के साथ। फ़ाइल बनाने की सुविधा के लिए, App.js पूर्व अपेक्षित प्रोजेक्ट से अपने नए प्रोजेक्ट फ़ोल्डर में कॉपी करें।

  1. फ़ाइल से निम्न import पंक्ति हटाएँ और इसे नीचे दिखाए अनुसार बदलें:


 // Delete this line: import Signup from "./Signup";


 // Replace it with: import Confirm from "./Confirm";


  1. फ़ाइल से निम्नलिखित <Route> हटाएं और इसे नीचे दिखाए अनुसार बदलें:


 // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>


 // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>


  1. App.js सहेजें।


पूरी फ़ाइल अब इस प्रकार होनी चाहिए:


 import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( <BrowserRouter> <Routes> <Route path = "/" element = { <Layout></Layout> }> <Route index element = { <Login></Login> }></Route> <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> <Route path = "/profile" element = { <Profile></Profile> } ></Route> </Route> </Routes> </BrowserRouter> ) } export default App


ध्यान दें कि Login घटक एक बार फिर एप्लिकेशन का होम रूट है जैसा कि यह पूर्व अपेक्षित प्रोजेक्ट के साथ था।


चरण 4डी - Login.jsx निर्माण

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


  1. src निर्देशिका में एक नई Login.jsx फ़ाइल बनाएँ।

  2. निम्नलिखित कोड जोड़ें:


 import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button> </div> </form> </div> </div> ) }
  1. Login.jsx सहेजें।


उपयोगकर्ता के ईमेल पते को कैप्चर करने पर, Login.jsx फॉर्म फायरबेस की sendSignInLinkToEmail विधि के माध्यम से उसके पते पर साइन-इन लिंक के साथ एक ईमेल भेजता है। सफल होने पर, उपयोगकर्ता को सूचित किया जाता है कि ईमेल भेज दिया गया है। ध्यान दें कि actionCodeSettings ऑब्जेक्ट को sendSignInLinkToEmail विधि के पैरामीटर के रूप में पास किया गया है और इसमें वह URL शामिल है जिस पर उपयोगकर्ता को तब रूट किया जाएगा जब वह ईमेल किए गए साइन-इन लिंक पर क्लिक करेगा। इस मामले में, URL App.js में निर्दिष्ट /confirm रूट पर मैप होता है।


चरण 4ई - Confirm.jsx निर्माण

फायरबेस की signInWithEmailLink विधि का उपयोग उस उपयोगकर्ता को साइन इन करने के लिए किया जाता है जिसने साइन-इन लिंक पर क्लिक किया है। जैसा कि आप एक पल में देखेंगे, विधि एक email पैरामीटर लेती है, और email का मान उस ईमेल पते से मेल खाना चाहिए जिसे उपयोगकर्ता ने लॉगिन फॉर्म के माध्यम से लॉग इन करते समय उपयोग किया था। Confirm.jsx उपयोगकर्ता को उसके ईमेल पते की पुष्टि करने के लिए एक फॉर्म प्रस्तुत करता है और बाद में उपयोगकर्ता को साइन इन करने का प्रयास करता है।


  1. src निर्देशिका में एक नई Confirm.jsx फ़ाइल बनाएँ।

  2. निम्नलिखित कोड जोड़ें:


 import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button> </div> </form> </div> </div> ) } export default Confirm
  1. Confirm.jsx सहेजें।


isSignInWithEmailLink विधि पहले यह जांचती है कि उपयोगकर्ता जिस साइन-इन लिंक का उपयोग कर रहा है वह वैध है या नहीं। यदि ऐसा है, तो उपयोगकर्ता को साइन इन करने के लिए signInWithEmailLink विधि को कॉल किया जाता है। दोहराने के लिए, signInWithEmailLink विधि को दिया गया email मान उपयोगकर्ता द्वारा लॉगिन फॉर्म के साथ उपयोग किए गए ईमेल पते से मेल खाना चाहिए। ध्यान दें कि यदि उपयोगकर्ता एक नया उपयोगकर्ता है (यानी, वह पहली बार साइन इन कर रहा है), तो फायरबेस स्वचालित रूप से फायरबेस प्रमाणीकरण स्टोर में उपयोगकर्ता बना देगा। यह पासवर्ड रहित प्रमाणीकरण द्वारा पेश किए गए सरलीकृत अनुभव का एक और उदाहरण है: नए उपयोगकर्ताओं के लिए खाता निर्माण स्वचालित रूप से नियंत्रित किया जाता है।

चरण 4एफ - Profile.jsx का निर्माण

अंतिम घटक जो आप बनाएंगे वह Profile.jsx है। जब उपयोगकर्ता Confirm.jsx के माध्यम से सफलतापूर्वक साइन इन करते हैं तो उन्हें इस घटक पर भेज दिया जाता है। रूट उपयोगकर्ता का उनके ईमेल पते के साथ स्वागत करता है और लॉगआउट करने के लिए एक बटन प्रदान करता है। लॉगआउट करने पर, उपयोगकर्ता को Login घटक पर वापस भेज दिया जाता है।

  1. src निर्देशिका में एक नई Profile.jsx फ़ाइल बनाएँ।

  2. निम्नलिखित कोड जोड़ें:


 import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( <div className = "container"> <div className = "row justify-content-center"> <div className = "col-md-4 text-center"> <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p> <div className = "d-grid gap-2"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button> </div> </div> </div> </div> ) } export default Profile
  1. Profile.jsx सहेजें।

चरण 5 - आवेदन का परीक्षण

  1. रिएक्ट एप्लिकेशन प्रारंभ करें:


 npm start


  1. यदि आपका ब्राउज़र स्वचालित रूप से लॉन्च नहीं होता है, तो अपने ब्राउज़र में locahost:3000 पर नेविगेट करें। आपको Login फॉर्म देखना चाहिए.

लॉगिन फॉर्म।


  1. वह ईमेल दर्ज करें जिसका उपयोग आप साइन इन करने के लिए करना चाहते हैं और सबमिट पर क्लिक करें। यदि सबमिशन सफल होता है, तो एक अधिसूचना प्रदर्शित की जाएगी कि साइन-इन लिंक वाला एक ईमेल आपके ईमेल पते पर भेजा गया था।


लॉगिन फॉर्म पर ईमेल पता दर्ज करना।



ईमेल साइन-इन लिंक अधिसूचना भेजी गई।


  1. अपने ईमेल खाते में लॉगिन करें और फायरबेस साइन-इन लिंक ईमेल देखें। इसमें Sign in to project-1078604952662 के समान एक विषय पंक्ति होनी चाहिए जहां 13-अंकीय संख्या अनुक्रम आपके फायरबेस प्रोजेक्ट के messagingSenderId का प्रतिनिधित्व करता है (इस गाइड के चरण 3 देखें)। नीचे वैकल्पिक अनुभाग में, मैं बताऊंगा कि आप साइन-इन लिंक ईमेल में "उपयोगकर्ता-अनुकूल" नाम प्रदर्शित करने के लिए अपने फायरबेस प्रोजेक्ट नाम को कैसे संशोधित कर सकते हैं। अभी के लिए, साइन-इन लिंक ईमेल खोलें और साइन-इन लिंक पर क्लिक करें। आपको Confirm फॉर्म पर भेज दिया जाएगा।

नमूना फायरबेस साइन-इन लिंक ईमेल।


  1. वह ईमेल पता दर्ज करें जिसका उपयोग आपने Confirm फॉर्म पर साइन इन करते समय किया था। पुष्टि करें पर क्लिक करें. यदि पुष्टिकरण सफल होता है, तो आपको Profile पृष्ठ पर भेज दिया जाएगा।


ईमेल पता पुष्टिकरण प्रपत्र.



सफल साइन इन के बाद प्रोफ़ाइल पृष्ठ।


  1. साइन आउट करने के लिए Profile पृष्ठ पर लॉगआउट बटन पर क्लिक करें। यदि साइन-आउट सफल होता है, तो आपको Login फॉर्म पर वापस भेज दिया जाएगा।


उपरोक्त चरण एप्लिकेशन के लिए वर्कफ़्लो को कैप्चर करते हैं।

वैकल्पिक: अपने प्रोजेक्ट का नाम संशोधित करना

आप अपने प्रोजेक्ट का नाम बदल सकते हैं ताकि फायरबेस द्वारा भेजे गए साइन-इन लिंक ईमेल, उदाहरण के लिए, project-1078604952662 के बजाय "उपयोगकर्ता-अनुकूल" नाम प्रदर्शित करें। अपने फायरबेस खाते में लॉगिन करें और गो टू कंसोल पर क्लिक करें।


  1. फायरबेस प्रोजेक्ट डैशबोर्ड पर सूचीबद्ध अपने प्रमाणीकरण प्रोजेक्ट पर क्लिक करें।
  2. बाएं पैनल मेनू में प्रोजेक्ट अवलोकन के बगल में गियर आइकन पर क्लिक करें। सामान्य टैब पहले से ही चयनित होना चाहिए.
  3. आपके प्रोजेक्ट अनुभाग में सार्वजनिक-सामना वाले नाम विकल्प तक नीचे स्क्रॉल करें।
  4. पेंसिल आइकन पर क्लिक करें और अपने प्रोजेक्ट का नाम इच्छानुसार संशोधित करें।
  5. सहेजें पर क्लिक करें. आपके साइन-इन लिंक ईमेल अब अद्यतन प्रोजेक्ट नाम प्रदर्शित करेंगे।

निष्कर्ष और अगले चरण

पासवर्ड रहित प्रमाणीकरण एप्लिकेशन डेवलपर्स के बीच एक तेजी से लोकप्रिय विकल्प प्रतीत होता है, और यह स्वाभाविक भी है। पासवर्ड प्रबंधित करने की आवश्यकता को समाप्त करने के स्पष्ट लाभ के अलावा, ईमेल सत्यापन की भी कोई आवश्यकता नहीं है क्योंकि साइन-इन लिंक भेजने की प्रक्रिया अपने आप में एक सत्यापन है।


पूर्व अपेक्षित परियोजना की तरह, यहां कार्यान्वयन बुनियादी है। आप सरल संवर्द्धन पर विचार कर सकते हैं जैसे:


  • विशेष ईमेल एड्रेस डोमेन (यानी, सामान्य स्पैम ईमेल डोमेन) को ब्लॉक करना/ब्लैकलिस्ट करना।

  • Login पेज पर उपयोगकर्ता द्वारा दर्ज किए गए ईमेल पते को स्थानीय रूप से संग्रहीत करना और Confirm पृष्ठ पर ईमेल पते के अस्तित्व की जांच करना। इस दृष्टिकोण के साथ, यदि उपयोगकर्ता उसी डिवाइस पर साइन-इन लिंक पर क्लिक करता है जहां उसने Login पृष्ठ तक पहुंच बनाई है, तो उसे Confirm पृष्ठ पर अपना ईमेल पता दोबारा दर्ज करने की आवश्यकता नहीं होगी क्योंकि इसे पुनर्प्राप्त कर लिया जाएगा। स्थानीय भंडारण से. यह और भी अधिक घर्षण रहित उपयोगकर्ता अनुभव प्रदान करता है।


आप आधिकारिक दस्तावेज़ के माध्यम से फायरबेस पासवर्ड रहित प्रमाणीकरण के बारे में अधिक जान सकते हैं।