> ## Documentation Index
> Fetch the complete documentation index at: https://docs.didit.me/llms.txt
> Use this file to discover all available pages before exploring further.

# वेब पहचान सत्यापन SDK: JS और iframe

> Didit के KYC, KYB, AML और लाइवनेस वेब SDK: JavaScript, iframe, रीडायरेक्ट, WebView। प्रति KYC जाँच $0.33 से, $10 मासिक निःशुल्क, कोई अनुबंध नहीं।

> [!NOTE]
>
> ये गाइड पहचान सत्यापन को कवर करती हैं। एंड-यूज़र साइन-इन के लिए [Authentication platform guides](https://docs.didit.me/hi/authentication/overview.md) का उपयोग करें; नए Authentication पैकेज रिलीज़ पर निर्भर हैं।

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

> [!NOTE]
>
> **अपना इंटीग्रेशन तरीका चुनें**: त्वरित नो-कोड iframes से लेकर हमारे JavaScript SDK के साथ पूर्ण प्रोग्रामैटिक नियंत्रण तक, या WordPress, Shopify और Salesforce के लिए तैयार प्लगइन्स।

***

## इंटीग्रेशन के तरीके

| तरीका | सेटअप समय | बैकएंड? | इसके लिए सर्वोत्तम |
| - | - | - | - |
| [JavaScript SDK](https://docs.didit.me/hi/integration/web-sdks/javascript-sdk.md) | 3 मिनट | वैकल्पिक | पूर्ण नियंत्रण — React/Vue/Angular/Next.js/Nuxt/Svelte/vanilla |
| [InContext (Iframe)](https://docs.didit.me/hi/integration/web-sdks/incontext-iframe.md) | \< 1 मिनट | वैकल्पिक | रीडायरेक्ट के बिना एम्बेडेड अनुभव |
| [Redirect](https://docs.didit.me/hi/integration/web-sdks/web-redirect.md) | 5 मिनट | हाँ | अधिकतम संगतता, क्रॉस-डिवाइस फ़्लो |
| [WebView (iOS/Android)](https://docs.didit.me/hi/integration/web-sdks/webview-in-ios-android.md) | 15 मिनट | हाँ | जब कोई नेटिव SDK उपलब्ध न हो तो मोबाइल फ़ॉलबैक |
| [WordPress + WooCommerce](https://docs.didit.me/hi/integration/web-sdks/wordpress-woocommerce.md) | 5 मिनट | नो-कोड | WordPress साइट्स, WooCommerce स्टोर |
| [Shopify](https://docs.didit.me/hi/integration/web-sdks/shopify.md) | 5 मिनट | नो-कोड | Shopify स्टोर — चेकआउट या खाता सत्यापन |
| [Salesforce](https://docs.didit.me/hi/integration/web-sdks/salesforce.md) | 10 मिनट | नो-कोड | Salesforce CRM — Contact/Lead रिकॉर्ड सत्यापन |

> [!NOTE]
>
> **सिफारिश**: प्रोडक्शन वेब ऐप्स के लिए, सर्वोत्तम UX और पूर्ण प्रोग्रामैटिक नियंत्रण हेतु **JavaScript SDK** का उपयोग करें। सबसे त्वरित सेटअप के लिए **InContext iframe** का उपयोग करें, क्रॉस-डिवाइस सत्यापन की आवश्यकता होने पर **Redirect** का उपयोग करें, और यदि आप उन प्लेटफ़ॉर्म पर काम करते हैं तो समर्पित **WordPress / Shopify / Salesforce** इंटीग्रेशन का उपयोग करें।

***

## JavaScript SDK

Didit JavaScript SDK उपयोगकर्ता अनुभव पर पूर्ण नियंत्रण के साथ सत्यापन को इंटीग्रेट करने का प्रोग्रामैटिक तरीका देता है।

**मुख्य विशेषताएँ:**

* सत्र प्रबंधन और इवेंट कॉलबैक
* React, Vue, Angular, NextJS, Nuxt, Svelte और vanilla JS समर्थन
* पूर्ण TypeScript समर्थन
* मोडल और इनलाइन मोड

**त्वरित शुरुआत:**

```javascript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

DiditSdk.shared.onComplete = (result) => {
  switch (result.type) {
    case 'completed':
      console.log('Verification completed!');
      console.log('Session ID:', result.session?.sessionId);
      console.log('Status:', result.session?.status);
      break;
    case 'cancelled':
      console.log('User cancelled verification');
      break;
    case 'failed':
      console.error('Verification failed:', result.error?.message);
      break;
  }
};

// Start verification with the `url` returned by POST /v3/session/ (or your UniLink)
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/session/3FaJ9wLqX2Mz'
});
```

→ [**JavaScript SDK का पूरा दस्तावेज़**](https://docs.didit.me/hi/integration/web-sdks/javascript-sdk.md)

***

## InContext (Iframe)

iframe का उपयोग करके सत्यापन फ़्लो को सीधे आपके एप्लिकेशन के भीतर एम्बेड करें। उपयोगकर्ताओं को आपकी साइट से बाहर रीडायरेक्ट किए बिना सहज अनुभव।

**मुख्य विशेषताएँ:**

* UniLink (बैकएंड आवश्यक नहीं) - \< 1 मिनट में सेटअप
* API Session (बैकएंड के साथ) - पूर्ण कस्टमाइज़ेशन
* मोडल और इनलाइन कार्यान्वयन
* React कॉम्पोनेंट के उदाहरण

**त्वरित शुरुआत:**

```html theme={null}
<iframe 
  src="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64"
  style="width: 100%; height: 700px; border: none;" 
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
></iframe>
```

→ [**InContext का पूरा दस्तावेज़**](https://docs.didit.me/hi/integration/web-sdks/incontext-iframe.md)

***

## Redirect

उपयोगकर्ताओं को Didit-होस्टेड सत्यापन पेज पर भेजें। पूरा होने के बाद, उपयोगकर्ता आपके कॉलबैक URL पर वापस आते हैं।

**मुख्य विशेषताएँ:**

* अधिकतम ब्राउज़र संगतता
* क्रॉस-डिवाइस सत्यापन समर्थन
* सरल इंटीग्रेशन
* iframe कैमरा एक्सेस में समस्या होने पर भी काम करता है

**त्वरित शुरुआत:**

```javascript theme={null}
// After creating a session via your backend
window.location.href = verificationUrl;
```

→ [**Redirect का पूरा दस्तावेज़**](https://docs.didit.me/hi/integration/web-sdks/web-redirect.md)

***

## तुलना

| सुविधा | JavaScript SDK | InContext (Iframe) | Redirect |
| - | - | - | - |
| सेटअप समय | 3 मिनट | \< 1 मिनट | 5 मिनट |
| बैकएंड आवश्यक | वैकल्पिक | वैकल्पिक | हाँ |
| आपके डोमेन पर रहता है | हाँ | हाँ | नहीं |
| क्रॉस-डिवाइस समर्थन | हाँ | हाँ | हाँ |
| पूर्ण प्रोग्रामैटिक नियंत्रण | हाँ | सीमित | केवल कॉलबैक |
| इवेंट कॉलबैक | रीयल-टाइम | `postMessage` | केवल कॉलबैक |
| व्हाइट लेबल | हाँ | हाँ | हाँ |
| ब्राउज़र संगतता | सभी | सभी | सभी |

> [!NOTE]
>
> तीनों तरीके [webhook](https://docs.didit.me/hi/integration/webhooks.md) के माध्यम से अंतिम, हस्ताक्षरित परिणाम देते हैं — ऊपर की तुलना इन-ब्राउज़र UX का वर्णन करती है, न कि आप सत्यापन निर्णय कैसे प्राप्त करते हैं।

***

## कॉन्फ़िगरेशन

### आवश्यक iframe अनुमतियाँ

InContext iframe इंटीग्रेशन के लिए, हमेशा ये अनुमतियाँ शामिल करें:

```html theme={null}
allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
```

***

## उदाहरण रिपॉज़िटरीज़

> [card] [SDK वेब उदाहरण](https://github.com/didit-protocol/sdk-web-examples)
>
> React, Vue, Angular, Next.js, Nuxt, Svelte और vanilla JS के उदाहरण

> [card] [iframe उदाहरण](https://github.com/didit-protocol/iframe-example)
>
> UniLink और API-सत्र iframe के उदाहरण

> [card] [पूर्ण Next.js डेमो](https://github.com/didit-protocol/didit-full-demo)
>
> एंड-टू-एंड Next.js इंटीग्रेशन

> [card] [NPM पैकेज](https://www.npmjs.com/package/@didit-protocol/sdk-web)
>
> npm पर `@didit-protocol/sdk-web`

## संबंधित

* [Webhooks](https://docs.didit.me/hi/integration/webhooks.md) — अपने बैकएंड पर हस्ताक्षरित सत्यापन परिणाम प्राप्त करें
* [Create Session API](https://docs.didit.me/hi/sessions-api/create-session.md) — हर वेब SDK के पीछे का एंडपॉइंट
* [Native SDKs](https://docs.didit.me/hi/integration/native-sdks/overview.md) — iOS, Android, React Native, Flutter


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.