\`Embed Didit identity verification into my web page using an iframe. \## Two Options \### Option A: UniLink (no backend — fastest setup) Copy your UniLink URL from Didit Console > Workflows > Copy Link. It looks like: https://verify.didit.me/u/ Embed it directly: \ ```> ⚠️ **Wajib**: Atribut `allow` wajib ada agar kamera dapat diakses selama deteksi liveness.### Manfaat Utama- **Pengaturan kurang dari 1 menit**: Tanpa backend, tanpa kunci API - **Tanpa konfigurasi tambahan**: URL callback diatur di pengaturan alur kerja - **Ideal untuk MVP**: Langsung bisa digunakan***## Iframe Sesi API (Dengan Backend)Untuk integrasi lanjutan yang memerlukan kustomisasi per sesi.### Kapan Menggunakannya- Mengirim `vendor_data` atau `metadata` kustom per sesi - Mengatur URL callback yang berbeda per sesi - Melacak sesi di sisi server sebelum verifikasi dimulai - Mengaitkan sesi dengan ID pengguna Anda### Implementasi**Langkah 1: Buat sesi (backend)**Respons pembuatan sesi menggunakan kolom bernama **`url`**. Gunakan nilai tersebut sebagai `src` iframe.```javascript theme={null} // Node.js / Express app.post('/api/create-verification', async (req, res) => { const { userId } = req.body; const response = await fetch('https://verification.didit.me/v3/session/', { method: 'POST', headers: { 'x-api-key': process.env.DIDIT_API_KEY, 'Content-Type': 'application/json', }, body: JSON.stringify({ workflow_id: process.env.DIDIT_WORKFLOW_ID, vendor_data: userId, callback: 'https://yourapp.com/verification-callback', metadata: { source: 'web-app', timestamp: Date.now() }, }), }); if (!response.ok) { return res.status(response.status).send(await response.text()); } // 201 per OpenAPI: { session_id, session_number, session_token, url, vendor_data, // metadata, status, workflow_id, workflow_version, callback } const session = await response.json(); res.json({ sessionId: session.session_id, verificationUrl: session.url }); }); ```**Langkah 2: Tanamkan dalam iframe (frontend)**```html theme={null} ```***## Mendengarkan Event (postMessage)Halaman verifikasi mengirim event ke jendela induk. Setiap pesan memiliki struktur berikut:```typescript theme={null} { type: 'didit:', // e.g. 'didit:completed' data: { /* payload */ }, // event-specific; may be undefined timestamp: 1718000000000 // ms epoch } ```Payload-nya **bersarang**. Baca `event.data.data.sessionId`, bukan `event.data.sessionId`:```javascript theme={null} window.addEventListener('message', (event) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; const { type, data } = event.data || {}; if (type === 'didit:ready') { console.log('Session ID:', data.sessionId); // available as soon as the page loads } if (type === 'didit:completed') { console.log('Done:', data.sessionId, data.status); // e.g. "Approved" | "Declined" | "In Review" // UI hint only — the canonical decision arrives on your backend via webhook } }); ```Event utama: `didit:ready` (`{ sessionId }`), `didit:started`, `didit:step_started` / `didit:step_completed` / `didit:step_changed` (`{ step, ... }`), `didit:status_updated` (`{ status }`), `didit:completed` (`{ sessionId, status }`), `didit:cancelled`, `didit:error` (`{ error, step? }`), `didit:close_request`, dan `didit:layout` (`{ contentHeight, colorScheme, dir }`, lihat [di bawah](#atur-ukuran-iframe-dari-diditlayout)). [Referensi event JavaScript SDK](https://docs.didit.me/id/integration/web-sdks/javascript-sdk.md#referensi-event) mencantumkan event verifikasi yang tersedia sebagai callback bertipe. Mulai versi 0.5.0, SDK menangani pesan tata letak secara internal dan tidak meneruskannya ke `onEvent`.### Atur ukuran iframe dari `didit:layout`Halaman verifikasi memberi tahu seberapa besar ruang yang dibutuhkannya melalui pesan `didit:layout`. Pesan ini dikirim saat halaman dimuat dan setiap kali tinggi konten, tema, atau arah teks berubah:```typescript theme={null} { type: 'didit:layout', data: { contentHeight: 612, // CSS px colorScheme: 'light', // 'light' | 'dark' dir: 'ltr' // 'ltr' | 'rtl' }, timestamp: 1718000000000 } ```| Kolom | Tipe | Deskripsi | | - | - | - | | `contentHeight` | `number` | Tinggi alami konten halaman dalam piksel CSS, termasuk bilah atas | | `colorScheme` | `'light' \| 'dark'` | Tema tempat halaman ditampilkan. Dengan White Label, warna latar belakang Anda yang menentukan, bukan pengaturan perangkat | | `dir` | `'ltr' \| 'rtl'` | Arah teks dari bahasa halaman |> [!NOTE] > > Untuk menerima `didit:layout` di iframe Anda sendiri, tambahkan `sdk_presentation=embedded` ke URL verifikasinya. Mulai versi 0.5.0, [JavaScript SDK](https://docs.didit.me/id/integration/web-sdks/javascript-sdk.md) mengatur presentasi ini secara otomatis. Tanpa parameter presentasi, halaman menggunakan tata letak mandiri dan tidak mengirim pesan tata letak.Host ini mengikuti [ukuran yang direkomendasikan](#ukuran-iframe): kartu tetap dengan lebar mulai 1024px, layar penuh pada lebar 540px ke bawah, dan di antaranya iframe selebar 500px yang mengikuti tinggi yang dilaporkan halaman:```html theme={null} ```Di antara 541px dan 1023px, contoh ini menggunakan tinggi awal 700px sampai pesan tata letak diterima, dengan batas maksimal 90% dari tinggi jendela yang terlihat. Ukuran untuk komputer dan ponsel langsung berlaku. Di ponsel, iframe menutupi seluruh jendela, jadi sediakan cara bagi pengguna untuk keluar dari verifikasi di aplikasi host Anda. Gunakan `colorScheme` dan `dir` untuk menyesuaikan kontrol apa pun di sekitar iframe dengan tema dan arah teks halaman.Jika koneksi pengguna terputus, halaman menampilkan layar "Tidak ada koneksi internet" yang akan tertutup sendiri begitu koneksi kembali. Jika pengguna memilih **Exit Verification** di layar tersebut, halaman mengirim `didit:error` dengan `error: "network_error"`, lalu `didit:cancelled`. Tutup iframe saat menerima `didit:cancelled`.***## Implementasi ModalUntuk pengalaman modal yang rapi di atas halaman Anda:### HTML/CSS/JS```html theme={null} ```***## Komponen ReactKomponen React yang dapat digunakan ulang untuk verifikasi berbasis modal:```tsx theme={null} import { useState, useEffect } from 'react'; interface DiditInContextProps { /** * Either the `url` returned by POST /v3/session/ (API session) * or your UniLink URL copied from the Console (Workflows → Copy Link). * Don't derive the UniLink yourself — the path segment is a 22-character * base64url encoding of the workflow UUID's raw bytes, not btoa(workflowId). */ verificationUrl: string; isOpen: boolean; onClose: () => void; onComplete?: (sessionId: string, status: string) => void; } export function DiditInContext({ verificationUrl, isOpen, onClose, onComplete }: DiditInContextProps) { const [iframeSrc, setIframeSrc] = useState(''); useEffect(() => { if (isOpen) { setIframeSrc(verificationUrl); document.body.style.overflow = 'hidden'; } else { setIframeSrc(''); document.body.style.overflow = ''; } }, [isOpen, verificationUrl]); // Listen for postMessage from iframe // Messages look like: { type: 'didit:', data: {...}, timestamp } useEffect(() => { const handleMessage = (event: MessageEvent) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; if (event.data?.type === 'didit:completed' && onComplete) { onComplete(event.data.data?.sessionId, event.data.data?.status); onClose(); } }; window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, [onComplete, onClose]); // Handle escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen) onClose(); }; document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, [isOpen, onClose]); if (!isOpen) return null; return (

e.target === e.currentTarget && onClose()} >