---
title: वेब ऐप इंटीग्रेशन
description: Web & SDK contract को client side पर कैसे integrate करें — redirect flows और iFrame SDK सेटअप।
canonical: https://developer.unico.io/hi/human-token/integrations/web/web-integration/
locale: hi
generated_by: markdown-export
---

यह पेज बताता है कि Unico journeys कैसे काम करते हैं और उन्हें किसी एप्लिकेशन में
एम्बेड करने के लिए कौन से इंटीग्रेशन मॉडल उपलब्ध हैं।

एक **journey** उन चरणों का समूह है जिनसे उपयोगकर्ता पहचान सत्यापन पूरा करने के लिए गुजरता है। उदाहरण
के लिए: एक दस्तावेज़ फोटो कैप्चर करना और फेशियल कैप्चर (liveness) करना।

Unico पूरे अनुभव का प्रबंधन करता है। इंटीग्रेशन का प्रयास न्यूनतम है: journey
**CreateProcess** के माध्यम से बनाया जाता है, उपयोगकर्ता को इसकी ओर निर्देशित किया जाता है, और अंत में परिणाम प्राप्त होता है। बीच में
सब कुछ — स्क्रीन, निर्देश, सत्यापन — पहले से Unico द्वारा निर्मित और अनुरक्षित है।

## दो इंटीग्रेशन मॉडल

प्रत्येक ग्राहक की अलग-अलग आवश्यकताएं होती हैं। Unico उपयोगकर्ता को journey की ओर निर्देशित करने के लिए **दो मॉडल** प्रदान करता है।

| मॉडल | सबसे उपयुक्त |
| ----------------- | ------------------------------------------------------------------------------------------------------------- |
| **डायरेक्ट एक्सेस** | मोबाइल एप्लिकेशन जो पहले से WebView का उपयोग करते हैं, या वेब फ्लो जहां journey मुख्य पेज के बाहर हो सकता है |
| **Journeys SDK** | वेब एप्लिकेशन जिन्हें एक एकीकृत, सहज अनुभव की आवश्यकता है, उपयोगकर्ता को एक ही वातावरण में रखते हुए |

### डायरेक्ट एक्सेस

उपयोगकर्ता को **Unico द्वारा होस्ट किए गए लिंक पर रीडायरेक्ट** किया जाता है, जहां journey होता है। पूरा होने पर,
उन्हें प्रोसेस क्रिएशन के दौरान परिभाषित URL पर वापस भेजा जाता है (`callbackUri` पैरामीटर)।

यह अपनाने का सबसे सरल तरीका है: इसमें कोई लाइब्रेरी इंस्टॉलेशन की आवश्यकता नहीं है और यह तब अच्छी तरह काम करता है
जब journey को एप्लिकेशन के अपने पेज के अंदर होने की आवश्यकता नहीं है। दूसरी ओर, उपयोगकर्ता को
क्लाइंट के वातावरण से बाहर ले जाना अधिक घर्षण और, परिणामस्वरूप, उच्च
ड्रॉप-ऑफ दर उत्पन्न करता है।

प्रोसेस बनाने के बाद, API रिस्पॉन्स में Unico द्वारा होस्ट किए गए journey का URL शामिल होता है। उपयोगकर्ता
को इसकी ओर निर्देशित करने के दो सामान्य तरीके हैं:

- **स्टैंडर्ड रीडायरेक्ट।** उपयोगकर्ता को सीधे journey URL पर रीडायरेक्ट किया जाता है। पूरा होने पर,
  Unico उन्हें प्रोसेस क्रिएशन के दौरान परिभाषित `callbackUri` पर वापस रीडायरेक्ट करता है।
- **`window.open()` के साथ नया टैब।** Journey एक नए ब्राउज़र टैब में खोला जाता है, उपयोगकर्ता को एक
  अलग संदर्भ में रखते हुए। इस मामले में, `callbackUri` में URL परिवर्तन की निगरानी करने और
  प्रोसेस पूरा होने पर टैब बंद करने की सिफारिश की जाती है। API के विवरण के लिए
  [MDN डॉक्यूमेंटेशन](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) देखें।

```mermaid
sequenceDiagram
    participant Unico as Unico backend service
    participant Backend as Customer backend server
    participant Frontend as Customer frontend application
    participant Hosted as Unico hosted frontend application

    Frontend->>Backend: start kyc flow
    Backend->>Unico: call createProcess
    Unico->>Backend: return Unico process info
    Backend->>Frontend: return Unico process info
    Frontend->>Hosted: redirect user to process url
    Note over Hosted: User journey
    Hosted->>Frontend: redirect user to callback url

    critical Get process result
        Frontend->>Backend: signals that journey was finished
        Backend->>Unico: call getProcess
        opt Webhook
            Note over Backend: In addition to getProcess, you can use the Webhook implementation to ensure a fallback in obtaining the process result.
        end
    end
```

मोबाइल एप्लिकेशन में, journey को सीधे खोलने के लिए **WebView** का उपयोग करना आम है, बिना
अतिरिक्त रीडायरेक्ट की आवश्यकता के। इस मामले में, `callbackUri` एक **deeplink** भी स्वीकार करता है, जिससे
journey के पूरा होने पर नेटिव एप्लिकेशन में एक विशिष्ट स्क्रीन खुल सकती है।
बस deeplink को रिटर्न डेस्टिनेशन के रूप में कॉन्फ़िगर करें और ऑपरेटिंग सिस्टम उपयोगकर्ता को सही
जगह पर रूट करने का काम संभालता है।

```mermaid
sequenceDiagram
    participant Unico as Unico backend service
    participant Backend as Customer backend server
    participant App as Customer mobile application
    participant Hosted as Unico hosted frontend application

    App->>Backend: start kyc flow
    Backend->>Unico: call createProcess
    Unico->>Backend: return Unico process info
    Backend->>App: return Unico process info
    App->>Hosted: open the process url in a webview
    Note over Hosted: User journey
    Hosted->>App: redirect user to the deeplink (callback url)

    critical Get process result
        App->>Backend: signals that journey was finished
        Backend->>Unico: call getProcess
        opt Webhook
            Note over Backend: In addition to getProcess, you can use the Webhook implementation to ensure a fallback in obtaining the process result.
        end
    end
```

### Journeys SDK

Journey **एप्लिकेशन के अंदर ही** होता है, उपयोगकर्ता को उनके संदर्भ से बाहर निकाले बिना।
**Journeys SDK** एप्लिकेशन में इंस्टॉल किया जाता है और आवश्यकता होने पर journey खोलने के लिए उपयोग किया जाता है।

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

Unico आधुनिक ब्राउज़रों के साथ संगत एक JavaScript लाइब्रेरी प्रदान करता है, जिससे journey को
कोड की कुछ ही पंक्तियों के साथ लगभग किसी भी एप्लिकेशन में एकीकृत किया जा सकता है।

#### संगतता

लाइब्रेरी को बिना किसी घर्षण के किसी भी प्रोजेक्ट में फिट होने के लिए डिज़ाइन किया गया है, चाहे उपयोग में कोई भी स्टैक हो:

- **कोई भी वेब एप्लिकेशन।** UMD फॉर्मेट में वितरित, यह आधुनिक बंडलरों (जैसे webpack या Vite) के माध्यम से इम्पोर्ट करने पर काम करती है। किसी भी
  फ्रेमवर्क (React, Angular, Vue) या शुद्ध JavaScript के साथ संगत।
- **आधुनिक ब्राउज़र।** लाइब्रेरी में Promises और `async/await` जैसी सुविधाओं के लिए आवश्यक
  polyfills पहले से शामिल हैं, जो पुराने ब्राउज़र संस्करणों तक भी संगतता बढ़ाती है।
- **स्टैंडर्ड वेब APIs।** Journey नेटिव ब्राउज़र क्षमताओं पर चलता है, प्रोजेक्ट में प्लगइन्स
  या बाहरी लाइब्रेरीज़ पर कोई निर्भरता नहीं।

#### SDK आंतरिक रूप से कैसे काम करता है

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

यह आर्किटेक्चरल निर्णय जानबूझकर है: iFrame आइसोलेशन सुनिश्चित करता है कि Unico journey
एप्लिकेशन की स्टाइल्स या व्यवहार में हस्तक्षेप नहीं करता। कोई स्क्रिप्ट बाहरी संदर्भ में लीक नहीं होती, कोई
CSS नियम एप्लिकेशन की अपनी स्टाइल्स से टकराता नहीं। परिणाम अंतिम उपयोगकर्ता के लिए एक सुसंगत
अनुभव और क्लाइंट के उत्पाद पर न्यूनतम प्रभाव है।

चूंकि Unico iFrame बनाने और प्रबंधित करने के लिए जिम्मेदार है, journey में सुधार — चाहे
प्रदर्शन, अनुभव या सत्यापन में — स्वचालित रूप से सभी उपयोगकर्ताओं को वितरित किए जाते हैं, बिना
एकीकृत एप्लिकेशन में किसी बदलाव की आवश्यकता के। इंटीग्रेशन हमेशा सर्वोत्तम उपलब्ध
अनुकूलन के साथ चलेगा, बिना प्रत्येक प्लेटफ़ॉर्म अपडेट को ट्रैक करने या उस पर प्रतिक्रिया करने की आवश्यकता के।

#### शुरू करना

****चरण 1** — इंस्टॉलेशन**

`idpay-b2b-sdk` पैकेज IDPay भुगतान journeys और पहचान सत्यापन journeys के बीच साझा किया जाता है।
पहचान उपयोग मामलों के लिए, नीचे दिए गए चरणों में दिखाए अनुसार `ByUnicoSDK` क्लास इम्पोर्ट करें।

```bash
  npm install idpay-b2b-sdk
```

Journeys SDK इंस्टॉल करने का अनुशंसित तरीका **npm** या **yarn** जैसे पैकेज मैनेजर के
माध्यम से है, **npm registry** पर उपलब्ध पैकेज से। इंस्टॉलेशन और डिपेंडेंसी प्रबंधन को
सरल बनाने के अलावा, यह दृष्टिकोण उपयोग में संस्करण पर स्पष्ट नियंत्रण प्रदान करता है और
नया संस्करण प्रकाशित होने पर अपडेट करना सरल बनाता है।

SDK **Semantic Versioning (SemVer)** का पालन करता है, जिसका अर्थ है कि पैच और माइनर अपडेट
ब्रेकिंग चेंजेज़ पेश नहीं करते। प्रोजेक्ट को इन अपडेट्स को स्वचालित रूप से प्राप्त करने के लिए कॉन्फ़िगर करना
सुरक्षित है। जिन परिवर्तनों के लिए इंटीग्रेशन अपडेट की आवश्यकता हो सकती है, वे मेजर संस्करणों के लिए आरक्षित हैं
और हमेशा एक माइग्रेशन गाइड के साथ आते हैं।

:::tip[SDK को अद्यतन रखना]
नवीनतम संस्करण पर बने रहना दो कारणों से विशेष रूप से महत्वपूर्ण है। पहला है **सुरक्षा**:
जब भी कमजोरियां पहचानी जाती हैं या संचार प्रोटोकॉल को मजबूत करने के अवसर सामने आते हैं,
सुरक्षा पैच प्रकाशित किए जाते हैं। एक पुराना संस्करण चलाने का अर्थ है इन सुधारों को खोना
और फ्लो को अनावश्यक जोखिम में डालना। दूसरा है **स्थिरता**: बग फिक्स उसी तरह वितरित किए जाते हैं,
और पुराने संस्करण ऐसे व्यवहार प्रदर्शित कर सकते हैं जो नए संस्करणों में पहले ही हल हो चुके हैं।
:::

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

****चरण 2** — CSP और Permissions-Policy कॉन्फ़िगर करें**

यदि आपका पेज पहले से `Content-Security-Policy` या `Permissions-Policy` हेडर भेजता है, तो SDK के iFrame, स्क्रिप्ट और कैमरा एक्सेस सही ढंग से काम करने के लिए निम्नलिखित निर्देश जोड़ें।

**Content-Security-Policy:**

```
frame-src https://*.unico.io https://*.unico.app;
script-src https://idpay.unico.io;
style-src https://idpay.unico.io;
connect-src https://api.cadastro.unico.app;
```

**Permissions-Policy:**

```
camera=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io");
geolocation=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io");
```

:::info
यदि आपका पेज CSP या Permissions-Policy हेडर नहीं भेजता है, तो आप इस चरण को छोड़ सकते हैं — ब्राउज़र डिफ़ॉल्ट रूप से कोई प्रतिबंध लागू नहीं करता।
:::

****चरण 3** — `init(options)` कॉल करें**

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

| पैरामीटर | आवश्यक | विवरण |
| --------- | -------- | ------------------------------------------------ |
| `token` | हाँ | Create Process API द्वारा लौटाया गया प्रोसेस टोकन |
| `env` | नहीं | केवल टेस्ट एनवायरनमेंट के लिए `'uat'` पर सेट करें |

```javascript
import { ByUnicoSDK } from 'idpay-b2b-sdk';

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

****चरण 4** — `open(options)` कॉल करें**

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

| पैरामीटर | आवश्यक | विवरण |
| -------------------------- | -------- | ---------------------------------------------------------- |
| `transactionId` | हाँ | Create Process API द्वारा लौटाया गया प्रोसेस ID |
| `token` | हाँ | Create Process API द्वारा लौटाया गया प्रोसेस टोकन |
| `onFinish` | हाँ | Journey समाप्त होने या बंद होने पर निष्पादित कॉलबैक |
| `onWidgetVisibilityChange` | नहीं | विजेट की दृश्यता स्थिति बदलने पर निष्पादित कॉलबैक |

एप्लिकेशन के साथ अगला इंटरैक्शन तब होता है जब journey समाप्त होता है, चाहे उपयोगकर्ता ने
इसे पूरा किया हो या बंद किया हो। उस बिंदु पर, SDK **`onFinish`** कॉलबैक को इनवोक करता है, जो `open`
में पैरामीटर के रूप में पास किया गया था। वहां से, एप्लिकेशन परिणाम जांचने के लिए **`getProcess`** API
को कॉल कर सकता है, या यदि एसिंक्रोनस दृष्टिकोण पसंद किया जाता है तो **Webhook** नोटिफिकेशन का इंतजार कर सकता है।

परिणाम की क्वेरी करने के अलावा, एप्लिकेशन की फ्रंट-एंड स्थिति को संभालने के लिए `onFinish` का उपयोग
करने की सिफारिश की जाती है:

- **लूप से बचें।** Journey समाप्त होने के तुरंत बाद उपयोगकर्ता द्वारा फ्लो को फिर से ट्रिगर करने पर
  प्रोसेस के तत्काल और अनावश्यक पुनर्निर्माण को रोकें।
- **फ्लो प्रबंधन।** सुनिश्चित करें कि उपयोगकर्ता एप्लिकेशन के अगले चरण पर निर्देशित हो, journey
  बंद होने के बाद डेड-एंड स्क्रीन से बचें।

:::warning
`onFinish` कॉलबैक संकेत देता है कि उपयोगकर्ता ने journey पूरा कर लिया है, लेकिन अनुमोदन की गारंटी नहीं देता।
प्रोसेस Unico सत्यापन नियमों में से किसी एक पर विफलता के साथ समाप्त हो सकता है।
`getProcess` के माध्यम से क्वेरी करना या Webhook नोटिफिकेशन प्राप्त करना वैकल्पिक नहीं है: ये
वास्तविक परिणाम के एकमात्र स्रोत हैं, और एप्लिकेशन का व्यवहार इन पर आधारित होना चाहिए। `onFinish`
का अकेले उपयोग यह निर्धारित करने के लिए नहीं किया जाना चाहिए कि उपयोगकर्ता को अनुमोदित किया गया था या नहीं।
:::

`onFinish` कॉलबैक एक ऑब्जेक्ट प्राप्त करता है जो बताता है कि journey कैसे समाप्त हुआ:

| फ़ील्ड | टाइप | विवरण |
| ------------------------- | ------------------- | ----------------------------------------------------------------------------------------- |
| `type` | string | Journey कैसे समाप्त हुआ: `'FINISH'` (पूर्ण) या `'CLOSE'` (उपयोगकर्ता ने पूरा करने से पहले बंद किया) |
| `transaction` | object \| undefined | `type` `'FINISH'` होने पर मौजूद; `type` `'CLOSE'` होने पर `undefined` |
| `transaction.id` | string | प्रोसेस आइडेंटिफायर (पास किए गए `transactionId` के समान) |
| `transaction.redirectUrl` | string | Journey के बाद उपयोगकर्ता को रीडायरेक्ट करने के लिए URL |

**`onWidgetVisibilityChange`** कॉलबैक को हैंडल करना वैकल्पिक है और आपके उपयोग मामले के लिए
प्रासंगिक नहीं हो सकता। यह विजेट की दृश्यता स्थिति बदलने पर इनवोक होता है, और केवल एक
विशिष्ट परिदृश्य में उपयोगी है: कुछ journeys एक पारदर्शी पृष्ठभूमि प्रदर्शित करते हैं, एप्लिकेशन पेज को
अनुभव के पीछे दृश्यमान रखते हुए। ऐसे एप्लिकेशन जो सत्यापन फ्लो के दौरान एक कस्टम मोडल प्रदर्शित करते हैं
(उदाहरण के लिए, कई KYC प्रदाताओं के बीच ऑर्केस्ट्रेशन के हिस्से के रूप में) उस मोडल को Unico
विजेट के पीछे प्रदर्शित कर सकते हैं, जिससे विज़ुअल अनुभव खराब होता है। उस स्थिति में, कॉलबैक
एप्लिकेशन को Unico journey सक्रिय होने के दौरान किसी भी अतिरिक्त विज़ुअल तत्व को दबाने और
समाप्त होने पर उन्हें पुनर्स्थापित करने देता है। यदि आपके एप्लिकेशन में कोई UI नहीं है जो विजेट को ओवरलैप
कर सकता है, तो आप इसे सुरक्षित रूप से छोड़ सकते हैं।

```javascript
ByUnicoSDK.open({
  transactionId: '9bc22bac-1e64-49a5-94d6-9e4f8ec9a1bf',
  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
  onFinish: ({ transaction, type }) => {
    if (type === 'FINISH') {
      // Journey completed (transaction = { id, redirectUrl }) — continue your flow here.
    }
    // type === 'CLOSE' → user closed before finishing;
  },
  // Optional: only needed if your app shows UI that could overlap the widget.
  onWidgetVisibilityChange: (visible) => {
    // suppress or restore your modal based on widget visibility
  },
});

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

नीचे दिया गया सीक्वेंस डायग्राम दिखाता है कि SDK और API परिणाम का उपयोग करके
iFrame को कैसे कॉन्फ़िगर करें:

```mermaid
sequenceDiagram
    participant Unico as Unico backend service
    participant Backend as Customer backend server
    participant Frontend as Customer frontend application
    participant SDK as ByUnicoSDK

    Frontend->>Backend: start kyc flow
    Backend->>Unico: call createProcess
    Unico->>Backend: return Unico process info
    Backend->>Frontend: return Unico process info
    Note over Frontend: Initialize the Unico journey as soon as it is determined that the KYC flow is required

    critical Unico journey initialization
        Frontend->>SDK: byUnicoSDK.init
        SDK-->>Frontend: validates customer domain and initialize
    end

    critical Unico journey exhibition
        Frontend->>SDK: byUnicoSDK.open
        SDK-->>Frontend: show byUnico experience
    end
    Note over SDK: User journey

    critical Unico journey completion
        SDK-->>Frontend: call onFinish
    end

    critical Get process result
        Frontend->>Backend: signals that journey was finished
        Backend->>Unico: call getProcess
        opt Webhook
            Note over Backend: In addition to getProcess, you can use the Webhook implementation to ensure a fallback in obtaining the process result.
        end
    end
```

#### सैंपल ऐप्स

| भाषा / फ्रेमवर्क | विवरण | रिपॉज़िटरी |
| --------------------- | ------------ | ---------- |
| Angular | Journeys SDK को लागू करने वाला Angular में PoC | [GitHub — unico-cbu-poc-angular](https://github.com/unico-labs/unico-cbu-poc-angular) |
| JS Vanilla | Journeys SDK को लागू करने वाला JS Vanilla में PoC | [GitHub — unico-cbu-poc-js](https://github.com/unico-labs/unico-cbu-poc-js) |
| React | Journeys SDK को लागू करने वाला React में PoC | [GitHub — unico-cbu-poc-react](https://github.com/unico-labs/unico-cbu-poc-react) |
| Vue JS | Journeys SDK को लागू करने वाला Vue JS में PoC | [GitHub — unico-cbu-poc-vuejs](https://github.com/unico-labs/unico-cbu-poc-vuejs) |

#### सुरक्षा

इस मॉडल में सुरक्षा परतों में बनी है, SDK और iFrame के अंदर चल रहे एप्लिकेशन के बीच
संचार प्रोटोकॉल से शुरू होकर।

जब journey लोड होता है, दोनों पक्ष संचार स्थापित करने के लिए एक **handshake** करते हैं। इस
प्रक्रिया में, Unico एप्लिकेशन `postMessage` के माध्यम से प्राप्त डेटा इंजेक्शन संदेश के मूल की जांच
अधिकृत डोमेन की एक बंद सूची के विरुद्ध करता है, जो वातावरण (UAT और PROD) द्वारा विभाजित है। गैर-अनुमोदित
मूल से संदेशों को तुरंत छोड़ दिया जाता है, जिससे journey को अनधिकृत पेजों में एम्बेड होने से रोका जाता है
और **clickjacking** जैसी कमजोरियों के लिए हमले की सतह समाप्त हो जाती है।

मूल सत्यापन के अलावा, फ्लो केवल एक वैध ट्रांजैक्शन टोकन के साथ आगे बढ़ता है: एक
एकल-उपयोग JWT, जो Unico बैकएंड द्वारा जारी और हस्ताक्षरित है। यह सुनिश्चित करता है कि एक अधिकृत मूल भी
एक समय-सीमा समाप्त, पुन: उपयोग किए गए, या जाली टोकन के साथ काम नहीं कर सकता।

Handshake के बाद, टोकन iFrame में इंजेक्ट किया जाता है और दोनों पक्षों के बीच कोई संवेदनशील जानकारी
प्रवाहित नहीं होती। सभी शेष संचार केवल इंटरफ़ेस नियंत्रण के लिए होता है — खोलना,
बंद करना और स्क्रीन ट्रांज़िशन — journey के दौरान प्रोसेस डेटा को इंटरसेप्ट या लीक होने से रोकता है।

iFrame आइसोलेशन रनटाइम पर Unico स्क्रिप्ट की अखंडता की भी रक्षा करता है। चूंकि कोड
पेज से अलग संदर्भ में चलता है, इसे बाहरी स्क्रिप्ट द्वारा एक्सेस या संशोधित नहीं किया जा सकता,
यह सुनिश्चित करते हुए कि journey ठीक उसी तरह निष्पादित होता है जैसा बनाया गया था, बिना किसी हस्तक्षेप के।

##### CSP और Permissions-Policy

यदि आपका पेज `Content-Security-Policy` या `Permissions-Policy` हेडर भेजता है, तो सुनिश्चित करें कि SDK के iFrame, स्क्रिप्ट और कैमरा एक्सेस सही ढंग से काम करने के लिए निम्नलिखित निर्देश मौजूद हैं।

**Content-Security-Policy:**

```
frame-src https://*.unico.io https://*.unico.app;
script-src https://idpay.unico.io;
style-src https://idpay.unico.io;
connect-src https://api.cadastro.unico.app;
```

**Permissions-Policy:**

```
camera=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io");
geolocation=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io");
```

यदि आपका पेज ये हेडर नहीं भेजता है, तो ब्राउज़र डिफ़ॉल्ट रूप से कोई प्रतिबंध लागू नहीं करता और किसी कॉन्फ़िगरेशन की आवश्यकता नहीं है।

#### SDK-विशिष्ट समस्या निवारण

यह अनुभाग इंटीग्रेशन के दौरान सामने आने वाली सबसे आम समस्याओं और उनकी जांच के
अनुशंसित तरीकों को कवर करता है।

##### अप्रत्याशित व्यवहार या टूटा हुआ फ्लो

जांचें कि कोई एप्लिकेशन स्क्रिप्ट सीधे DOM में iFrame को मैनिपुलेट तो नहीं कर रही। SDK
पेज `body` में iFrame बनाता और प्रबंधित करता है, और कोई भी बाहरी संशोधन — चाहे
स्कोप, पोज़िशनिंग या एट्रिब्यूट्स में — journey के लाइफसाइकिल में हस्तक्षेप कर सकता है और
अप्रत्याशित व्यवहार का कारण बन सकता है।

##### अपेक्षित से भिन्न विज़ुअल अनुभव

जांचें कि एप्लिकेशन की कोई ग्लोबल स्टाइलशीट iFrame के अंदर प्रॉपर्टीज़ को ओवरराइड तो नहीं कर रही।
SDK iFrame और इसके सभी आंतरिक तत्वों को डायनामिक IDs और `unico` प्रीफिक्स्ड क्लासेस के साथ बनाता है,
जो ID या क्लास सेलेक्टर्स के माध्यम से टकराव के जोखिम को काफी कम करता है। फिर भी, व्यापक
CSS नियम — जैसे टैग सेलेक्टर्स — iFrame के अंदर तत्वों तक पहुंच सकते हैं और उपयोगकर्ता
को दिए जाने वाले विज़ुअल अनुभव को बदल सकते हैं।

##### SDK लाइब्रेरी फ़ाइलें सीधे संशोधित

जांचें कि कोई लाइब्रेरी फ़ाइल पैकेज मैनेजर के बाहर संशोधित तो नहीं की गई है। लाइब्रेरी को
विशेष रूप से **npm** या **yarn** के माध्यम से प्रबंधित किया जाना चाहिए, इंस्टॉल की गई फ़ाइलों में सीधे संपादन के बिना।
मैनुअल संशोधन ऐसा असामान्य व्यवहार उत्पन्न कर सकते हैं जिसे पुन: उत्पन्न करना कठिन है और Unico
सपोर्ट को सहायता करने से रोक देगा।

#### कैप्चर टेस्ट के दौरान DevTools खुला न रखें

Unico एप्लिकेशन फेशियल कैप्चर के लिए Capture SDK (unico-webframe) का उपयोग करता है, जो खुले DevTools को संभावित धोखाधड़ी संकेत के रूप में पहचानता है और सबमिशन को ब्लॉक करता है। एंड-टू-एंड कैप्चर टेस्ट चलाने से पहले DevTools बंद करें।

:::warning[असमर्थित इंटीग्रेशन]
इस डॉक्यूमेंटेशन में वर्णित मॉडल — डायरेक्ट एक्सेस और Journeys SDK — Unico द्वारा आधिकारिक रूप से
समर्थित एकमात्र इंटीग्रेशन दृष्टिकोण हैं। इन मानकों से विचलित होने वाले इंटीग्रेशन अप्रत्याशित
व्यवहार, सुरक्षा फ्लो विफलताओं और journey में रुकावटों का कारण बन सकते हैं, और Unico सपोर्ट द्वारा
कवर नहीं किए जाएंगे।

असमर्थित दृष्टिकोणों के उदाहरण:

- मोबाइल एप्लिकेशन में **SDK को WebView के अंदर एम्बेड करना**। इन मामलों में, सही
  दृष्टिकोण **डायरेक्ट एक्सेस** मॉडल का उपयोग करना है, Journeys SDK को शामिल किए बिना WebView में
  सीधे journey लिंक खोलना।
- **Journeys SDK के माध्यम से गए बिना सीधे `<iframe>` HTML टैग के माध्यम से iFrame लोड करना**।
  iFrame SDK का एक आंतरिक कार्यान्वयन विवरण है और इसे मैन्युअल रूप से इंस्टेंशिएट नहीं किया जाना चाहिए।
  सही दृष्टिकोण **Journeys SDK** का उपयोग करना है, जो iFrame लाइफसाइकिल को सुरक्षित रूप से
  और अपेक्षित मानकों के भीतर प्रबंधित करता है।

यदि कोई दृष्टिकोण समर्थित मानक के भीतर है या नहीं, इस बारे में कोई संदेह है, तो कार्यान्वयन के
साथ आगे बढ़ने से पहले डॉक्यूमेंटेशन से परामर्श करें या सपोर्ट से संपर्क करें।
:::