---
title: Capture web
description: Jalankan capture alur Journey di aplikasi web, dengan tautan hosted atau Journeys SDK, menggunakan hasil create dari Human Plugin.
canonical: https://developer.unico.io/id/human-plugin/integrations/web
locale: id
generated_by: markdown-export
---

# Capture web

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

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](/id/human-plugin/integrations/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](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
- 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.

```json
{
  "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()`](https://developer.mozilla.org/en-US/docs/Web/API/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}`.

```mermaid
sequenceDiagram
  participant F as Your front-end
  participant B as Your back-end
  participant H as Human Plugin
  participant P as Hosted page
  F->>B: start the capture
  B->>H: POST /v1/processes (Journey flow, callbackUri)
  H-->>B: 201, id + token + link
  B-->>F: id + link
  F->>P: open link
  Note over P: capture
  P-->>F: back to callbackUri
  F->>B: capture ended
  B->>H: GET /v1/processes/{id}
  H-->>B: 200, final state
```

### 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

```bash
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.

```javascript
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 |

```javascript
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.

```mermaid
sequenceDiagram
  participant F as Your front-end
  participant S as Journeys SDK
  participant B as Your back-end
  participant H as Human Plugin
  F->>B: start the capture
  B->>H: POST /v1/processes (Journey flow)
  H-->>B: 201, id + token + link
  B-->>F: id + token
  F->>S: init({ token })
  F->>S: open({ transactionId: id, token, onFinish })
  Note over S: capture
  S-->>F: onFinish
  F->>B: capture ended
  B->>H: GET /v1/processes/{id}
  H-->>B: 200, final state
```

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

> **Informasi: Pengujian**
>
> Tutup DevTools browser sebelum menguji capture secara menyeluruh. DevTools yang terbuka akan memblokir pengiriman.

> **Peringatan: Pengaturan yang tidak didukung**
>
> - **SDK di dalam WebView seluler.** Di dalam aplikasi, buka `link`. Lihat panduan [Android](/id/human-plugin/integrations/android), [iOS](/id/human-plugin/integrations/ios), [Ionic](/id/human-plugin/integrations/ionic), [React Native](/id/human-plugin/integrations/react-native) dan [Flutter](/id/human-plugin/integrations/flutter).
> - **`<iframe>` Anda sendiri yang mengarah ke capture.** Gunakan SDK, yang mengelola iFrame.