Auth0 आपके वेब ऐप में उपयोगकर्ता पहचान स्थापित करने की प्रक्रिया को सरल करता है। यह अपने एपीआई के माध्यम से सुरक्षित और अनुकूलन योग्य प्रमाणीकरण और प्राधिकरण सुविधाएँ प्रदान करता है। इसका उपयोग करें, और आपको स्क्रैच से अपनी स्वयं की प्रमाणीकरण प्रणाली बनाने के बारे में चिंता करने की आवश्यकता नहीं होगी।

Auth0 के साथ एकीकरण आपके रिएक्ट एप्लिकेशन में विश्वसनीय प्रमाणीकरण को शामिल करना आसान बनाता है और आपके ऐप तक सुरक्षित पहुंच की गारंटी देता है।

निम्नलिखित चरण बताते हैं कि Auth0 को रिएक्ट एप्लिकेशन में एकीकृत करने के लिए क्या आवश्यक है।

ऑथ0 क्या है?

Auth0 एक वेब सेवा है जो संभालने के लिए एक सुरक्षित API प्रदान करती है उपयोगकर्ता प्रमाणीकरण और प्राधिकरण आपके ऐप्स में।

यह एक अनुकूलन योग्य प्रमाणीकरण प्रणाली प्रदान करता है जिसे आप आसानी से अपने रिएक्ट एप्लिकेशन में एकीकृत कर सकते हैं। एक बार जब आप Auth0 को अपने ऐप से जोड़ लेते हैं, तो यह बाकी प्रमाणीकरण कार्यभार को संभाल लेता है।

Auth0 कैसे काम करता है?

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

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

इस प्रकार के प्रमाणीकरण का उपयोग करने का लाभ यह है कि आपको पहचान से परिचित होने की आवश्यकता नहीं है OAuth 2.0 या OpenID Connect जैसे प्रोटोकॉल, जिनका आमतौर पर सुरक्षित प्रमाणीकरण बनाने के लिए उपयोग किया जाता है सिस्टम।

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

आरंभ करने के लिए, आपको पहले एक के लिए साइन अप करना होगा प्रामाणिक0 खाता। साइन अप करने के बाद, अपने डैशबोर्ड पर जाएँ और क्लिक करें एप्लिकेशन बनाएं प्रमाणीकरण परियोजना सेटिंग्स को कॉन्फ़िगर करने के लिए।

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

अगला, चयन करें प्रतिक्रिया Auth0 द्वारा समर्थित तकनीकों की सूची से।

एप्लिकेशन के URI को कॉन्फ़िगर करें

अपना एप्लिकेशन बनाने और आवश्यक सेटिंग्स को कॉन्फ़िगर करने के बाद, अपने एप्लिकेशन के डैशबोर्ड पर, पर क्लिक करें समायोजन आवश्यक URI गुण सेट करने के लिए टैब।

निम्नलिखित गुण सेट करें:

• अनुमत कॉलबैक URL. उपयोगकर्ता द्वारा प्रमाणित किए जाने के बाद Auth0 सर्वर द्वारा कॉल किया जाने वाला URL।
• अनुमत लॉगआउट URL. वह URL जो Auth0 उपयोगकर्ता द्वारा लॉग आउट करने पर रीडायरेक्ट करेगा।
• अनुमत वेब मूल. अनुमति प्राप्त URL जिससे प्राधिकरण अनुरोध आ सकता है।

स्थानीय विकास के लिए, आप उपयोग कर सकते हैं http://localhost: 3000 यूआरएल। हालाँकि, एक बार जब आप अपने कोड को उत्पादन में धकेल देते हैं, तो आपको अपने डोमेन URL प्रदान करने होंगे।

URL भरने के बाद, आगे बढ़ें और क्लिक करें परिवर्तनों को सुरक्षित करें सेटिंग पेज के नीचे।

अपना पसंदीदा सामाजिक लॉगिन प्रदाता सेट करें

Auth0 के एप्लिकेशन डैशबोर्ड के बाएँ मेनू फलक पर, पर क्लिक करें प्रमाणीकरण, फिर चुनें सामाजिक. अगला, पर क्लिक करें कनेक्शन बनाएँ सामाजिक संपर्क सेटिंग पृष्ठ पर बटन.

अंत में, अपना पसंदीदा सामाजिक लॉगिन प्रदाता चुनें और जोड़ें।

Auth0 को अपने रिएक्ट ऐप में कॉन्फ़िगर करें

लॉगिन और सफलता घटकों का निर्माण करके अपने रिएक्ट एप्लिकेशन में Auth0 प्रमाणीकरण सेवा को एकीकृत करें।

1. एक रिएक्ट एप्लिकेशन बनाएं और एक ईएनवी फाइल सेट करें

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

REACT_APP_AUTH0_DOMAIN= आपका डोमेन नाम 
REACT_APP_AUTH0_CLIENT_ID= आपकी ग्राहक आईडी

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

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

एनपीएम इंस्टॉल @ auth0/auth0-react

3. Auth0 प्रदाता के साथ अपने ऐप घटक को रैप करें

Auth0 प्रदाता रिएक्ट संदर्भ का उपयोग करता है। यह आपको ऐप घटक के भीतर इसकी सभी संपत्तियों तक पहुंचने की अनुमति देता है। Auth0 प्रदाता तीन पैरामीटर लेता है: क्लाइंट डोमेन, क्लाइंट आईडी और रीडायरेक्ट URI।

index.js फ़ाइल खोलें, टेम्पलेट रिएक्ट कोड हटाएं, और नीचे कोड जोड़ें:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात रिएक्टडॉम से'प्रतिक्रिया-डोम/क्लाइंट';
आयात अनुप्रयोग से'।/अनुप्रयोग';
आयात{Auth0Provider} से'@auth0/auth0-react';
कॉन्स्ट जड़ = ReactDOM.createRoot (दस्तावेज़.getElementById('जड़'));
रूट.रेंडर (
 डोमेन = {प्रक्रिया.env. REACT_APP_AUTH0_DOMAIN}
 क्लाइंटआईड = {प्रक्रिया.env। REACT_APP_AUTH0_CLIENT_ID}
 रीडायरेक्ट यूरी = {खिड़की.स्थान.मूल}
 >

 </Auth0Provider>, document.getElementById('रूट')
);

4. एक लॉगिन पृष्ठ घटक बनाएँ

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

login.js फ़ाइल खोलें और नीचे कोड जोड़ें। लॉगिन पृष्ठ घटक एक लॉगिन बटन प्रस्तुत करेगा।

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {उपयोगAuth0} से'@auth0/auth0-react';
कॉन्स्ट लॉगिन = () => {
कॉन्स्ट {loginWithRedirect, isAuthenticated} = useAuth0 ();
वापस करना (प्रमाणित है || (
 loginWithRedirect ()}> लॉग इन </button>
 ))
}
निर्यातगलती करना लॉग इन करें

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

5. एक सफल पृष्ठ घटक बनाएँ

यह घटक दो मुख्य विशेषताएं प्रस्तुत करेगा: एक प्रमाणित उपयोगकर्ता का प्रोफ़ाइल और एक साइन-आउट बटन।

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

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {उपयोगAuth0} से'@auth0/auth0-react'
कॉन्स्ट सफलता = () => {
कॉन्स्ट {उपयोगकर्ता, लॉगआउट, प्रमाणीकृत है} = useAuth0 (); 
वापस करना ( प्रमाणित है && ( 



उपयोगकर्ता प्रोफ़ाइल </h1> 

{उपयोगकर्ता नाम</h2> 



{उपयोगकर्ता.ईमेल</p> 
 लॉगआउट ()}> लॉग आउट </button> 
 </div>
 ))
}
निर्यातगलती करना सफलता

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

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

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

क्या Auth0 प्रमाणीकरण सेवा प्रयास करने योग्य है?

Auth0 आउट-ऑफ़-द-बॉक्स समाधान प्रदान करता है जो आपके ऐप की प्रमाणीकरण आवश्यकताओं को संभालता है। इसके अतिरिक्त, Auth0 सेवा वेब, मोबाइल और देशी विकास प्लेटफॉर्म के लिए समर्थन प्रदान करती है जिससे आप प्रमाणीकरण प्रणाली को अपनी पसंद के तकनीकी स्टैक के साथ आसानी से एकीकृत कर सकते हैं।