Skip to main content

🚀 เริ่มต้นใช้งาน

ทดลองใช้งานจริง — ไม่ต้องเขียนโค้ด

ชมการทำงานของ Web SDK ได้ทันทีที่**หน้าเดโมกล้องสด** — การถ่ายภาพเอกสารอัตโนมัติ การตรวจสอบความมีชีวิตของใบหน้าแบบแอคทีฟ การยืนยันตัวตนด้วยใบหน้า และการตรวจสอบความมีชีวิตแบบพาสซีฟ ทั้งหมดทำงานในเบราว์เซอร์ของคุณ

iApp eKYC SDK คือชุด SDK ฝั่งไคลเอนต์แบบโอเพนซอร์สฟรี (Apache-2.0) สำหรับ eKYC APIs ระดับองค์กรของ บริษัท ไอแอพพ์เทคโนโลยี — การถ่ายภาพบัตรประชาชนไทย / หนังสือเดินทางอัตโนมัติ การตรวจสอบความมีชีวิตของใบหน้าแบบแอคทีฟ การยืนยันตัวตนด้วยใบหน้า และการตรวจสอบความมีชีวิตแบบพาสซีฟ — สำหรับ เว็บ (HTML5/JavaScript), Flutter (Android/iOS), iOS เนทีฟ (Swift/Objective-C), Android เนทีฟ (Kotlin/Java) และ React Native

แพ็กเกจเว็บและ Flutter รันเอนจินการถ่ายภาพบนอุปกรณ์โดยตรง ส่วนแพ็กเกจ iOS, Android และ React Native เนทีฟเป็นเชลล์ขนาดเบาที่ใช้เอนจินเว็บตัวเดียวกัน — คุณภาพการถ่ายภาพเหมือนกันทุกแพลตฟอร์ม โดยแทบไม่เพิ่มขนาดแอป ดูรายละเอียดที่ iOS, Android และ React Native

ตัว SDK ไม่มีค่าใช้จ่ายใดๆ การเรียก API จะคิดค่าบริการต่อคำขอผ่านคีย์ API ของ iApp ของคุณ ในอัตราเดียวกับการเรียก API โดยตรง — ดูต้นทุนเครดิตได้ที่หน้าของแต่ละความสามารถ

ซอร์สโค้ด: https://github.com/iapp-technology/iapp-ekyc-sdk

SDK ทำอะไรให้คุณบ้าง

ความสามารถสิ่งที่ SDK ทำให้API ที่คิดค่าบริการ
🪪 ถ่ายภาพบัตรประชาชนอัตโนมัติตรวจจับขอบบัตร รอเฟรมที่คมชัดและนิ่ง แก้ไขมุมมองภาพ แล้วส่งข้อมูล1.25 IC ด้านหน้า / 0.75 IC ด้านหลัง
🛂 ถ่ายภาพหนังสือเดินทางอัตโนมัติเอนจินเดียวกันที่ปรับจูนสำหรับหน้าข้อมูลหนังสือเดินทาง (MRZ)0.75 IC
📇 ถ่ายภาพบัตรราชการอัตโนมัติใบขับขี่ สมุดบัญชีธนาคาร สำเนาบัตรประชาชนพร้อมลายเซ็น1.0–1.25 IC/หน้า
🙂 การตรวจสอบความมีชีวิตของใบหน้าแบบแอคทีฟท่าทางแบบสุ่มบนอุปกรณ์ การเลือกเฟรมที่ดีที่สุด ผลตัดสินที่ลงลายเซ็นโดยเซิร์ฟเวอร์1 IC
👥 การยืนยันตัวตนด้วยใบหน้าเปรียบเทียบภาพใบหน้าสองภาพด้วยการเรียกครั้งเดียว0.3 IC
🛡️ การตรวจสอบความมีชีวิตของใบหน้าแบบพาสซีฟตรวจสอบการปลอมแปลงจากภาพเดียว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');

เว็บ

ติดตั้งจาก npm:

npm install @iapp-technology/ekyc-sdk
import { IappEkyc } from '@iapp-technology/ekyc-sdk';

const ekyc = new IappEkyc({ apiKey: 'YOUR_API_KEY' });

หรือโหลดบันเดิล UMD ผ่านแท็ก script ซึ่งจะเปิดให้ใช้งานเนมสเปซ 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

รับคีย์ API ได้จากหน้า การจัดการ API Key

อย่าฝังคีย์ของคุณไว้ในไคลเอนต์ที่เผยแพร่

คีย์ใดๆ ที่ฝังอยู่ในแอปฝั่งไคลเอนต์สามารถถูกดึงออกมาได้ (การถอดรหัส APK, เครื่องมือนักพัฒนาในเบราว์เซอร์) สำหรับการใช้งานจริง กรุณาใช้ รูปแบบ backend-proxy: ชี้ SDK ไปยังแบ็กเอนด์ของคุณเอง และเก็บคีย์ iApp ไว้ฝั่งเซิร์ฟเวอร์

IappEkycClient(apiKey: '', baseUrl: 'https://your-backend.example.com/ekyc')

เมื่อ apiKey เป็นค่าว่าง SDK จะ ไม่ ส่ง header apikey ใดๆ พร็อกซีของคุณจะแนบคีย์จริงแล้วส่งต่อไปยัง https://api.iapp.co.th อย่างน้อยที่สุด กรุณาสร้างคีย์แบบจำกัดสิทธิ์เฉพาะสำหรับแต่ละแอป เพื่อให้สามารถเพิกถอนคีย์ที่รั่วไหลได้อย่างอิสระ ดูแนวทางฉบับเต็ม: SECURITY.md บน GitHub

การปรับแต่งธีม

ทุกแพลตฟอร์มมาพร้อม ธีมเริ่มต้นสีฟ้าอ่อน ที่ดูเป็นมืออาชีพเหมือนกัน และรองรับการปรับแต่งได้ทั้งหมด ชื่อโทเค็นและค่าเริ่มต้นเหมือนกันทุกแพลตฟอร์ม (แรปเปอร์เนทีฟส่งโทเค็นชุดเดียวกันผ่านออบเจ็กต์ config):

โทเค็นค่าเริ่มต้นใช้สำหรับ
primary#0284C7ปุ่ม กรอบไกด์ขณะทำงาน แถบความคืบหน้า
primaryDark#0C4A6Eหัวข้อ ข้อความคำแนะนำ
primaryLight#BAE6FDกรอบไกด์ขณะว่าง สีเน้นแบบอ่อน
surface#F0F9FFแผ่นงาน ชิปคำแนะนำ
onPrimary#FFFFFFข้อความ/ไอคอนบนสี primary
success#22C55Eล็อกกรอบสี่เหลี่ยมสำเร็จ ท่าทางผ่าน
warning#F59E0Bถือนิ่งๆ / ภาพเบลอเกินไป
error#EF4444ความล้มเหลว
overlayScrim#0C4A6E ที่ 60%โอเวอร์เลย์กล้องนอกกรอบไกด์
brandDeep#113F7Bสีเน้นแบรนด์ iApp (ไม่บังคับ)
borderRadius16ชิป ปุ่ม การ์ดผลลัพธ์
guideStrokeWidth3ความหนาเส้นกรอบไกด์
fontFamilyค่าเริ่มต้นของแพลตฟอร์มปรับแต่งได้ (ไม่บังคับ)

FlutterEkycTheme เป็นคลาส immutable ธรรมดา (ไม่ขึ้นกับ Theme.of):

const theme = EkycTheme.lightBlue;             // ค่าเริ่มต้น
final custom = EkycTheme.lightBlue.copyWith(
primary: Color(0xFF113F7B),
borderRadius: 12,
);
DocumentCaptureView.start(context, theme: custom, ...);

เว็บ — โทเค็นจะถูกกำหนดเป็น CSS custom properties บนอิลิเมนต์ 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);
// เว็บ: 'en' | 'th' | 'zh'
await ekyc.captureDocument({ mount, documentType: 'thaiIdFront', locale: 'th' });

แรปเปอร์เนทีฟรองรับภาษาชุดเดียวกัน: 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 ในรีโพซิทอรี)

เว็บ

  • เบราว์เซอร์รุ่นใหม่ที่รองรับ WebAssembly และ getUserMedia
  • ต้องใช้ HTTPS (หรือ localhost) — เบราว์เซอร์จะบล็อกการเข้าถึงกล้องบนต้นทางที่ไม่ปลอดภัย
  • แอสเซต OpenCV/MediaPipe จะถูกโหลดแบบ lazy เฉพาะเมื่อเริ่มขั้นตอนการถ่ายภาพเท่านั้น หาก CSP ของคุณไม่อนุญาตคำขอไปยัง CDN สามารถโฮสต์แอสเซตเองผ่านตัวเลือก assetBaseUrl

iOS / Android / React Native (แรปเปอร์เนทีฟ)

  • 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 ขณะใช้งาน

ขั้นตอนถัดไป