पूर्ण-स्टैक प्रमाणीकरण ऐप कैसे बनाएं

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

यह पोस्ट आपको Apache APISIX, Authgear, और OpenID Connect (OIDC) के साथ एक पूर्ण-स्टैक प्रमाणीकरण ऐप बनाने के लिए मार्गदर्शन करेगी। आप इस प्रोजेक्ट का स्रोत कोड GitHub पर पा सकते हैं। ऐप के साथ तेजी से शुरुआत करने के लिए, बस रिपॉजिटरी को क्लोन करें और README.md फ़ाइल में दिए गए चरणों का पालन करके कोड नमूना चलाएं।

सीखने का उद्देश्य

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

प्रमाणीकरण में APISIX, Authgear, और OIDC की भूमिका

गाइड में गोता लगाने से पहले, आइए संक्षेप में उन टूल्स का परिचय दें जिनका हम उपयोग करेंगे।

• OIDC (OpenID Connect) OAuth 2.0 प्रोटोकॉल के ऊपर बनाया गया एक सरल पहचान परत है। यह तीसरे पक्ष के एप्लिकेशन को उपयोगकर्ताओं को सत्यापित करने और मूल प्रोफ़ाइल जानकारी प्राप्त करने में सक्षम बनाता है।

• APISIX सबसे लोकप्रिय ओपन-सोर्स API गेटवे में से एक है। यह न केवल API प्रबंधन के लिए डिज़ाइन किया गया है, बल्कि इन API की सुरक्षा और सुरक्षा सुनिश्चित करने के लिए भी है। इसकी सुरक्षा शस्त्रागार में सबसे प्रमुख विशेषताओं में से एक है इसके प्लगइन का उपयोग करके OIDC का समर्थन।

• Authgear वेब और मोबाइल एप्लिकेशन के लिए एक अत्यधिक अनुकूलनीय पहचान-एक-सेवा (IDaaS) प्लेटफॉर्म है। आपके उपयोगकर्ता आपके एप्लिकेशन में एक बिल्ट-इन UI इंटरफेस के माध्यम से लॉग इन कर सकते हैं (आपको उपयोगकर्ता पंजीकरण और लॉगिन प्रवाह के लिए UI बनाने की आवश्यकता नहीं है), जो उन्हें एक सुरक्षित, मानक-आधारित लॉगिन अनुभव प्रदान करता है जिसे आप अपने ब्रांडिंग और विभिन्न प्रमाणीकरण विधियों, जैसे ईमेल, सोशल लॉगिन, पासवर्डलेस, बायोमेट्रिक लॉगिन, एक-बार-पासवर्ड (OTP) SMS/WhatsApp के साथ, और मल्टी-फैक्टर प्रमाणीकरण (MFA) के साथ अनुकूलित कर सकते हैं। यह OpenID Connect (OIDC) और OAuth 2.0 का उपयोग करता है ताकि यह पहचान सके कि उपयोगकर्ता कौन है और संरक्षित संसाधनों को अधिकृत कर सके।

प्रमाणीकरण प्रवाह

यहां एक उच्च-स्तरीय आर्किटेक्चरल डायग्राम है जो दिखाता है कि प्रमाणीकरण प्रक्रिया कैसी दिखती है:

डायग्राम में दिखाए गए चरणों को नीचे विस्तार से समझाया गया है:

उपरोक्त डायग्राम में, क्लाइंट कोई भी वेब एप्लिकेशन है, API गेटवे APISIX है और पहचान प्रदाता Authgear है और अपस्ट्रीम एक बैकएंड API है।

1. एक वेब ऐप विभिन्न रूप ले सकता है, React, Vue, या Angular के साथ बने सिंगल पेज ऐप्स (SPA) से लेकर Express, NextJS, और इसी तरह के प्लेटफॉर्म का उपयोग करके बने मानक वेब एप्लिकेशन तक। वेब ऐप हमारा क्लाइंट ऐप है जो फ्रंटएंड से एक पहचान प्रदाता (Authgear) को क्लाइंट आईडी, क्लाइंट सीक्रेट के साथ एक अनुरोध भेजता है ताकि JSON Web Tokens (JWT) जैसे एक्सेस टोकन प्राप्त किया जा सके।
2. यदि प्रदान किए गए क्रेडेंशियल्स सही हैं, तो Authgear वेब ऐप को JWT टोकन के साथ जवाब देता है। आप Authgear पोर्टल में अपने ऐप के लिए जितने चाहें उतने उपयोगकर्ता बना सकते हैं और उपयोगकर्ता Authgear द्वारा होस्ट किए गए UI पेज का उपयोग करके लॉग इन कर सकते हैं।
3. JWT टोकन प्राप्त करने के बाद, क्लाइंट एक्सेस टोकन के साथ API गेटवे (APISIX) को एक अनुरोध भेजता है, और गेटवे द्वारा संरक्षित बैकएंड API।
4. अनुरोध को प्रोसेस करने से पहले, APISIX को यह सुनिश्चित करने की आवश्यकता है कि प्रदान किया गया टोकन वैध है, समाप्त नहीं हुआ है, और अनुरोधित डेटा या सेवा के लिए सही स्कोप हैं। यदि APISIX स्थानीय रूप से टोकन को सत्यापित नहीं कर सकता है, तो यह टोकन इंट्रोस्पेक्शन अनुरोध को Authgear अधिकृत सर्वर पर भेजता है। यह अनुरोध आमतौर पर सर्वर के introspection एंडपॉइंट पर किया जाता है।
5. Authgear इंट्रोस्पेक्शन अनुरोध प्राप्त करता है और इसे प्रोसेस करता है। सर्वर अपने रिकॉर्ड्स की जांच करता है ताकि टोकन की वैधता, इसकी समाप्ति, और संबंधित स्कोप निर्धारित कर सके, और टोकन की स्थिति निर्धारित करने के बाद, यह APISIX को जवाब देता है।
6. Authgear के टोकन इंट्रोस्पेक्शन जवाब के आधार पर, APISIX तब एक सूचित निर्णय ले सकता है। यदि टोकन वैध है, तो यह अनुरोध को बैकएंड API पर फॉरवर्ड करता है, अन्यथा यह क्लाइंट के अनुरोध को अनधिकृत HTTP स्थिति कोड के साथ अस्वीकार कर देता है।
7. APISIX बैकएंड API से अनुरोधित संसाधनों के साथ जवाब भेजता है।

APISIX, Authgear, और OIDC के साथ पूर्ण-स्टैक प्रमाणीकरण ऐप।

डेमो प्रोजेक्ट के लिए, हमने Docker का उपयोग करके 3 घटकों (बैकएंड, API गेटवे, और फ्रंटएंड) को एक ही कमांड के साथ इंस्टॉल और चलाने के लिए उपयोग किया। हमने फ्रंटएंड वेब ऐप के लिए ExpressJS का उपयोग किया, हमारे सिंगल पेज ऐप को localhost:3000 पर होस्ट किया। APISIX गेटवे को localhost:9080 पर एक्सेस किया जा सकता है, जबकि हमारा बैकएंड API (यह Python, Java, NodeJS आदि का उपयोग करके बनाया गया कोई भी API हो सकता है) localhost:9081 पर सेट किया गया है।

पूर्वापेक्षाएँ

शुरू करने से पहले, आपको निम्नलिखित की आवश्यकता होगी:

• एक मुफ्त Authgear खाता। यदि आपके पास पहले से नहीं है तो साइन अप करें।
• सभी सेवाओं को इंस्टॉल करने के लिए Docker का उपयोग किया जाता है।

Authgear को कॉन्फ़िगर करें

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

चरण 1: Authgear में एक एप्लिकेशन बनाएं

एप्लिकेशन सेट करने के लिए, Authgear पोर्टल UI पर नेविगेट करें और बाईं ओर नेविगेशन बार पर Applications का चयन करें। इंटरैक्टिव सेलेक्टर का उपयोग करके एक नया Authgear OIDC क्लाइंट एप्लिकेशन बनाएं।

चरण 2: ऐप क्रेडेंशियल्स को कॉपी करें

Authgear में हर एप्लिकेशन को एक अल्फ़ान्यूमेरिक, अद्वितीय CLIENT ID और CLIENT Secret सौंपा जाता है जो आपके एप्लिकेशन कोड का उपयोग करेगा ताकि वेब ऐप में Authgear API को कॉल किया जा सके। उत्पन्न Authgear ISSUER (उदाहरण के लिए, https://example-auth.authgear-apps.com), CLIENT ID, CLIENT SECRET को आउटपुट से रिकॉर्ड करें। आप इन मानों का उपयोग अगले चरण में वेब ऐप कॉन्फ़िगरेशन के लिए करेंगे।

चरण 3: रीडायरेक्ट URI को कॉन्फ़िगर करें

आपके एप्लिकेशन का अधिकृत रीडायरेक्ट URI वह URL है जिसे Authgear उपयोगकर्ता के प्रमाणित होने के बाद रीडायरेक्ट करेगा ताकि OpenID Connect मिडलवेयर प्रमाणीकरण प्रक्रिया को पूरा कर सके। हमारे मामले में, यह हमारे फ्रंटएंड के लिए होम पेज होगा और यह http://localhost:3000 पर चलेगा।

अधिकृत रीडायरेक्ट URIs फ़ील्ड में http://localhost:3000 सेट करें। ****यदि सेट नहीं किया गया है, तो उपयोगकर्ता लॉग इन करने के बाद आपके एप्लिकेशन पर वापस नहीं आएंगे।

चरण 4: एक्सेस टोकन को सक्षम करें

साथ ही, ऐप कॉन्फ़िगरेशन के एक्सेस टोकन सेक्शन के तहत Issue JWT as an access token विकल्प को सक्षम करें:

चरण 5: लॉगिन विधि चुनें

Authgear ऐप बनाने के बाद, आप चुन सकते हैं कि उपयोगकर्ताओं को लॉगिन पेज पर कैसे प्रमाणित करना है। प्रमाणीकरण टैब से, लॉगिन विधियों पर नेविगेट करें, आप विभिन्न विकल्पों में से एक लॉगिन विधि चुन सकते हैं, जिसमें ईमेल, मोबाइल, या सोशल, केवल उपयोगकर्ता नाम या आपके द्वारा निर्दिष्ट कस्टम विधि शामिल हैं। इस डेमो के लिए, हमने ईमेल+पासवर्डलेस दृष्टिकोण चुना है जहां हमारे उपयोगकर्ताओं को एक खाता पंजीकृत करने और अपने ईमेल का उपयोग करके लॉग इन करने के लिए कहा जाता है। वे अपने ईमेल पर एक वन-टाइम पासवर्ड (OTP) प्राप्त करेंगे और कोड को सत्यापित करके ऐप का उपयोग करेंगे।

डेमो प्रोजेक्ट को सेट अप और चलाएं

Authgear को सफलतापूर्वक कॉन्फ़िगर करने के बाद, अब हम GitHub रिपॉजिटरी को ला सकते हैं, पर्यावरण चर को कॉन्फ़िगर कर सकते हैं और सेवाओं को चला सकते हैं:

शुरू करने के लिए, प्रोजेक्ट को अपने स्थानीय मशीन पर क्लोन करें:

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

प्रोजेक्ट डायरेक्टरी को अपनी वर्तमान कार्यशील डायरेक्टरी बनाएं:

cd apisix-authgear-oidc-full-stack-auth

अपने प्रोजेक्ट की रूट डायरेक्टरी में जहां Docker compose yaml फ़ाइल है, एक फ़ाइल .env बनाएं और निम्नलिखित पर्यावरण चर जोड़ें:

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

ब्रैकेट में मानों को Authgear को कॉन्फ़िगर करें सेक्शन से अपने Authgear ऐप सेटिंग्स मानों जैसे Issuer, ClientId, ClientSecret के साथ बदलें।

पर्यावरण फ़ाइल जोड़ने के बाद, रूट डायरेक्टरी से docker compose up कमांड चलाएं।

प्रमाणीकरण प्रवाह का परीक्षण करें

डेमो के लिए, हमने Docker का उपयोग करके 3 घटकों (बैकएंड, API गेटवे, और फ्रंटएंड) को एक ही कमांड के साथ इंस्टॉल और चलाने के लिए उपयोग किया। हमने फ्रंटएंड वेब ऐप के लिए ExpressJS का उपयोग किया, हमारे सिंगल पेज ऐप को localhost:3000 पर होस्ट किया। APISIX गेटवे को localhost:9080 पर एक्सेस किया जा सकता है, जबकि हमारा बैकएंड API (यह Python, Java, NodeJS आदि का उपयोग करके बनाया गया कोई भी API हो सकता है) localhost:9081 पर सेट किया गया है।

अपने ईमेल का उपयोग करके साइन अप करने के बाद, आपको एक वन-टाइम पासवर्ड (OTP) प्राप्त होगा:

एक बार जब आप प्रमाणित हो जाते हैं, तो आपको API संसाधनों का अनुरोध करने की अनुमति दी जाती है और आपको बैकएंड सेवा से जवाब मिलता है:

APISIX ने Authgear के साथ OIDC प्रमाणीकरण को लागू किया और आसान सेटअप के साथ एक सुरक्षित और सुव्यवस्थित प्रमाणीकरण प्रवाह प्रदान किया।

अगले चरण

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

संबंधित संसाधन

Apache APISIX अधिकृत नीति: अपने API को सुरक्षित करें

OIDC और Keycloak के साथ SSO सेट करें