आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

कस्टम प्रमाणीकरण प्रणाली बनाना एक कठिन काम हो सकता है। इसके लिए प्रमाणीकरण प्रोटोकॉल और उपयोगकर्ता प्रमाणीकरण और प्राधिकरण प्रक्रियाओं की गहरी समझ की आवश्यकता होती है। हालाँकि, Supabase जैसे टूल को एकीकृत करके, आप अपने एप्लिकेशन के मुख्य तर्क के निर्माण पर अधिक ध्यान केंद्रित कर सकते हैं।

सुपाबेस एक ओपन-सोर्स फायरबेस विकल्प है जो क्लाउड-आधारित विकास मंच प्रदान करता है। यह बैकएंड सेवाओं की एक श्रृंखला प्रदान करता है जैसे कि एक पूर्ण विकसित पोस्टग्रेज डेटाबेस, एक प्रमाणीकरण सेवा और सर्वर रहित कार्यात्मकताएं।

यह अधिक सुलभ होने के लिए डिज़ाइन किया गया है, जिससे आप जल्दी से परियोजनाएँ स्थापित कर सकते हैं। अपने React.js एप्लिकेशन में प्रमाणीकरण सेवा को एकीकृत करने का तरीका जानने के लिए आगे बढ़ें।

सुपरबेस डेवलपर कंसोल पर एक नया प्रोजेक्ट बनाएं

सुपरबेस डेवलपर कंसोल पर एक नया प्रोजेक्ट बनाने के लिए, इन चरणों का पालन करें:

  1. ए के लिए साइन अप करें सुपरबेस डेवलपर खाता। डैशबोर्ड पर नेविगेट करें और एक नया प्रोजेक्ट बनाएं।
    2. instagram viewer
  2. प्रोजेक्ट का नाम और एक पासवर्ड भरें (यह इस ट्यूटोरियल के लिए वैकल्पिक है लेकिन डेटाबेस सेट करते समय अनुशंसित है), क्षेत्र का चयन करें, और अंत में क्लिक करें नया प्रोजेक्ट बनाएं.
  3. एपीआई सेटिंग्स के तहत, परियोजना की प्रतिलिपि बनाएँ यूआरएल और यह सार्वजनिक एनोन चाबी।

एक प्रामाणिक प्रदाता सेट करें

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

यह ट्यूटोरियल प्रदर्शित करेगा कि Google प्रदाता कैसे सेट अप करें। ऐसा करने के लिए, इन चरणों का पालन करें:

  1. बाएँ फलक में, का चयन करें प्रमाणीकरण टैब।
  2. प्रमाणीकरण सेटिंग पृष्ठ में, का चयन करें प्रदाताओं विकल्प, और अंत में, का चयन करें Google प्रदाता प्रदाताओं की सूची से। ध्यान दें कि ईमेल प्रदाता पहले से ही डिफ़ॉल्ट रूप से कॉन्फ़िगर किया गया है। आपको कोई कॉन्फ़िगरेशन करने की आवश्यकता नहीं है।
  3. सक्षम करें प्रदाता टॉगल बटन।
  4. Google प्रदाता को दो इनपुट की आवश्यकता होती है: ClientID और ClientSecret। Google डेवलपर कंसोल पर एप्लिकेशन बनाने के बाद आपको ये दो मान मिलेंगे। अभी के लिए, कॉपी करें रीडायरेक्ट यूआरएल। आप ClientID और ClientSecret प्राप्त करने के लिए Google डेवलपर कंसोल पर एक एप्लिकेशन सेट अप करने के लिए इसका उपयोग करेंगे।

Google डेवलपर कंसोल (GDC) पर अपना प्रोजेक्ट सेट करें

Google के साथ प्रमाणित करने के लिए, आपको अपने ऐप को Google डेवलपर कंसोल (GDC) पर पंजीकृत करना होगा और ClientID और ClientSecret प्राप्त करना होगा. जीडीसी पर एक परियोजना स्थापित करने के लिए इन चरणों का पालन करें:

  1. के लिए जाओ Google डेवलपर कंसोल और कंसोल तक पहुंचने के लिए अपने Google खाते से साइन इन करें।
  2. एक बार लॉग इन करने के बाद, नेविगेट करें एपीआई और सेवाएं टैब, चुनें क्रेडेंशियल बनाएँ विकल्प, और फिर चुनें OAuth क्लाइंट आईडी.
  3. दिए गए विकल्पों में से आवेदन का प्रकार निर्दिष्ट करें और फिर अपने आवेदन का नाम भरें।
  4. बाद में, अपने ऐप का होम रूट URL निर्दिष्ट करें (http //: लोकलहोस्ट: 3000), और अंत में, कॉलबैक रीडायरेक्ट URL निर्दिष्ट करें। सुपरबेस Google प्रदाता सेटिंग पृष्ठ से आपके द्वारा कॉपी किए गए रीडायरेक्ट URL में पेस्ट करें। पर क्लिक करें बचाना प्रक्रिया को पूरा करने के लिए।
  5. कॉपी करें ग्राहक ID और क्लाइंटसीक्रेट और अपने Supababase प्रोजेक्ट डैशबोर्ड पर वापस जाएं और उन्हें Google प्रदाता सेटिंग पृष्ठ में ClientID और ClientSecret इनपुट फ़ील्ड पर पेस्ट करें। क्लिक बचाना प्रदाता को सक्षम करने के लिए।

React.js एप्लिकेशन में Supabase प्रमाणीकरण सेवा को कॉन्फ़िगर करें

एक React.js एप्लिकेशन बनाएं, और फिर अपने पसंदीदा कोड संपादक में प्रोजेक्ट फ़ोल्डर खोलें। अगला, अपने प्रोजेक्ट फ़ोल्डर की रूट डायरेक्टरी में, अपने पर्यावरण चर रखने के लिए एक ENV फ़ाइल बनाएँ: आपका प्रोजेक्ट URL और आपकी सार्वजनिक एनॉन कुंजी। अपने Supabase सेटिंग पेज पर जाएं, API सेक्शन खोलें, और प्रोजेक्ट URL और पब्लिक एनॉन की को कॉपी करें।

REACT_APP_SUPABASE_URL= प्रोजेक्ट URL
REACT_APP_SUPABASE_API_KEY = जनता एनोन कुंजी

1. आवश्यक पैकेज स्थापित करें

आवश्यक निर्भरताओं को स्थापित करने के लिए अपने टर्मिनल पर यह कमांड चलाएँ:

एनपीएम इंस्टॉल करें @supbase/auth-ui-react @supbase/सुपाबेस-जेएस प्रतिक्रिया प्रतिक्रिया-राउटर-डोम

2. लॉगिन पृष्ठ और सफलता पृष्ठ घटक बनाएँ

अपने React.js एप्लिकेशन की /src निर्देशिका में एक नया फ़ोल्डर बनाएँ, और इसे पृष्ठों का नाम दें। इस फोल्डर के अंदर, दो फाइलें बनाएं: Login.js और Success.js।

3. लॉगिन पृष्ठ घटक

यह घटक Supabase द्वारा प्रदान किए गए React.js प्रमाणीकरण UI का उपयोग करते हुए एक साइनअप और साइन-इन सुविधा प्रदान करेगा। आपने ऑथ यूआई को एक निर्भरता के रूप में आयात किया है (@supabase/auth-UI-react), जिससे प्रमाणीकरण कार्यक्षमता को लागू करना आसान हो गया है।

login.js फ़ाइल में, नीचे दिया गया कोड जोड़ें:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {क्रिएट क्लाइंट} से'@सुपाबेस/सुपबेस-जेएस';
आयात {प्रामाणिक, थीमसुपा} से'@supbase/auth-ui-react';
आयात {useNavigate} से'प्रतिक्रिया-राउटर-डोम';
कॉन्स्ट सुपरबेस = क्रिएट क्लाइंट (
प्रक्रिया.env.REACT_APP_SUPABASE_URL,
प्रक्रिया.env.REACT_APP_SUPABASE_API_KEY
); 
समारोहलॉग इन करें() {
कॉन्स्ट नेविगेट करें = नेविगेट करें (); 
 supabase.auth.onAuthStateChange (async (घटना) =>{
अगर (घटना! == "साइन आउट") {
 नेविगेट करें ('/सफलता');
 }अन्य{
 नेविगेट करें ('/');
 }
 })
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<हैडरकक्षा का नाम="ऐप-हेडर">
 सुपरबेस क्लाइंट = {सुपरबेस}
 उपस्थिति = {{थीम: थीमसुपा}}
 विषय ="अँधेरा"
 प्रदाता = {['गूगल']}
 /> 
हैडर>
डिव>
 );
}
निर्यातगलती करना लॉग इन करें;

आइए इसे तोड़ दें:

  • पर्यावरण चर के साथ एक सुपरबेस क्लाइंट को प्रारंभ करें - आपका प्रोजेक्ट URL और ENV फ़ाइल में आपकी सार्वजनिक एनॉन कुंजी।
  • supabase.auth.onAuthStateChange () विधि का उपयोग करके प्रमाणीकरण स्थिति में परिवर्तनों को ट्रैक करने के लिए ईवेंट श्रोता सेट अप करें यानी यदि प्रमाणीकरण स्थिति "SIGNED_OUT" नहीं है तो उपयोगकर्ता को '/सफलता' पृष्ठ पर नेविगेट किया जाता है, अन्यथा, उपयोगकर्ता को '/' पर नेविगेट किया जाता है (होम/लॉगिन) पृष्ठ।
  • आप इस प्रक्रिया को प्रबंधित करने के लिए useNavigate हुक से नेविगेट विधि का उपयोग करेंगे।
  • अंत में, विषयसुपा (सुपाबेस द्वारा प्रदान किया गया), डार्क थीम, और गुणों के रूप में सेट Google प्रदाता की उपस्थिति के साथ सुपाबेस लाइब्रेरी से रिएक्ट ऑथ यूआई घटक युक्त एक डिव लौटाएं।

4. सफलता पृष्ठ घटक

उपयोगकर्ता के सफलतापूर्वक प्रमाणित होने और साइन-आउट बटन के बाद यह घटक उपयोगकर्ता विवरण के साथ एक सफलता पृष्ठ प्रस्तुत करेगा।

Success.js फ़ाइल में, नीचे दिया गया कोड जोड़ें:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {क्रिएट क्लाइंट} से'@सुपाबेस/सुपबेस-जेएस';
आयात {useNavigate} से'प्रतिक्रिया-राउटर-डोम';
आयात {यूज़एफ़ेक्ट, यूज़स्टेट} से'प्रतिक्रिया';
कॉन्स्ट सुपरबेस = क्रिएट क्लाइंट (
प्रक्रिया.env.REACT_APP_SUPABASE_URL,
प्रक्रिया.env.REACT_APP_SUPABASE_API_KEY
); 
समारोहसफलता() {
कॉन्स्ट [उपयोगकर्ता, सेटयूज़र] = यूज़स्टेट ([]); 
कॉन्स्ट नेविगेट करें = नेविगेट करें (); 
 उपयोग प्रभाव (() => {
asyncसमारोहgetUserData(){
इंतजार supabase.auth.getUser ()। फिर ((कीमत) => {
अगर(कीमत।आंकड़े?उपयोगकर्ता) {
setUser(कीमत।आंकड़ेउपयोगकर्ता)} 
 }) }
 उपयोगकर्ता डेटा प्राप्त करें ();
 },[]);
कॉन्स्ट अवतार = उपयोगकर्ता?.उपयोगकर्ता_मेटाडेटा?.अवतार_यूआरएल; 
कॉन्स्ट उपयोगकर्ता नाम = उपयोगकर्ता?.उपयोगकर्ता_मेटाडेटा?.पूर्ण_नाम; 
asyncसमारोहसाइनऑउटयूज़र(){
इंतजारco.प्रमाणीकरण।साइन आउट();
 नेविगेट करें ('/');
 };
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<हैडरकक्षा का नाम="ऐप-हेडर">
<एच 1>लॉग इन सफलएच 1>
<एच 2>{उपयोगकर्ता नाम}एच 2>
<आईएमजीस्रोत={अवतार} />
<बटनक्लिक पर={()=> साइनऑउटयूज़र()}>साइन आउट करेंबटन>
हैडर>
डिव>
 );
}
निर्यातगलती करना सफलता;

आइए इसे तोड़ दें:

  • पर्यावरण चर के साथ एक सुपरबेस क्लाइंट को प्रारंभ करें - आपका प्रोजेक्ट URL और ENV फ़ाइल में आपकी सार्वजनिक एनॉन कुंजी।
  • उपयोग React.js हुक, useState और useEffect, एपीआई प्रतिक्रिया से डेटा प्राप्त करने के लिए।
  • useEffect हुक एक एसिंक्रोनस फ़ंक्शन लागू करता है जो supabase.auth.getUser विधि को कॉल करता है। यह विधि वर्तमान उपयोगकर्ता के सत्र से संबद्ध उपयोगकर्ता जानकारी को पुनः प्राप्त करती है।
  • अतुल्यकालिक फ़ंक्शन तब यह देखने के लिए जांच करता है कि उपयोगकर्ता डेटा मौजूद है या नहीं और यदि वे करते हैं तो इसे राज्य चर पर सेट करता है।
  • साइनऑउटयूज़र फ़ंक्शन उपयोगकर्ता को साइन आउट करने के लिए supabase.auth.signOut विधि का उपयोग करता है और जब वे साइन-आउट बटन पर क्लिक करते हैं तो उन्हें लॉगिन पृष्ठ पर वापस नेविगेट करते हैं।
  • अंत में, कुछ उपयोगकर्ता जानकारी के साथ एक div वापस करें।

5. पृष्ठ मार्गों को कॉन्फ़िगर करें

अंत में, लॉगिन और सक्सेस पेज दोनों के लिए रूट कॉन्फ़िगर करें।

app.js फ़ाइल में, नीचे दिया गया कोड जोड़ें:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {ब्राउज़र राउटर जैसा राउटर, रूट, रूट} से'प्रतिक्रिया-राउटर-डोम';
आयात लॉग इन करें से'./पेज/लॉगिन';
आयात सफलता से'./पृष्ठ/सफलता';
समारोहअनुप्रयोग() {
वापस करना (
<रूटर>
// मार्गों को परिभाषित करें
"/" तत्व = {} />
"/सफलता" तत्व = {} />
मार्गों>
रूटर>
 );
}
निर्यातगलती करना अनुप्रयोग;

आइए इसे तोड़ दें:

  • दो मार्गों को परिभाषित करें: प्रतिक्रिया-राउटर लाइब्रेरी से राउटर घटकों का उपयोग करके लॉगिन पृष्ठ के लिए एक मार्ग और सफलता पृष्ठ के लिए एक मार्ग।
  • मार्ग पथ को क्रमशः '/' और '/success' पर सेट करें, और लॉगिन और सफलता घटकों को उनके संबंधित मार्गों पर असाइन करें।
  • अंत में, विकास सर्वर को स्पिन करने के लिए इस आदेश को अपने टर्मिनल पर चलाएं: 
 NPM शुरू
  • पर जाए http //: लोकलहोस्ट: 3000 परिणाम देखने के लिए अपने ब्राउज़र पर लॉगिन घटक ईमेल और Google प्रदाताओं दोनों के साथ सुपाबेस के रिएक्ट-ऑर्ट-यूआई को प्रस्तुत करता है।

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

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

सुपरबेस रिएक्ट में प्रमाणीकरण को आसान बनाता है

Supabase प्रमाणीकरण से परे सुविधाओं का एक व्यापक सूट प्रदान करता है, जैसे डेटाबेस होस्टिंग, एपीआई एक्सेस और रीयल-टाइम डेटा स्ट्रीमिंग। यह डेवलपर्स को अपने एप्लिकेशन को अधिक कुशलता से बनाने और प्रबंधित करने में मदद करने के लिए क्वेरी बिल्डर और डेटा विज़ुअलाइज़ेशन जैसी सुविधाएँ भी प्रदान करता है।

अपने सहज ज्ञान युक्त डैशबोर्ड और मजबूत एपीआई के साथ, सुपरबेस स्केलेबल और सुरक्षित अनुप्रयोगों के निर्माण के लिए एक शक्तिशाली उपकरण है।