Appsmith और APISIX का उपयोग करके कस्टम प्रमाणीकरण (Authentication) बनाएं

प्रमाणीकरण प्रवाह वेब एप्लिकेशन का एक मूलभूत हिस्सा है। यह सुनिश्चित करता है कि उपयोगकर्ता आपके ऐप का उपयोग करते समय उनके डेटा की सुरक्षा और गोपनीयता बनी रहे। हालांकि कई ऑफ-द-शेल्फ प्रमाणीकरण समाधान उपलब्ध हैं, लो-कोड UI विकास प्लेटफॉर्म और API प्रबंधन समाधान का उपयोग करके एक प्रमाणीकरण प्रणाली बनाने से आप सुरक्षित वेब एप्लिकेशन आसानी से बना सकते हैं। आप फ्रंटएंड और बैकएंड टेक्नोलॉजी और टूल्स के ज्ञान के बिना एक एप्लिकेशन बना सकते हैं। आपको Python, Java, HTML, CSS, या अन्य JavaScript फ्रेमवर्क्स का ज्ञान होने की आवश्यकता नहीं है। इस पोस्ट में, आप सीखेंगे कि Appsmith, Apache APISIX, और JWT का उपयोग करके अपने एप्लिकेशन को सुरक्षित करने के लिए एक कस्टम सरल लॉगिन प्रवाह और UI पेज कैसे बनाएं।

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

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

आप इस लेख में निम्नलिखित सीखेंगे:

• लो-कोड वातावरण में प्रमाणीकरण प्रक्रिया डिजाइन करना।
• APISIX के साथ बैकएंड प्रमाणीकरण API सेट अप करना।
• Appsmith में विजेट्स का उपयोग करके UI पेज बनाना।
• टोकन-आधारित प्रमाणीकरण सक्षम करना।

प्रमाणीकरण आर्किटेक्चर डिजाइन करें

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

हम एक सरल मोबाइल ऐप बनाने जा रहे हैं जिसमें क्रमशः 3 पेज पंजीकरण, लॉगिन, और मुख्य पेज होंगे। हमारे कार्य दो भागों में विभाजित हैं। पहले भाग में, हम बैकएंड API सेट अप करेंगे जो Apache APISIX API गेटवे के साथ प्रमाणीकरण अनुरोधों को संभालेगा। हम उपयोगकर्ता पंजीकरण, लॉगिन, और टोकन जनरेशन प्रवाह को प्राप्त करने के लिए मौजूदा API गेटवे एंडपॉइंट्स का उपयोग करते हैं। दूसरे भाग में, हम Appsmith के ड्रैग-एंड-ड्रॉप इंटरफेस का उपयोग करके पंजीकरण, लॉगिन, और मुख्य पेज बनाएंगे और अंत में, उन्हें फॉर्म सबमिशन को संभालने के लिए API से जोड़ेंगे। आइए निम्नलिखित अनुभागों में इन घटकों को बनाना शुरू करें।

भाग 1: बैकएंड प्रमाणीकरण API सेट अप करें

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

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

• Docker का उपयोग कंटेनराइज्ड etcd और APISIX स्थापित करने के लिए किया जाता है।
• curl का उपयोग APISIX Admin API को अनुरोध भेजने के लिए किया जाता है। आप Postman जैसे टूल्स का भी उपयोग कर सकते हैं।

चरण 1: Apache APISIX स्थापित करें

APISIX को निम्नलिखित क्विकस्टार्ट स्क्रिप्ट के साथ आसानी से स्थापित और शुरू किया जा सकता है:

curl -sL https://run.api7.ai/apisix/quickstart | sh

चरण 2: बैकएंड सेवा (अपस्ट्रीम) कॉन्फ़िगर करें

अगला, हम अपनी बैकएंड सेवा को कॉन्फ़िगर करते हैं। डेमो उद्देश्यों के लिए, यह कोई भी API सेवा हो सकती है जो हमारे बैकएंड लॉजिक को संभालती है। आप इसे अपनी सेवा से भी बदल सकते हैं। मैं एक मॉक पब्लिक सर्वर http://httpbin.org/ का उपयोग करता हूं जो यादृच्छिक प्रतिक्रियाएं उत्पन्न करता है। सरलता के लिए, हमारे पास एक एकल एंडपॉइंट होगा जो हमारे मशीन का पब्लिक IP पता लौटाता है इस एंडपॉइंट http://httpbin.org/ip पर।

मॉक API के लिए बैकएंड सेवा को अनुरोधों को रूट करने के लिए, आपको इसे Apache APISIX में Admin API के माध्यम से एक अपस्ट्रीम सर्वर जोड़कर कॉन्फ़िगर करना होगा।

curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
   "name":"Mock API upstream",
   "desc":"Register Mock API as the upstream",
   "nodes":{
      "httpbin.org:80":1
   }
}'

चरण 3: एक नया प्लगइन कॉन्फ़िग बनाएं

इस चरण में हम अगले चरण में बनाए जाने वाले रूट के लिए एक प्लगइन (प्लगइन कॉन्फ़िग ऑब्जेक्ट का उपयोग करके) कॉन्फ़िगर करते हैं। इसलिए, APISIX हमारे एंडपॉइंट्स को सुरक्षित करने के लिए JWT प्लगइन को सक्षम करता है। हर बार जब हम एंडपॉइंट को अनुरोध करते हैं, यह अनुरोध हेडर में JWT क्रेडेंशियल्स की जांच करता है।

curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
   "plugins":{
      "jwt-auth": {}
   }
}'

चरण 4: बैकएंड API के लिए एक रूट बनाएं

हम APISIX में एक नया रूट ऑब्जेक्ट बनाते हैं जो /ip URI के लिए सभी GET अनुरोधों को इंटरसेप्ट करता है, और मौजूदा अपस्ट्रीम और प्लगइन कॉन्फ़िगरेशन का उपयोग करके रूटिंग मैकेनिज्म और प्रमाणीकरण नीतियों को सक्षम करता है। यह हेडर में JWT प्लगइन की जांच करता है, और यदि यह मौजूद है और मान्य है, तो अनुरोध को हमारे मॉक सर्वर पर फॉरवर्ड करता है। अन्यथा, यह तुरंत एक अनधिकृत त्रुटि लौटाता है और अनुरोध वास्तविक सेवा तक नहीं पहुंचेगा।

curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
   "name":"Mock API server route",
   "desc":"Create a new route in APISIX for the mock server endpoint",
   "methods":[
      "GET"
   ],
   "uri":"/ip",
   "upstream_id":"1",
   "plugin_config_id":1
}'

चरण 5: JWT टोकन साइन करने के लिए एक रूट बनाएं

हमने अपने API के लिए टोकन-आधारित प्रमाणीकरण लागू किया है। APISIX टोकन जनरेट और मान्य करने के लिए एक पहचान प्रदाता के रूप में भी कार्य कर सकता है। ऐसा करने के लिए, आपको public-api प्लगइन का उपयोग करके टोकन साइन करने के लिए एक नए API एंडपॉइंट के लिए एक रूट सेट अप करना होगा:

curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
    "uri": "/login",
    "plugins": {
        "public-api": {
            "uri": "/apisix/plugin/jwt/sign"
        }
    }
}'

उपरोक्त curl कमांड को निष्पादित करके, हमने login नामक एक नया रूट पंजीकृत किया है जिसमें URI पथ /login है जो एक नया टोकन साइन करता है जब भी कोई मौजूदा उपयोगकर्ता अपने ईमेल का उपयोग करके मोबाइल ऐप के लॉगिन पेज से लॉगिन करने का प्रयास करता है।

भाग 2: Appsmith में उपयोगकर्ता पंजीकरण और लॉगिन फॉर्म बनाएं

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

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

मैं आपके मशीन पर Appsmith की स्थापना का हिस्सा छोड़ रहा हूं। आप Docker का उपयोग करके Appsmith स्थापित करना Appsmith वेबसाइट पर सीख सकते हैं। सुनिश्चित करें कि आपने Appsmith स्थापित किया है और आप इसे http://localhost पर एक्सेस कर सकते हैं। जब आप Appsmith को डिप्लॉय और रन करते हैं, तो डिफ़ॉल्ट रूप से My first application नामक एक एप्लिकेशन जोड़ा जाता है। आप इस एप्लिकेशन का उपयोग अपना पहला ऐप बनाने के लिए कर सकते हैं।

चरण 1: पंजीकरण पेज बनाएं

हमारे मामले में, एक नया उपयोगकर्ता पहले पंजीकरण पेज से मोबाइल ऐप पर पंजीकृत होता है। अपने एप्लिकेशन में RegistrationPage नामक एक नया पेज बनाकर शुरू करें। ईमेल (नामित EmailInput), उपयोगकर्ता नाम (नामित UsernameInput), और पासवर्ड (PasswordInput) के लिए इनपुट विजेट्स जोड़ें। साथ ही, रजिस्टर (नामित RegisterButton) और लॉगिन (नामित LoginButton) बटन विजेट्स को ड्राइंग बोर्ड में जोड़ें। अंतिम परिणाम नीचे दिखाया गया है:

जब एक उपयोगकर्ता प्रदान किए गए इनपुट विवरणों के साथ रजिस्टर बटन दबाता है, तो आपको APISIX Admin API एंडपॉइंट के साथ संचार को संभालने के लिए एक क्वेरी की आवश्यकता होगी ताकि API गेटवे में एक नया API उपभोक्ता पंजीकृत किया जा सके। APISIX उपभोक्ताओं एंडपॉइंट URI /apisix/admin/consumers के साथ एक API क्वेरी (नामित APISIX_Admin_Add_Consumer_API) बनाएं। इनपुट विजेट्स टेक्स्ट को अपनी क्वेरी बॉडी में रखें। इनपुट विजेट्स तक पहुंच कुछ इस तरह दिखनी चाहिए:

ध्यान दें कि हम localhost के बजाय host.docker.internal का पता उपयोग करते हैं क्योंकि APISIX अपने स्वयं के कंटेनर में एक अलग डॉकर नेटवर्क पर चल रहा है जो Appsmith से अलग है।

क्वेरी APISIX को भेजने के बाद, यह नए उपभोक्ता को पंजीकृत करता है, और उपभोक्ता ऑब्जेक्ट jwt-auth प्लगइन का उपयोग करेगा जिसमें कुंजी और गुप्त शामिल हैं। आप यह परीक्षण कर सकते हैं कि उपभोक्ता सफलतापूर्वक सिस्टम में पंजीकृत है या नहीं, उपयोगकर्ता नाम appsmithuser द्वारा निर्दिष्ट उपभोक्ता को प्राप्त करके। इस curl कमांड को चलाएं:

curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser

जबकि मौजूदा उपयोगकर्ता सीधे लॉगिन पेज पर जा सकते हैं। अगले अनुभाग में देखें।

चरण 2: लॉगिन पेज बनाएं

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

फिर APISIX लॉगिन रूट URI पथ /login के लिए एक API क्वेरी (नामित login_api) बनाएं और key पैरामीटर को {{EmailInput.text}} पर सेट करें। यदि आप क्वेरी का परीक्षण करते हैं और रन बटन दबाते हैं, तो सफल प्रतिक्रिया पर, हमारा प्रमाणीकरण API गेटवे एंडपॉइंट एक वैध एक्सेस टोकन लौटाना चाहिए। नीचे दिए गए उदाहरण में, jwt कुंजी एक टोकन है जो इंगित करता है कि उपयोगकर्ता APISIX साइड पर प्रमाणित हो गया है।

लॉगिन बटन के माध्यम से login_api क्वेरी को चलाने के लिए, आपको क्वेरी onClick प्रॉपर्टी सेट करने की आवश्यकता है।

JWT टोकन को Appsmith स्टोर में स्टोर करना और फिर उपयोगकर्ता को MainPage पर ले जाना भी संभव है। ऐसा करने के लिए, लॉगिन पेज के onClick प्रॉपर्टी में login_api एक्शन में नीचे दिया गया कोड डालें:

{{login_api.run(() => {
  const jwt = login_api?.data;
  if (jwt) {
    storeValue('jwt', jwt);
    navigateTo('MainPage', {});
  } else {
    showAlert('Login failed!', 'error');
  }
})}}

यदि उपयोगकर्ता APISIX के साथ प्रमाणीकरण में विफल होता है, तो एक अलर्ट संदेश दिखाएं जो उपयोगकर्ता को बताए कि एक त्रुटि हुई है।

चरण 3: मुख्य पेज बनाएं

अंत में, अब समय आ गया है कि मोबाइल ऐप के MainPage को कॉन्फ़िगर करें ताकि लॉग इन किए गए उपयोगकर्ताओं को पहुंच की अनुमति दी जा सके और कुछ डेटा दिखाया जा सके। आप विजेट्स से अपना UI बनाने के लिए उसी कैनवास का उपयोग कर सकते हैं। एक बार उपयोगकर्ता सफलतापूर्वक लॉग इन हो जाने पर, हमारा लॉजिक MainPage पर नेविगेट करता है, और पहले पेज लोड पर, यह स्वचालित रूप से APISIX में रूट http://127.0.0.1:9080/ip को आपके द्वारा जोड़ी गई क्वेरी (नामित main_page_data_api) का उपयोग करके एक API कॉल करता है और अपस्ट्रीम सर्वर (जिसे हमने भाग 1 और चरण 2 में बनाया था) से IP पता प्राप्त करता है।

आप Authorization हेडर में {{appsmith.store.jwt}} मान देख सकते हैं जो हमने पिछले चरण में Appsmith स्टोर में सहेजा था, जो आपके एप्लिकेशन को यह साबित करने के लिए उपयोग किया जाता है कि उपयोगकर्ता को पहचाना गया है। यदि jwt मान Appsmith स्टोर में मौजूद नहीं है, तो हम उपयोगकर्ता को एक अनधिकृत त्रुटि दिखाते हैं।

मेरे मामले में, मैंने MainPage में दो टेक्स्ट विजेट्स जोड़े हैं और दूसरे के टेक्स्ट फील्ड मान को {{main_page_data_api.data}} पर सेट किया है जो केवल main_page_data_api कॉल से आउटपुट डेटा है। परिणाम देखें।

अगले कदम

आप एक अनधिकृत पेज भी जोड़ सकते हैं जो अनधिकृत उपयोगकर्ताओं को उस पेज पर रीडायरेक्ट करेगा, त्रुटि दिखाएगा और उन्हें लॉग इन या एक नया खाता बनाने के लिए सुझाव देगा। अपने उपयोगकर्ताओं को अपने ऐप से लॉग आउट करने की क्षमता प्रदान करें जब वे समाप्त कर लें, जो आपके डेटा की सुरक्षा बढ़ाने में मदद कर सकता है।

निष्कर्ष

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

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

• API गेटवे प्रमाणीकरण।
• Apache APISIX प्राधिकरण नीति: अपने APIs की सुरक्षा करें।
• माइक्रोसर्विसेज में प्रमाणीकरण की गहराई।