SDK Verifikasi Identitas Web: JS & Iframe

Panduan ini mencakup Verifikasi identitas. Untuk login pengguna akhir, gunakan panduan platform Authentication; paket Authentication yang baru bergantung pada rilis.

Integrasikan verifikasi Didit ke dalam aplikasi web Anda. Kami menyediakan tujuh metode integrasi yang sesuai dengan arsitektur dan kebutuhan pengalaman pengguna Anda. Pilih yang sesuai dengan stack Anda.

Pilih metode integrasi Anda: Mulai dari iframe no-code yang cepat hingga kontrol pemrograman penuh dengan JavaScript SDK kami, atau plugin siap pakai untuk WordPress, Shopify, dan Salesforce.

Metode Integrasi

Metode	Waktu Pengaturan	Backend?	Paling Cocok Untuk
JavaScript SDK	3 menit	Opsional	Kontrol penuh: React/Vue/Angular/Next.js/Nuxt/Svelte/vanilla
InContext (Iframe)	< 1 menit	Opsional	Pengalaman tersemat tanpa pengalihan
Pengalihan	5 menit	Ya	Kompatibilitas maksimal, alur lintas perangkat
WebView (iOS/Android)	15 menit	Ya	Fallback mobile saat tidak ada SDK native yang tersedia
WordPress + WooCommerce	5 menit	Tanpa kode	Situs WordPress, toko WooCommerce
Shopify	5 menit	Tanpa kode	Toko Shopify: verifikasi checkout atau akun
Salesforce	10 menit	Tanpa kode	CRM Salesforce: verifikasi rekaman Contact/Lead

Rekomendasi: Untuk aplikasi web produksi, gunakan JavaScript SDK untuk UX terbaik dan kontrol pemrograman penuh. Gunakan InContext iframe untuk pengaturan tercepat, Pengalihan saat verifikasi lintas perangkat diperlukan, dan integrasi khusus WordPress / Shopify / Salesforce jika Anda menggunakan platform tersebut.

JavaScript SDK

Didit JavaScript SDK memungkinkan integrasi verifikasi secara terprogram dengan kontrol penuh atas pengalaman pengguna. Fitur Utama:

Manajemen sesi dan callback untuk event
Dukungan React, Vue, Angular, NextJS, Nuxt, Svelte, dan vanilla JS
Dukungan TypeScript penuh
Mode modal & inline

Mulai Cepat:

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'
});

→ Dokumentasi Lengkap JavaScript SDK

InContext (Iframe)

Sematkan alur verifikasi langsung di dalam aplikasi Anda menggunakan iframe. Pengalaman yang mulus tanpa mengalihkan pengguna dari situs Anda. Fitur Utama:

UniLink (tanpa backend) - pengaturan dalam < 1 menit
API Sesi (dengan backend) - kustomisasi penuh
Implementasi modal dan inline
Contoh komponen React

Mulai Cepat:

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

→ Dokumentasi Lengkap InContext

Pengalihan

Alihkan pengguna ke halaman verifikasi yang di-hosting Didit. Setelah selesai, pengguna kembali ke URL callback Anda. Fitur Utama:

Kompatibilitas browser maksimal
Dukungan verifikasi lintas perangkat
Integrasi sederhana
Berfungsi saat akses kamera iframe bermasalah

Mulai Cepat:

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

→ Dokumentasi Lengkap Pengalihan

Perbandingan

Fitur	JavaScript SDK	InContext (Iframe)	Pengalihan
Waktu pengaturan	3 mnt	< 1 mnt	5 mnt
Backend diperlukan	Opsional	Opsional	Ya
Tetap di domain Anda	Ya	Ya	Tidak
Dukungan lintas perangkat	Ya	Ya	Ya
Kontrol pemrograman penuh	Ya	Terbatas	Hanya callback
Callback event	Waktu nyata	`postMessage`	Hanya callback
White Label	Ya	Ya	Ya
Kompatibilitas browser	Semua	Semua	Semua

Ketiga metode mengirimkan hasil akhir yang ditandatangani melalui webhook. Perbandingan di atas menjelaskan UX di dalam browser, bukan cara Anda menerima keputusan verifikasi.

Konfigurasi

Izin Iframe yang Wajib

Untuk integrasi iframe InContext, selalu sertakan izin berikut:

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

Repositori Contoh

Contoh SDK Web

Contoh untuk React, Vue, Angular, Next.js, Nuxt, Svelte, dan vanilla JS

Contoh Iframe

Contoh iframe UniLink dan API sesi

Demo Next.js Lengkap

Integrasi Next.js dari awal hingga akhir

Paket NPM

@didit-protocol/sdk-web di npm

Terkait

Webhook: terima hasil verifikasi yang ditandatangani di backend Anda
Create Session API: endpoint di balik setiap SDK web
SDK Native: iOS, Android, React Native, Flutter

Panduan

Autentikasi

Model Context Protocol (MCP)

SDK Web

SDK Native

SDK Server

Integrasi

SDK Verifikasi Identitas Web: JS & Iframe

Metode Integrasi

JavaScript SDK

InContext (Iframe)

Pengalihan

Perbandingan

Konfigurasi

Izin Iframe yang Wajib

Repositori Contoh

Contoh SDK Web

Contoh Iframe

Demo Next.js Lengkap

Paket NPM

Terkait

​Metode Integrasi

​JavaScript SDK

​InContext (Iframe)

​Pengalihan

​Perbandingan

​Konfigurasi

​Izin Iframe yang Wajib

​Repositori Contoh

Contoh SDK Web

Contoh Iframe

Demo Next.js Lengkap

Paket NPM

​Terkait

Metode Integrasi

JavaScript SDK

InContext (Iframe)

Pengalihan

Perbandingan

Konfigurasi

Izin Iframe yang Wajib

Repositori Contoh

Terkait