यह मार्गदर्शिका रिएक्ट वेब एप्लिकेशन के साथ फायरबेस प्रमाणीकरण कैसे सेट करें का पूरक है। उस गाइड के परिचय में, मैंने नोट किया कि फायरबेस बुनियादी ईमेल/पासवर्ड प्रमाणीकरण के अलावा अन्य प्रमाणीकरण योजनाएं भी प्रदान करता है। उन विकल्पों में से एक पासवर्ड रहित प्रमाणीकरण है।
एप्लिकेशन बनाते समय पासवर्ड रहित प्रमाणीकरण एक आकर्षक विकल्प है। यह उपयोगकर्ता अनुभव को सरल बनाता है क्योंकि आपके उपयोगकर्ताओं को अपने पासवर्ड याद रखने की कोई आवश्यकता नहीं होती है और इस प्रकार उन्हें खोने के बारे में भी कभी चिंता नहीं करनी पड़ती है। यह विकास के अनुभव को भी सुविधाजनक बनाता है क्योंकि किसी पासवर्ड कैप्चर या प्रबंधन तर्क को डिजाइन करने की आवश्यकता नहीं है।
इस गाइड में, आप एक सरल लॉगिन/पुष्टि/प्रोफ़ाइल/लॉगआउट वर्कफ़्लो बनाएंगे जो फ़ायरबेस के पासवर्ड रहित प्रमाणीकरण को लागू करता है।
Google विभिन्न फ़ायरबेस प्रमाणीकरण सीमाएँ निर्धारित करता है। यदि आप निःशुल्क स्पार्क योजना का उपयोग कर रहे हैं, तो ध्यान दें कि आप प्रति दिन 5 साइन-इन लिंक ईमेल तक सीमित रहेंगे। हालांकि स्पार्क योजना परीक्षण उद्देश्यों के लिए पर्याप्त हो सकती है, आपको इस सीमा से ऊपर जाने के लिए पे-एज़-यू-गो ब्लेज़ योजना में अपग्रेड करना होगा।
इस पूरे गाइड में, मैं रिएक्ट वेब एप्लिकेशन गाइड के साथ फायरबेस प्रमाणीकरण कैसे सेट करें, इसका उल्लेख पूर्व अपेक्षित गाइड के रूप में और संबंधित प्रोजेक्ट को पूर्व अपेक्षित प्रोजेक्ट के रूप में करूंगा।
इस गाइड को पूरा करने के लिए, आपको यह करना होगा:
आवश्यक मार्गदर्शिका में, आपने बुनियादी ईमेल/पासवर्ड प्रमाणीकरण के लिए एक नया फायरबेस प्रोजेक्ट बनाया है। अब, आप उसी प्रोजेक्ट को पासवर्ड रहित प्रमाणीकरण के लिए सक्षम करेंगे। अपने फायरबेस खाते में लॉगिन करें और गो टू कंसोल पर क्लिक करें।
फायरबेस प्रोजेक्ट डैशबोर्ड पर सूचीबद्ध अपने प्रमाणीकरण प्रोजेक्ट पर क्लिक करें। यह मार्गदर्शिका प्रोजेक्ट नाम my-auth-test
उपयोग करती है।
बाएं पैनल मेनू में प्रमाणीकरण पर क्लिक करें।
मुख्य विंडो में साइन-इन विधि टैब पर क्लिक करें।
आवश्यक मार्गदर्शिका में आपके कार्य से, साइन-इन प्रदाता तालिका को पहले से ही सक्षम की स्थिति के साथ प्रदाता कॉलम के अंतर्गत ईमेल/पासवर्ड प्रदर्शित करना चाहिए। ईमेल/पासवर्ड प्रदाता के लिए कॉन्फ़िगरेशन पैनल खोलने के लिए पेंसिल आइकन पर क्लिक करें।
ईमेल लिंक (पासवर्ड रहित साइन-इन) सक्षम करने के लिए टॉगल पर क्लिक करें।
सहेजें पर क्लिक करें.
आपका फायरबेस प्रोजेक्ट अब पासवर्ड रहित प्रमाणीकरण का समर्थन करने के लिए कॉन्फ़िगर किया गया है।
अपने इच्छित एप्लिकेशन नाम का उपयोग करके एक नया रिएक्ट प्रोजेक्ट बनाएं। यह मार्गदर्शिका passwordless-auth
उपयोग करती है।
npx create-react-app passwordless-auth
इस गाइड के लिए 3 Node.js पैकेजों की स्थापना की आवश्यकता है:
उपरोक्त तीन पैकेजों में से प्रत्येक को npm
के माध्यम से स्थापित करें:
npm install firebase
npm install react-router-dom
npm install bootstrap
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 विकल्प पहले से ही चुना जाना चाहिए। आपके प्रोजेक्ट कॉन्फ़िगरेशन मान प्रदर्शित कोड ब्लॉक में सूचीबद्ध होंगे।
रिएक्ट एप्लिकेशन में 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
reportWebVitals.js
setupTests.js
logo.svg
index.css
App.css
App.test.js
पूर्व अपेक्षित प्रोजेक्ट से index.js
अपने नए प्रोजेक्ट फ़ोल्डर में कॉपी करें। यह मार्गदर्शिका उसी फ़ाइल का उपयोग करती है. यदि आपको index.js
फिर से बनाने की आवश्यकता है, तो आवश्यक मार्गदर्शिका का चरण 5बी.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
App.js
निर्माण App.js
फ़ाइल काफी हद तक वही है जो पूर्व अपेक्षित प्रोजेक्ट में है, केवल दो पंक्तियों में परिवर्तन के साथ। फ़ाइल बनाने की सुविधा के लिए, App.js
पूर्व अपेक्षित प्रोजेक्ट से अपने नए प्रोजेक्ट फ़ोल्डर में कॉपी करें।
फ़ाइल से निम्न import
पंक्ति हटाएँ और इसे नीचे दिखाए अनुसार बदलें:
// Delete this line: import Signup from "./Signup";
// Replace it with: import Confirm from "./Confirm";
फ़ाइल से निम्नलिखित <Route>
हटाएं और इसे नीचे दिखाए अनुसार बदलें:
// Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>
// Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>
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
घटक एक बार फिर एप्लिकेशन का होम रूट है जैसा कि यह पूर्व अपेक्षित प्रोजेक्ट के साथ था।
Login.jsx
निर्माणपासवर्ड रहित प्रमाणीकरण के मामले में, आपको स्पष्ट रूप से पासवर्ड फ़ील्ड शामिल करने की आवश्यकता नहीं है, न ही आपको पासवर्ड इनपुट के लिए स्थिति प्रबंधित करने की आवश्यकता है। इसलिए, लॉगिन फॉर्म में केवल उपयोगकर्ता का ईमेल पता दर्ज करना होगा।
src
निर्देशिका में एक नई Login.jsx
फ़ाइल बनाएँ।
निम्नलिखित कोड जोड़ें:
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> ) }
Login.jsx
सहेजें।
उपयोगकर्ता के ईमेल पते को कैप्चर करने पर, Login.jsx
फॉर्म फायरबेस की sendSignInLinkToEmail
विधि के माध्यम से उसके पते पर साइन-इन लिंक के साथ एक ईमेल भेजता है। सफल होने पर, उपयोगकर्ता को सूचित किया जाता है कि ईमेल भेज दिया गया है। ध्यान दें कि actionCodeSettings
ऑब्जेक्ट को sendSignInLinkToEmail
विधि के पैरामीटर के रूप में पास किया गया है और इसमें वह URL शामिल है जिस पर उपयोगकर्ता को तब रूट किया जाएगा जब वह ईमेल किए गए साइन-इन लिंक पर क्लिक करेगा। इस मामले में, URL App.js
में निर्दिष्ट /confirm
रूट पर मैप होता है।
Confirm.jsx
निर्माण फायरबेस की signInWithEmailLink
विधि का उपयोग उस उपयोगकर्ता को साइन इन करने के लिए किया जाता है जिसने साइन-इन लिंक पर क्लिक किया है। जैसा कि आप एक पल में देखेंगे, विधि एक email
पैरामीटर लेती है, और email
का मान उस ईमेल पते से मेल खाना चाहिए जिसे उपयोगकर्ता ने लॉगिन फॉर्म के माध्यम से लॉग इन करते समय उपयोग किया था। Confirm.jsx
उपयोगकर्ता को उसके ईमेल पते की पुष्टि करने के लिए एक फॉर्म प्रस्तुत करता है और बाद में उपयोगकर्ता को साइन इन करने का प्रयास करता है।
src
निर्देशिका में एक नई Confirm.jsx
फ़ाइल बनाएँ।
निम्नलिखित कोड जोड़ें:
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
Confirm.jsx
सहेजें।
isSignInWithEmailLink
विधि पहले यह जांचती है कि उपयोगकर्ता जिस साइन-इन लिंक का उपयोग कर रहा है वह वैध है या नहीं। यदि ऐसा है, तो उपयोगकर्ता को साइन इन करने के लिए signInWithEmailLink
विधि को कॉल किया जाता है। दोहराने के लिए, signInWithEmailLink
विधि को दिया गया email
मान उपयोगकर्ता द्वारा लॉगिन फॉर्म के साथ उपयोग किए गए ईमेल पते से मेल खाना चाहिए। ध्यान दें कि यदि उपयोगकर्ता एक नया उपयोगकर्ता है (यानी, वह पहली बार साइन इन कर रहा है), तो फायरबेस स्वचालित रूप से फायरबेस प्रमाणीकरण स्टोर में उपयोगकर्ता बना देगा। यह पासवर्ड रहित प्रमाणीकरण द्वारा पेश किए गए सरलीकृत अनुभव का एक और उदाहरण है: नए उपयोगकर्ताओं के लिए खाता निर्माण स्वचालित रूप से नियंत्रित किया जाता है।
Profile.jsx
का निर्माण अंतिम घटक जो आप बनाएंगे वह Profile.jsx
है। जब उपयोगकर्ता Confirm.jsx
के माध्यम से सफलतापूर्वक साइन इन करते हैं तो उन्हें इस घटक पर भेज दिया जाता है। रूट उपयोगकर्ता का उनके ईमेल पते के साथ स्वागत करता है और लॉगआउट करने के लिए एक बटन प्रदान करता है। लॉगआउट करने पर, उपयोगकर्ता को Login
घटक पर वापस भेज दिया जाता है।
src
निर्देशिका में एक नई Profile.jsx
फ़ाइल बनाएँ।
निम्नलिखित कोड जोड़ें:
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
Profile.jsx
सहेजें।रिएक्ट एप्लिकेशन प्रारंभ करें:
npm start
locahost:3000
पर नेविगेट करें। आपको Login
फॉर्म देखना चाहिए.
वह ईमेल दर्ज करें जिसका उपयोग आप साइन इन करने के लिए करना चाहते हैं और सबमिट पर क्लिक करें। यदि सबमिशन सफल होता है, तो एक अधिसूचना प्रदर्शित की जाएगी कि साइन-इन लिंक वाला एक ईमेल आपके ईमेल पते पर भेजा गया था।
Sign in to project-1078604952662
के समान एक विषय पंक्ति होनी चाहिए जहां 13-अंकीय संख्या अनुक्रम आपके फायरबेस प्रोजेक्ट के messagingSenderId
का प्रतिनिधित्व करता है (इस गाइड के चरण 3 देखें)। नीचे वैकल्पिक अनुभाग में, मैं बताऊंगा कि आप साइन-इन लिंक ईमेल में "उपयोगकर्ता-अनुकूल" नाम प्रदर्शित करने के लिए अपने फायरबेस प्रोजेक्ट नाम को कैसे संशोधित कर सकते हैं। अभी के लिए, साइन-इन लिंक ईमेल खोलें और साइन-इन लिंक पर क्लिक करें। आपको Confirm
फॉर्म पर भेज दिया जाएगा।
वह ईमेल पता दर्ज करें जिसका उपयोग आपने Confirm
फॉर्म पर साइन इन करते समय किया था। पुष्टि करें पर क्लिक करें. यदि पुष्टिकरण सफल होता है, तो आपको Profile
पृष्ठ पर भेज दिया जाएगा।
साइन आउट करने के लिए Profile
पृष्ठ पर लॉगआउट बटन पर क्लिक करें। यदि साइन-आउट सफल होता है, तो आपको Login
फॉर्म पर वापस भेज दिया जाएगा।
उपरोक्त चरण एप्लिकेशन के लिए वर्कफ़्लो को कैप्चर करते हैं।
आप अपने प्रोजेक्ट का नाम बदल सकते हैं ताकि फायरबेस द्वारा भेजे गए साइन-इन लिंक ईमेल, उदाहरण के लिए, project-1078604952662
के बजाय "उपयोगकर्ता-अनुकूल" नाम प्रदर्शित करें। अपने फायरबेस खाते में लॉगिन करें और गो टू कंसोल पर क्लिक करें।
पासवर्ड रहित प्रमाणीकरण एप्लिकेशन डेवलपर्स के बीच एक तेजी से लोकप्रिय विकल्प प्रतीत होता है, और यह स्वाभाविक भी है। पासवर्ड प्रबंधित करने की आवश्यकता को समाप्त करने के स्पष्ट लाभ के अलावा, ईमेल सत्यापन की भी कोई आवश्यकता नहीं है क्योंकि साइन-इन लिंक भेजने की प्रक्रिया अपने आप में एक सत्यापन है।
पूर्व अपेक्षित परियोजना की तरह, यहां कार्यान्वयन बुनियादी है। आप सरल संवर्द्धन पर विचार कर सकते हैं जैसे:
विशेष ईमेल एड्रेस डोमेन (यानी, सामान्य स्पैम ईमेल डोमेन) को ब्लॉक करना/ब्लैकलिस्ट करना।
Login
पेज पर उपयोगकर्ता द्वारा दर्ज किए गए ईमेल पते को स्थानीय रूप से संग्रहीत करना और Confirm
पृष्ठ पर ईमेल पते के अस्तित्व की जांच करना। इस दृष्टिकोण के साथ, यदि उपयोगकर्ता उसी डिवाइस पर साइन-इन लिंक पर क्लिक करता है जहां उसने Login
पृष्ठ तक पहुंच बनाई है, तो उसे Confirm
पृष्ठ पर अपना ईमेल पता दोबारा दर्ज करने की आवश्यकता नहीं होगी क्योंकि इसे पुनर्प्राप्त कर लिया जाएगा। स्थानीय भंडारण से. यह और भी अधिक घर्षण रहित उपयोगकर्ता अनुभव प्रदान करता है।
आप आधिकारिक दस्तावेज़ के माध्यम से फायरबेस पासवर्ड रहित प्रमाणीकरण के बारे में अधिक जान सकते हैं।