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

ये गाइड पहचान सत्यापन को कवर करती हैं। एंड-यूज़र साइन-इन के लिए Authentication platform guides का उपयोग करें; नए Authentication पैकेज रिलीज़ पर निर्भर हैं।

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

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

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

तरीका	सेटअप समय	बैकएंड?	इसके लिए सर्वोत्तम
JavaScript SDK	3 मिनट	वैकल्पिक	पूर्ण नियंत्रण — React/Vue/Angular/Next.js/Nuxt/Svelte/vanilla
InContext (Iframe)	< 1 मिनट	वैकल्पिक	रीडायरेक्ट के बिना एम्बेडेड अनुभव
Redirect	5 मिनट	हाँ	अधिकतम संगतता, क्रॉस-डिवाइस फ़्लो
WebView (iOS/Android)	15 मिनट	हाँ	जब कोई नेटिव SDK उपलब्ध न हो तो मोबाइल फ़ॉलबैक
WordPress + WooCommerce	5 मिनट	नो-कोड	WordPress साइट्स, WooCommerce स्टोर
Shopify	5 मिनट	नो-कोड	Shopify स्टोर — चेकआउट या खाता सत्यापन
Salesforce	10 मिनट	नो-कोड	Salesforce CRM — Contact/Lead रिकॉर्ड सत्यापन

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

JavaScript SDK

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

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

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

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 का पूरा दस्तावेज़

InContext (Iframe)

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

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

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

<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 का पूरा दस्तावेज़

Redirect

उपयोगकर्ताओं को Didit-होस्टेड सत्यापन पेज पर भेजें। पूरा होने के बाद, उपयोगकर्ता आपके कॉलबैक URL पर वापस आते हैं। मुख्य विशेषताएँ:

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

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

// After creating a session via your backend
window.location.href = verificationUrl;

→ Redirect का पूरा दस्तावेज़

तुलना

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

तीनों तरीके webhook के माध्यम से अंतिम, हस्ताक्षरित परिणाम देते हैं — ऊपर की तुलना इन-ब्राउज़र UX का वर्णन करती है, न कि आप सत्यापन निर्णय कैसे प्राप्त करते हैं।

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

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

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

allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"

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

SDK वेब उदाहरण

React, Vue, Angular, Next.js, Nuxt, Svelte और vanilla JS के उदाहरण

iframe उदाहरण

UniLink और API-सत्र iframe के उदाहरण

पूर्ण Next.js डेमो

एंड-टू-एंड Next.js इंटीग्रेशन

NPM पैकेज

npm पर @didit-protocol/sdk-web

गाइड

प्रमाणीकरण

Model Context Protocol (MCP)

वेब SDK

नेटिव SDK

सर्वर SDK

इंटीग्रेशन

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

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

JavaScript SDK

InContext (Iframe)

Redirect

तुलना

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

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

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

SDK वेब उदाहरण

iframe उदाहरण

पूर्ण Next.js डेमो

NPM पैकेज

संबंधित

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

​JavaScript SDK

​InContext (Iframe)

​Redirect

​तुलना

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

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

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

SDK वेब उदाहरण

iframe उदाहरण

पूर्ण Next.js डेमो

NPM पैकेज

​संबंधित

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

JavaScript SDK

InContext (Iframe)

Redirect

तुलना

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

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

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

संबंधित