Capture web

Arahkan pengguna menjalani capture di browser, menggunakan token dan tautan yang dikembalikan oleh Human Plugin.

Markdown

Back-end Anda membuat proses di Human Plugin dengan alur Journey. Respons 201 berisi tiga nilai yang dibutuhkan front-end:

Field	Kegunaan
id	ID proses Human Plugin. SDK menerimanya sebagai transactionId, dan back-end Anda membaca hasilnya dengannya
token	Memulai capture di Journeys SDK
link	Halaman capture hosted

token dan link dikembalikan hanya oleh create. Teruskan keduanya ke front-end dalam permintaan yang sama, atau simpan sendiri. Lihat Human Token Journey.

Persyaratan

Capture berjalan di browser dan membutuhkan akses kamera.

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

• Halaman harus disajikan melalui HTTPS. Kamera hanya berfungsi dalam secure context.
• Penjelajahan dalam aplikasi membutuhkan Android 8 (API 26) atau iOS 13 atau lebih baru.
• Browser di dalam aplikasi jejaring sosial tidak didukung.

Pilih model

Model	Paling cocok untuk
Tautan hosted	Pengaturan paling sederhana. Tanpa library: pengguna membuka link lalu kembali ke callbackUri Anda
Journeys SDK	Capture dibuka di dalam halaman Anda, sehingga pengguna tidak pernah meninggalkannya

Tautan hosted

Kirim callbackUri dalam permintaan create. Ini adalah halaman tujuan pengguna kembali saat capture selesai.

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

Lalu arahkan pengguna ke link, dengan salah satu dari dua cara:

• Redirect. Navigasikan ke link. Di akhir, pengguna dikembalikan ke callbackUri.
• Tab baru. Buka link dengan window.open(), pantau hingga tab mencapai callbackUri, lalu tutup tab tersebut.

Setelah pengguna kembali, beri tahu back-end Anda, yang memanggil GET /v1/processes/{id}.

Journeys SDK

SDK membuka capture dalam iFrame di halaman Anda. SDK ini berfungsi dengan framework apa pun (React, Angular, Vue) atau JavaScript biasa.

Sebelum memulai, minta dukungan Unico untuk mendaftarkan domain Anda. Domain tersebut harus menggunakan HTTPS.

1. Instal

npm install unico-journey-sdk

SDK mengikuti semantic versioning, sehingga pembaruan minor dan patch aman untuk diambil. Selalu perbarui SDK: perbaikan keamanan dan bug dirilis dalam versi baru.

2. Izinkan SDK di header Anda

Lewati langkah ini jika halaman Anda tidak mengirim header Content-Security-Policy atau Permissions-Policy. Jika mengirim, tambahkan:

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. Inisialisasi

Panggil init segera setelah Anda tahu capture dibutuhkan. Ini memuat capture lebih awal.

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

ByUnicoSDK.init({ token });

4. Buka capture

Parameter	Wajib	Nilai
transactionId	Ya	id Human Plugin
token	Ya	token dari create
onFinish	Ya	Dipanggil saat capture selesai atau pengguna menutupnya
onWidgetVisibilityChange	Tidak	Dipanggil saat capture ditampilkan atau disembunyikan

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 menerima:

Field	Deskripsi
type	'FINISH' saat capture selesai, 'CLOSE' saat pengguna menutupnya lebih dulu
transaction.redirectUrl	Tujuan berikutnya bagi pengguna. Hanya ada untuk 'FINISH'

peringatan

onFinish menyatakan bahwa capture selesai, bukan bagaimana hasilnya. Hasil hanya diperoleh dari GET /v1/processes/{id} di back-end Anda.

Gunakan onFinish juga untuk memindahkan pengguna ke layar berikutnya, dan untuk menghindari pembuatan proses baru secara langsung jika mereka memulai lagi.

Pemecahan masalah

• Alur rusak atau berperilaku aneh. Pastikan tidak ada skrip Anda yang mengubah iFrame SDK di DOM.
• Tampilan capture berbeda. Aturan CSS yang luas, seperti selektor tag, dapat memengaruhi iFrame. Id dan class milik SDK diawali dengan unico.
• Error tak terduga setelah pembaruan. Instal SDK hanya melalui npm atau yarn, dan jangan pernah mengedit file-nya.

Pengujian

Tutup DevTools browser sebelum menguji capture secara menyeluruh. DevTools yang terbuka akan memblokir pengiriman.

Pengaturan yang tidak didukung

• SDK di dalam WebView seluler. Di dalam aplikasi, buka link. Lihat panduan Android, iOS, Ionic, React Native dan Flutter.
• <iframe> Anda sendiri yang mengarah ke capture. Gunakan SDK, yang mengelola iFrame.