เริ่มต้นใช้งาน
ดู Web SDK ทำงานไ ด้ทันทีที่ หน้าทดลองใช้กล้องสด — การจับภาพเอกสารอัตโนมัติ, การยืนยันตัวตนใบหน้าแบบ Active Liveness, การเปรียบเทียบใบหน้า และการยืนยันตัวตนใบหน้าแบบ Passive Liveness ทั้งหมดทำงานในเบราว์เซอร์ของคุณ
iApp eKYC SDK เป็นชุด client SDK ฟรี แบบโอเพนซอร์ส (Apache-2.0) สำหรับ API eKYC ระดับองค์กรของ iApp Technology — การจับภาพบัตรประชาชนไทย/หนังสือเดินทางอัตโนมัติ, การยืนยันตัวตนใบหน้าแบบ Active Liveness, การเปรียบเทียบใบหน้า และการยืนยันตัวตนใบหน้าแบบ Passive Liveness — สำหรับ Web (HTML5/JavaScript), Flutter (Android/iOS), native iOS (Swift/Objective-C), native Android (Kotlin/Java) และ React Native
แพ็คเกจ Web และ Flutter รัน capture engine โดยตรงบนอุปกรณ์ แพ็คเกจ native iOS, Android และ React Native เป็นเพียงเปลือกบางๆ ที่ครอบ engine เว็บเดียวกัน — คุณภาพการจับภาพเหมือนกันทุกที่ โดยมีขนาด binary เพิ่มขึ้นน้อยมาก ดู iOS, Android & React Native สำหรับแพลตฟอร์มเหล่านั้น
ตัว SDK เองไม่มีค่าใช้จ่าย การเรียก API คิดค่าบริการต่อการร้องขอไปยัง API key ของ iApp ของคุณในอัตราเดียวกับการเรียก API โดยตรง — ดูหน้าความสามารถแต่ละประเภทสำหรับต้นทุนเครดิต
ซอร์สโค้ด: https://github.com/iapp-technology/iapp-ekyc-sdk
SDK ทำอะไรให้คุณบ้าง
| ความสามารถ | สิ่งที่ SDK ทำ | API ที่คิดค่าบริการ |
|---|---|---|
| การจับภาพบัตรประชาชนอัตโนมัติ | ตรวจจับขอบเขตบัตร, รอเฟรมที่คมชัดและเสถียร, แก้ไขมุมมอง, ส่งข้อมูล | 1.25 IC ด้านหน้า / 0.75 IC ด้านหลัง |
| การจับภาพหนังสือเดินทางอัตโนมัติ | engine เดียวกันท ี่ปรับแต่งสำหรับหน้าข้อมูลหนังสือเดินทาง (MRZ) | 0.75 IC |
| การจับภาพบัตรราชการอัตโนมัติ | ใบขับขี่, สมุดบัญชีธนาคาร, บัตรประชาชนพร้อมลายเซ็น | 1.0–1.25 IC/หน้า |
| การยืนยันตัวตนใบหน้าแบบ Active Liveness | การท้าทายแบบสุ่มบนอุปกรณ์, การเลือกเฟรมที่ดีที่สุด, การตัดสินใจที่เซ็นชื่อโดยเซิร์ฟเวอร์ | 1 IC |
| การเปรียบเทียบใบหน้า | การเปรียบเทียบรูปภาพใบหน้าสองรูปในการเรียกครั้งเดียว | 0.3 IC |
| การยืนยันตัวตนใบหน้าแบบ Passive Liveness | การตรวจสอบการปลอมแปลงด้วยรูปภาพเดียว | 0.3 IC |
การติดตั้ง
Flutter
เพิ่ม SDK เป็น git dependency ใน pubspec.yaml:
dependencies:
iapp_ekyc_sdk:
git:
url: https://github.com/iapp-technology/iapp-ekyc-sdk.git
path: flutter
import 'package:iapp_ekyc_sdk/iapp_ekyc_sdk.dart';
final client = IappEkycClient(apiKey: 'YOUR_API_KEY');
Web
ติดตั้งจาก npm:
npm install @iapp-technology/ekyc-sdk
import { IappEkyc } from '@iapp-technology/ekyc-sdk';
const ekyc = new IappEkyc({ apiKey: 'YOUR_API_KEY' });
หรือโหลด UMD bundle ผ่านแท็ก script ซึ่งจะเปิดเผย namespace window.IappEkyc (คลาสจะอยู่ในนั้น):
<script src="https://unpkg.com/@iapp-technology/ekyc-sdk"></script>
<script>
const ekyc = new window.IappEkyc.IappEkyc({ apiKey: 'YOUR_API_KEY' });
</script>
iOS (Swift / Objective-C)
Xcode → File → Add Package Dependencies… → https://github.com/iapp-technology/iapp-ekyc-sdk → product IappEkyc:
import IappEkyc
let config = IappEkycConfig(apiKey: "YOUR_API_KEY", flow: .documentCapture)
config.documentType = .thaiIdFront
IappEkycSdk.present(from: self, config: config) { result in /* ... */ }
การตั้งค่าเต็มรูปแบบ (สิทธิ์, Objective-C, ผลลัพธ์): iOS, Android & React Native.
Android (Kotlin / Java)
ผ่าน JitPack:
// app/build.gradle.kts — เพิ่ม maven("https://jitpack.io") ใน repositories
dependencies { implementation("com.github.iapp-technology:iapp-ekyc-sdk:v0.2.0") }
val ekyc = registerForActivityResult(IappEkycContract()) { result -> /* ... */ }
ekyc.launch(IappEkycRequest.DocumentCapture(config, EkycDocumentType.THAI_ID_FRONT))
การตั้งค่าเต็มรูปแบบ (API callback แบบ Java, ผลลัพธ์): iOS, Android & React Native.
React Native
git clone https://github.com/iapp-technology/iapp-ekyc-sdk
npm install ./iapp-ekyc-sdk/react-native react-native-webview
<IappEkycFlow flow="documentCapture" documentType="thaiIdFront"
apiKey="YOUR_API_KEY" onResult={...} onError={...} onCancel={...} />
การตั้งค่าเต็มรูปแบบ (สิทธิ์, การใช้งาน Modal): iOS, Android & React Native.
การตั้งค่า API Key
รับ API key จากหน้า การจัดการ API Key.
คีย์ใดๆ ที่รวมอยู่ในแอปพลิเคชัน client สามารถถูกดึงออกได้ (การ decompile APK, เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์) สำ หรับการใช้งานจริง ให้ใช้ รูปแบบ backend-proxy: ชี้ SDK ไปยัง backend ของคุณเองและเก็บ iApp key ไว้ฝั่งเซิร์ฟเวอร์
IappEkycClient(apiKey: '', baseUrl: 'https://your-backend.example.com/ekyc')
เมื่อ apiKey ว่างเปล่า SDK จะ ไม่ ส่ง header apikey; proxy ของคุณจะแนบคีย์จริงและส่งต่อไปยัง https://api.iapp.co.th อย่างน้อยที่สุด ให้สร้างคีย์เฉพาะสำหรับแต่ละแอปพลิเคชัน เพื่อให้สามารถเพิกถอนคีย์ที่รั่วไหลได้โดยอิสระ คำแนะนำฉบับเต็ม: SECURITY.md บน GitHub.
การปรับแต่งธีม
ทุกแพลตฟอร์มมี ธีมสีฟ้าอ่อนเริ่มต้น แบบมืออาชีพ และยอมรับการตั้งค่าใหม่ทั้งหมด ชื่อ Token และค่าเริ่มต้นเหมือนกันทุกแพลตฟอร์ม (native wrappers ส่งผ่าน Token เดียวกันผ่าน config objects):
| Token | ค่าเริ่มต้น | ใช้สำหรับ |
|---|---|---|
primary | #0284C7 | ปุ่ม, กรอบแนะนำที่ใช้งานอยู่, ความคืบหน้า |
primaryDark | #0C4A6E | หัวข้อ, ข้อความแนะนำ |
primaryLight | #BAE6FD | กรอบแนะนำที่ไม่ได้ใช้งาน, การเน้นที่ละเอียดอ่อน |
surface | #F0F9FF | หน้าต่าง, การ์ดแนะนำ |
onPrimary | #FFFFFF | ข้อความ/ไอคอนบนพื้นหลัง primary |
success | #22C55E | สี่เหลี่ยมล็อค, ความท้าทายผ่าน |
warning | #F59E0B | ถือให้นิ่ง / เบลอเกินไป |
error | #EF4444 | ความล้มเหลว |
overlayScrim | #0C4A6E ที่ 60% | overlay กล้องนอกกรอบแนะนำ |
brandDeep | #113F7B | สำเนียงแบ รนด์ iApp เสริม |
borderRadius | 16 | การ์ด, ปุ่ม, การ์ดผลลัพธ์ |
guideStrokeWidth | 3 | ความหนาเส้นขอบกรอบแนะนำ |
fontFamily | ค่าเริ่มต้นของแพลตฟอร์ม | การตั้งค่าใหม่เสริม |
Flutter — EkycTheme เป็นคลาส Immutable ธรรมดา (ไม่มี dependency กับ Theme.of):
const theme = EkycTheme.lightBlue; // ค่าเริ่มต้น
final custom = EkycTheme.lightBlue.copyWith(
primary: Color(0xFF113F7B),
borderRadius: 12,
);
DocumentCaptureView.start(context, theme: custom, ...);
Web — Tokens ถูกฉีดเป็น CSS custom properties บน element ที่ mount:
new IappEkyc({ apiKey, theme: { primary: '#113F7B', borderRadius: 12 } });
/* หรือตั้งค่าใหม่ด้วย CSS ธรรมดา */
#ekyc-mount { --iapp-ekyc-primary: #113f7b; --iapp-ekyc-border-radius: 12px; }
รายละเอียดเพิ่มเติม: THEMING.md บน GitHub.
การกำหนดภาษา
สตริง UI ทั้งหมดมีให้บริการใน ภาษาอังกฤษ, ไทย และจีน:
// Flutter
DocumentCaptureView.start(context, client: client,
documentType: DocumentType.thaiIdFront, locale: EkycLocale.th);
// Web: 'en' | 'th' | 'zh'
await ekyc.captureDocument({ mount, documentType: 'thaiIdFront', locale: 'th' });
native wrappers ยอมรับ locale เดียวกัน: config.locale = .th (iOS), .locale(EkycLocale.TH) (Android), locale="th" (React Native).
ข้อกำหนดของแพลตฟอร์ม
Flutter
- Flutter ≥ 3.32 / Dart ≥ 3.8
- Android:
minSdk 24 - iOS: 15.5+ และมีรายการ
NSCameraUsageDescriptionในInfo.plist(ดูแอปflutter/exampleใน repo สำหรับสตริงสิทธิ์ที่จำเป็น)
Web
- เบราว์เซอร์ที่ทันสมัยพร้อม WebAssembly และ
getUserMedia - ต้องใช้ HTTPS (หรือ
localhost) — เบราว์เซอร์จะบล็อกการเข้าถึงกล้องบนต้นกำเนิดที่ไม่ปลอดภัย - OpenCV/MediaPipe assets ถูกโหลดแบบ lazy เมื่อเริ่ม flow การจับภาพเท่านั้น; โฮสต์ด้วยตนเองผ่านตัวเลือก
assetBaseUrlหาก CSP ของคุณไม่อนุญาตคำขอ CDN
iOS / Android / React Native (native wrappers)
- iOS: 15+ · Swift Package Manager ·
NSCameraUsageDescriptionใน Info.plist - Android: minSdk 24 · Android System WebView ที่อัปเดตแล้ว (แนะนำ Chrome/WebView ≥ 100)
- React Native: RN ≥ 0.72 ·
react-native-webview≥ 13.6 - การเข้าถึงอินเทอร์เน็ตไปยัง
https://iapp.co.th/sdk/webview.htmlขณะรันไทม์