वेब कैप्चर

Human Plugin से लौटे token और link का उपयोग करके व्यक्ति को ब्राउज़र में कैप्चर से गुज़ारें।

Markdown

आपका back-end Human Plugin में Journey flow के साथ process बनाता है। 201 response में तीन मान हैं जो front-end को चाहिए:

फ़ील्ड	उपयोग
id	Human Plugin process id। SDK इसे transactionId के रूप में लेता है, और आपका back-end इसी से परिणाम पढ़ता है
token	Journeys SDK में कैप्चर शुरू करता है
link	Hosted कैप्चर पेज

token और link केवल create से लौटते हैं। इन्हें उसी अनुरोध में front-end को पास करें, या खुद संग्रहीत करें। Human Token Journey देखें।

आवश्यकताएँ

कैप्चर ब्राउज़र में चलता है और उसे कैमरा एक्सेस चाहिए।

OS	Chrome	Firefox	Safari	Samsung Internet	Opera	Edge
Windows	✅	✅	N/A	N/A	❌	❌
macOS	✅	✅	✅	N/A	❌	❌
Android	✅	❌	N/A	✅	❌	❌
iOS	✅	✅	✅	N/A	❌	❌

• पेज HTTPS पर सर्व होने चाहिए। कैमरा केवल secure context में काम करता है।
• In-app ब्राउज़िंग के लिए Android 8 (API 26) या iOS 13 या उससे नया चाहिए।
• सोशल-नेटवर्क ऐप्स के अंदर के ब्राउज़र समर्थित नहीं हैं।

मॉडल चुनें

मॉडल	किसके लिए सर्वोत्तम
Hosted link	सबसे सरल सेटअप। किसी लाइब्रेरी की ज़रूरत नहीं: व्यक्ति link पर जाता है और आपके callbackUri पर लौट आता है
Journeys SDK	कैप्चर आपके पेज के अंदर खुलता है, इसलिए व्यक्ति उसे छोड़कर कभी नहीं जाता

Hosted link

Create अनुरोध में callbackUri भेजें। यह वह पेज है जहाँ कैप्चर समाप्त होने पर व्यक्ति लौटता है।

{
  "flow": "humantoken",
  "clientId": "client-a",
  "correlationId": "order-1001",
  "credential": { "type": "DUI_TYPE_NG_BVN", "value": "<document number>" },
  "callbackUri": "https://app.example.com/capture/done"
}

फिर व्यक्ति को link पर भेजें, दो तरीकों में से किसी एक से:

• Redirect। link पर navigate करें। अंत में, व्यक्ति callbackUri पर वापस भेज दिया जाता है।
• नया टैब। window.open() से link खोलें, टैब के callbackUri पर पहुँचने पर नज़र रखें, और उसे बंद करें।

व्यक्ति के लौटने पर, अपने back-end को बताएँ, जो GET /v1/processes/{id} कॉल करता है।

Journeys SDK

SDK आपके पेज पर एक iFrame में कैप्चर खोलता है। यह किसी भी framework (React, Angular, Vue) या सादे JavaScript के साथ काम करता है।

शुरू करने से पहले, Unico सपोर्ट से अपने domains रजिस्टर करने को कहें। वे HTTPS का उपयोग करने वाले होने चाहिए।

1. इंस्टॉल करें

npm install unico-journey-sdk

SDK semantic versioning का पालन करता है, इसलिए minor और patch अपडेट लेना सुरक्षित है। इसे अप टू डेट रखें: सुरक्षा और bug fixes नए versions में आते हैं।

2. अपने headers में SDK को अनुमति दें

यदि आपका पेज कोई Content-Security-Policy या Permissions-Policy header नहीं भेजता, तो यह चरण छोड़ दें। अन्यथा, जोड़ें:

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")

3. Initialize करें

जैसे ही आपको पता चले कि कैप्चर की ज़रूरत है, init कॉल करें। यह कैप्चर को पहले से लोड कर देता है।

import { ByUnicoSDK } from 'unico-journey-sdk';

ByUnicoSDK.init({ token });

4. कैप्चर खोलें

पैरामीटर	आवश्यक	मान
transactionId	हाँ	Human Plugin का id
token	हाँ	create से मिला token
onFinish	हाँ	कैप्चर समाप्त होने या व्यक्ति के उसे बंद करने पर कॉल होता है
onWidgetVisibilityChange	नहीं	कैप्चर के दिखाए या छिपाए जाने पर कॉल होता है

ByUnicoSDK.open({
  transactionId: id, // the Human Plugin id
  token,
  onFinish: ({ type }) => {
    if (type === 'FINISH') {
      // The capture ended. Ask your back-end to read the outcome.
    }
    // type === 'CLOSE': the person closed it before the end.
  },
  // Optional: hide your own overlays while the capture is visible.
  onWidgetVisibilityChange: (visible) => {},
});

// To close it yourself:
ByUnicoSDK.close();

onFinish को मिलता है:

फ़ील्ड	विवरण
type	कैप्चर समाप्त होने पर 'FINISH', व्यक्ति के पहले बंद कर देने पर 'CLOSE'
transaction.redirectUrl	व्यक्ति को आगे कहाँ भेजना है। केवल 'FINISH' के लिए मौजूद

चेतावनी

onFinish बताता है कि कैप्चर समाप्त हुआ, यह नहीं कि कैसे। परिणाम केवल आपके back-end पर GET /v1/processes/{id} से मिलता है।

onFinish का उपयोग व्यक्ति को अगली स्क्रीन पर ले जाने के लिए भी करें, और यदि वह दोबारा शुरू करे तो तुरंत नया process बनाने से बचने के लिए भी।

समस्या निवारण

• Flow टूट जाता है या अजीब व्यवहार करता है। सुनिश्चित करें कि आपकी कोई script DOM में SDK के iFrame को नहीं बदलती।
• कैप्चर अलग दिखता है। Tag selectors जैसे व्यापक CSS नियम iFrame तक पहुँच सकते हैं। SDK के अपने ids और classes unico से शुरू होते हैं।
• अपडेट के बाद अप्रत्याशित errors। SDK को केवल npm या yarn से इंस्टॉल करें, और उसकी फ़ाइलें कभी संपादित न करें।

टेस्टिंग

कैप्चर को end to end टेस्ट करने से पहले ब्राउज़र DevTools बंद कर दें। खुला DevTools submission को ब्लॉक कर देता है।

असमर्थित सेटअप

• मोबाइल WebView के अंदर SDK। किसी ऐप में, इसके बजाय link खोलें। Android, iOS, Ionic, React Native और Flutter गाइड देखें।
• कैप्चर की ओर इशारा करता आपका अपना <iframe>। SDK का उपयोग करें, जो iFrame को प्रबंधित करता है।