Next.js और Node.js के साथ एक मॉडर्न LTI 1.3 टूल बनाना

अगर आपने कभी Canvas, Moodle, या Blackboard जैसे किसी Learning Management System (LMS) के लिए इंटीग्रेशन बनाने की कोशिश की है, तो आप उस तकलीफ़ को जानते हैं। ख़ासतौर पर, LTI 1.3 (Learning Tools Interoperability) की तकलीफ़।

इसमें OIDC लॉगिन, JWKS keysets, RSA सिग्नेचर, और प्राइवेट कीज़ का एक जटिल नाच शामिल है। यह सिक्योर होने के लिए बनाया गया है, लेकिन उस डेवलपर के लिए जो सिर्फ़ "एक वेब ऐप को Canvas में एम्बेड करना" चाहता है, यह एक बुरे सपने जैसा महसूस हो सकता है।

यह वह आर्किटेक्चर है जिस पर मैं पहुंचा: सिक्योरिटी लेयर के लिए Node.js, फ्रंटएंड के लिए Next.js, जिन्हें एक मोनोलिथ बनाने की बजाय जानबूझकर अलग रखा गया है।

🔗 GitHub रिपॉज़िटरी: github.com/paurushrai/lti-1.3-node-nextjs-template

🧐 LTI 1.3 क्या है और आपको इसकी परवाह क्यों करनी चाहिए?

LTI (Learning Tools Interoperability) वह स्टैंडर्ड है जो एक्सटर्नल टूल्स (जैसे आपका ऐप) को किसी LMS (जैसे Canvas) से बात करने देता है।

पहले, LTI 1.1 आसान था: आप एक "सीक्रेट की" और "कंज़्यूमर की" शेयर करते थे। लेकिन यह असुरक्षित था। LTI 1.3 मॉडर्न इंफ़ॉर्मेशन-सिक्योरिटी मॉडल की तरफ़ जाता है:

1. लॉगिन फ़्लो के लिए OIDC (OpenID Connect)।
2. डेटा एक्सचेंज के लिए JWTs (JSON Web Tokens)।
3. शेयर्ड सीक्रेट्स की बजाय पब्लिक/प्राइवेट की एन्क्रिप्शन (RSA256)।

इससे यह ज़बरदस्त सिक्योर बनता है, लेकिन शुरू से इम्प्लीमेंट करना भी मुश्किल।

🏗 आर्किटेक्चर

इसे हल करने के लिए, हम कोई मोनोलिथ नहीं बनाने जा रहे। हम अपने सिक्योरिटी प्रोवाइडर को अपने ऐप्लिकेशन UI से अलग करने जा रहे हैं।

टेक स्टैक

• बैकएंड (सिक्योरिटी गार्ड): Node.js + Express + ltijs (LTI 1.3 के लिए स्टैंडर्ड Node.js लाइब्रेरी, Cvmcosta द्वारा)।
• फ्रंटएंड (एक्सपीरियंस): Next.js 14+ (App Router) + React + Tailwind CSS।
• डेटाबेस: PostgreSQL (क्रिप्टोग्राफ़िक कीज़ और प्लेटफ़ॉर्म रजिस्ट्रेशन स्टोर करता है)।
• इंफ्रास्ट्रक्चर: Docker Compose।

समस्या: "थर्ड-पार्टी कुकी" एपोकैलिप्स

LTI टूल्स के साथ एक बड़ी चुनौती यह है कि वे LMS के अंदर एक <iframe> में चलते हैं। मॉडर्न ब्राउज़र (Safari, Chrome Incognito) डिफ़ॉल्ट रूप से थर्ड-पार्टी कुकीज़ ब्लॉक कर देते हैं।

अगर आपका वेब ऐप एक सेशन कुकी (connect.sid) पर निर्भर करता है? यह Safari में फ़ेल हो जाएगा।

समाधान: "LTIaaS" टोकन फ़्लो

यह प्रोजेक्ट कुकी की सीमा को बायपास करने के लिए एक "स्टेटलेस" टोकन पैटर्न इम्प्लीमेंट करता है:

1. LMS लॉन्च: LMS हमारे Node.js बैकएंड को एक रिक्वेस्ट भेजता है।
2. हैंडशेक: बैकएंड सिग्नेचर वेरिफ़ाई करता है। अगर वैलिड है, तो यह एक शॉर्ट-लिव्ड, वन-टाइम-यूज़ ltik (LTI key) जनरेट करता है।
3. रीडायरेक्ट: बैकएंड iframe को Next.js फ्रंटएंड पर रीडायरेक्ट करता है, टोकन को URL में पास करते हुए: https://myapp.com/app?ltik=eyJhb...
4. हाइड्रेशन: Next.js ऐप इस टोकन को URL से पकड़ लेता है।
5. API कॉल्स: फ्रंटएंड इस टोकन को सभी भविष्य के API कॉल्स के लिए Authorization हेडर में Bearer टोकन के रूप में इस्तेमाल करता है।

कोई कुकीज़ नहीं चाहिए!

🚀 इसे कैसे सेटअप करें (स्टेप-बाय-स्टेप)

यहां बताया गया है कि आप इसे अपनी लोकल मशीन पर पांच मिनट में कैसे चला सकते हैं।

1. ज़रूरी चीज़ें

आपको Docker इंस्टॉल्ड चाहिए। आपको ngrok (या ऐसी ही कोई टनलिंग सर्विस) भी चाहिए क्योंकि LTI टूल्स को ज़रूर HTTPS पर सर्व किया जाना चाहिए। आप बस localhost इस्तेमाल नहीं कर सकते।

2. रिपॉज़िटरी क्लोन करें

git clone https://github.com/paurushrai/lti-1.3-node-nextjs-template.git
cd lti-1.3-node-nextjs-template

3. एनवायरनमेंट कॉन्फ़िगर करें

एग्ज़ाम्पल एनवायरनमेंट फ़ाइल कॉपी करें:

cp lti-server/.env.example lti-server/.env

एक रैंडम सिक्योर की जनरेट करें और इसे .env के अंदर LTI_KEY में पेस्ट करें।

4. टनल शुरू करें

पोर्ट 3000 पर ngrok शुरू करें (यहीं हमारा Node सर्वर रहता है)।

ngrok http 3000

अपना https URL कॉपी करें (जैसे, https://my-tool.ngrok-free.app)।

5. ऐप चलाना

lti-server/.env फिर से खोलें और UI_URL को अपने ngrok URL पर सेट करें।

अब, Docker के साथ सब कुछ बूट करें:

docker-compose up --build

अब आपके पास है:

• LTI सर्वर: http://localhost:4000
• Next.js क्लाइंट: http://localhost:3000
• Postgres: ऑटोमैटिकली कनेक्टेड।

🔌 LMS से कनेक्ट करना (वह "मैजिक" लिंक)

पुराने ज़माने में, आपको मैन्युअली पब्लिक कीज़ और URLs कॉपी-पेस्ट करने पड़ते थे। यह प्रोजेक्ट LTI Dynamic Registration सपोर्ट करता है।

1. अपना रजिस्ट्रेशन URL कॉपी करें: https://<your-ngrok-domain>/lti/register
2. अपने LMS पर जाएं (जैसे, Canvas Admin → Developer Keys)।
3. "Dynamic Registration" चुनें।
4. URL पेस्ट करें और Register पर क्लिक करें।

बूम। 💥 टूल और LMS ऑटोमैटिकली पब्लिक कीज़ एक्सचेंज करते हैं। टूल अब इंस्टॉल हो चुका है।

🧪 फ़्लो टेस्ट करना

1. अपने LMS कोर्स में एक जेनेरिक असाइनमेंट या मॉड्यूल आइटम बनाएं।
2. "External Tool" चुनें और अपना नया टूल सिलेक्ट करें।
3. इसे लॉन्च करें।
4. आपको Next.js ऐप iframe के अंदर लोड होते दिखेगा।
5. यह दिखाएगा: "Welcome, [Your Name]" और आपका रोल (Instructor/Student)।

ऐप ने सफलतापूर्वक:

1. लॉन्च को ऑथेंटिकेट किया।
2. LTI लॉन्च डेटा से आपकी यूज़र प्रोफ़ाइल डीकोड की।
3. इसे सिक्योरली फ्रंटएंड को पास किया।

क्या आप भी सिक्योरिटी लेयर को UI से इसी तरह अलग रखेंगे?

प्रोटोकॉल लॉजिक (Node/ltijs) को ऐप्लिकेशन लॉजिक (Next.js) से अलग करना ही इसे मैनेज करने लायक बनाता है: सिक्योरिटी लेयर बोरिंग और ऑडिट करने लायक बनी रहती है, और UI एक सामान्य Next.js ऐप बना रहता है जिसे OIDC या JWKS के बारे में कुछ भी जानने की ज़रूरत नहीं होती।

अगर आप इसे फ़ोर्क करके ऐसी किसी चीज़ से शुरू करना चाहते हैं जो हैंडशेक पहले से संभालती है, तो कोड GitHub पर मौजूद है: lti-1.3-node-nextjs-template। जिज्ञासा है कि क्या किसी को ऐसा कोई मामला मिला है जहां इन दोनों लेयर्स को इस तरह अलग करना मदद करने की बजाय आड़े आया हो।