वेब ऐप इंटीग्रेशन

यह पृष्ठ Web & SDK contract के लिए दो client-side integration दृष्टिकोण को कवर करता है: उपयोगकर्ता को Unico-होस्टेड journey पर redirect करना, और iFrame SDK के माध्यम से journey को embed करना।

उपयोगकर्ता को redirect करना

एक process बनाने के बाद, response में एक URL शामिल होता है जो Unico-होस्टेड journey की ओर इशारा करता है। उपयोगकर्ता को capture अनुभव तक पहुंचाने के लिए इस URL का उपयोग करें। इस transition को प्रबंधित करने के दो तरीके हैं:

1. Standard redirect

उपयोगकर्ता को सीधे journey URL पर redirect करें। जब उपयोगकर्ता process पूरी करता है, Unico उन्हें उस URL पर वापस redirect करता है जो आपने process निर्माण के दौरान निर्दिष्ट किया था।

2. window.open() के साथ नया tab

Journey को एक नए browser tab में खोलें ताकि उपयोगकर्ता एक अलग context में रहे। अपने return URL में URL परिवर्तन की निगरानी करें और जब process पूरी हो जाए तो tab बंद करें।

window.open() API के विवरण के लिए, MDN दस्तावेज़ीकरण देखें।

iFrame

चेतावनी

इस दस्तावेज़ीकरण में मानकों का पालन न करने वाले integrations अप्रत्याशित रुकावटें पैदा कर सकते हैं और Unico support द्वारा कवर नहीं किए जाएंगे।

असमर्थित दृष्टिकोणों के उदाहरण: SDK को WebView के अंदर embed करना, या HTML tag के माध्यम से सीधे iFrame लोड करना।

कैसे शुरू करें

चरण 1 — Installation

by Unico SDK IDPay के समान package का उपयोग करता है:

npm install idpay-b2b-sdk

टिप

किसी विशिष्ट संस्करण को pin किए बिना install करें ताकि आपका package manager हमेशा नवीनतम minor और patch releases स्वचालित रूप से प्राप्त करे।

शुरू करने से पहले, Unico support team के साथ अपने domains पंजीकृत करें। सभी domains HTTPS का उपयोग करने चाहिए।

चरण 2 — init(options) call करें

SDK को initialize करता है और assets pre-load करता है, अंतिम उपयोगकर्ता के लिए एक सुचारू अनुभव बनाता है। इसे अपने flow में जितनी जल्दी हो सके call करें।

Parameter	आवश्यक	विवरण
type	हाँ	by Unico flows के लिए 'IFRAME' पर सेट करें
token	हाँ	Create Process API द्वारा लौटाया गया process token
env	नहीं	केवल test environments के लिए 'uat' पर सेट करें

import { ByUnicoSDK } from "idpay-b2b-sdk";

ByUnicoSDK.init({
  type: 'IFRAME',
  token,
  // env: 'uat' // only for test environments
});

चरण 3 — open(options) call करें

Pre-loaded iFrame प्रदर्शित करता है और आपके page और Unico journey के बीच message flow शुरू करता है।

Parameter	आवश्यक	विवरण
transactionId	हाँ	Create Process API द्वारा लौटाया गया process ID
token	हाँ	Create Process API द्वारा लौटाया गया process token
onFinish	हाँ	Journey समाप्त होने या बंद होने पर निष्पादित callback

onFinish callback को transaction ID, एक redirect URL और completion type के साथ एक process object प्राप्त होता है।

ByUnicoSDK.open({
  transactionId: '9bc22bac-1e64-49a5-94d6-9e4f8ec9a1bf',
  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
  onFinish: (process) => {
    console.log('Process finished', process);
    // process.transaction.redirectUrl — use this to navigate the user
  },
});

// To close the SDK explicitly at any point:
ByUnicoSDK.close();

नीचे दिया गया sequence diagram दर्शाता है कि iFrame को configure करने के लिए SDK और API result का उपयोग कैसे करें:

Security

CSP के बजाय auth token के साथ iFrame समाधान चुनें

सावधानीपूर्वक विश्लेषण के बाद, चुना गया दृष्टिकोण Content Security Policy (CSP) लागू करने के बजाय authentication tokens के साथ iFrames का उपयोग करता है। यह निर्णय सुरक्षा आवश्यकताओं और client की मांगों को पूरा करने के लिए आवश्यक लचीलेपन से प्रेरित था।

CSP के साथ संदर्भ और चुनौतियाँ

Content Security Policy XSS और code injection attacks के विरुद्ध web applications की सुरक्षा के लिए एक शक्तिशाली tool है। हालाँकि, CSP policy configure करने के लिए trusted domains की एक सख्त सूची परिभाषित करने की आवश्यकता होती है। यह दृष्टिकोण तब प्रभावी होता है जब domains निश्चित और अनुमानित हों — लेकिन उन clients के लिए जो dynamic और परिवर्तनशील domains का उपयोग करते हैं, यह कठोर configuration महत्वपूर्ण चुनौतियाँ प्रस्तुत करती है।

Dynamic domains के साथ भेद्यता

Dynamic domains CSP का उपयोग करते समय एक पर्याप्त सुरक्षा जोखिम उत्पन्न करते हैं। जब किसी client के domains बार-बार बदलते हैं या dynamically बनाए जाते हैं, तो CSP policy को नए domains शामिल करने के लिए लगातार update करना पड़ता है। यह न केवल रखरखाव का बोझ बढ़ाता है बल्कि policy में सूचीबद्ध प्रत्येक domain को एक संभावित attack surface के रूप में उजागर करता है यदि पर्याप्त रूप से प्रबंधित नहीं किया गया।

iFrame और auth token के साथ समाधान

इन जोखिमों को कम करने और clients द्वारा आवश्यक लचीलेपन को पूरा करने के लिए, चुना गया समाधान iFrames को authentication tokens के साथ जोड़ता है, जो एक static domain list की आवश्यकता के बिना सुरक्षा की एक अतिरिक्त परत प्रदान करता है।

यह कैसे काम करता है:

• सुरक्षित प्रमाणीकरण — प्रत्येक iFrame प्रति transaction एक अद्वितीय authentication token के साथ load होता है, यह सुनिश्चित करता है कि केवल authorized users ही content तक पहुंच सकते हैं। Token को real-time में verify किया जाता है।
• Content isolation — iFrame एक अलग browsing context में चलता है, विभिन्न origins के बीच हस्तक्षेप के जोखिम को कम करता है और संभावित attacks को कम करता है।
• Dynamic domains के लिए लचीलापन — एक static CSP policy पर निर्भर न होकर, समाधान लगातार policy updates की आवश्यकता के बिना dynamic client domains के अनुकूल होता है।