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

คู่มือนี้จะช่วยให้คุณเพิ่ม Noxtica ลงในเว็บแอปพลิเคชันของคุณภายในไม่กี่นาที

สิ่งที่ต้องมีก่อน

• บัญชี Noxtica (ขอสิทธิ์เข้าถึงผ่านหน้า ติดต่อ)
• Site Key ของคุณ (ได้รับหลังจากตั้งค่าบัญชี)

การผสานอย่างรวดเร็ว

เมื่อบัญชีของคุณตั้งค่าแล้วและคุณมี Site Key แล้ว เพิ่ม collector ของเราลงใน HTML — นั่นคือการติดตั้งทั้งหมด

การเก็บข้อมูลอัตโนมัติ (แนะนำ)

วิธีที่ง่ายที่สุดในการเริ่มต้นคือปล่อยให้ Noxtica รันตัวเอง โดยใช้ โหมดทำงานครั้งเดียว:

<script
	src="https://collect.noxtica.com/collector/noxtica.js"
	data-site-key="pk_prod_your_site_key_here"
	data-auto-init
	data-auto-check-once
	async
></script>

สิ่งนี้จะ:

• ประเมินผู้เยี่ยมชมในการเข้าชมครั้งแรก
• นำผลลัพธ์นั้นกลับมาใช้สำหรับการเข้าชมซ้ำภายในช่วงแคช (ค่าเริ่มต้น: 7 วัน)
• บันทึกการกลับมาเยี่ยมชมอย่างเงียบๆ โดยไม่ต้องทำการประเมินซ้ำ
• ประสานงานระหว่างแท็บที่เปิดอยู่เพื่อให้ผู้เยี่ยมชมถูกประเมินเพียงครั้งเดียว

ผลลัพธ์เข้าถึงได้ผ่าน:

// รับฟังผลลัพธ์
document.addEventListener('noxtica:collected', function (e) {
	console.log('Fingerprint collected:', e.detail);
	console.log('Risk score:', e.detail.score);
	console.log('Risk level:', e.detail.risk_level);
});

// หรือเข้าถึงโดยตรงหลังจากเก็บข้อมูล
console.log(window.noxticaResult);

การเก็บข้อมูลด้วยตนเอง

สำหรับการควบคุมเพิ่มเติม ใช้ JavaScript API:

<script src="https://collect.noxtica.com/collector/noxtica.js"></script>
<script>
	// สร้าง client ด้วย Site Key ของคุณ
	const client = NoxticaCollector.createClient({
		siteKey: 'pk_prod_your_site_key_here',
	});

	// เก็บและส่งในการเรียกเดียว
	client.collectAndSubmit().then((result) => {
		console.log('Risk score:', result.score);
		console.log('Risk level:', result.risk_level);
		console.log('Flags:', result.flags);
	});
</script>

การเก็บข้อมูลอัจฉริยะด้วย checkOnce()

สำหรับรอยเท้าที่เบาที่สุด ใช้ checkOnce() — มันเคารพช่วงเวลาเก็บข้อมูลที่คุณตั้งค่าบนเซิร์ฟเวอร์ เพื่อให้ผู้เยี่ยมชมไม่ถูกประเมินซ้ำบ่อยกว่าที่จำเป็น:

const client = NoxticaCollector.createClient({
	siteKey: 'pk_prod_your_site_key_here',
});

// เก็บข้อมูลก็ต่อเมื่ออยู่นอกช่วงเวลาตรวจสอบ (ค่าเริ่มต้น: 7 วัน)
// ไม่เช่นนั้นจะบันทึกการเยี่ยมชมและส่งคืนผลที่แคชไว้
const result = await client.checkOnce();

if (result.fromCache) {
	console.log('Using cached result, next collection in:', result.nextSubmitIn, 'days');
} else {
	console.log('Fresh collection submitted');
}
console.log('Risk level:', result.risk_level);

ประสิทธิภาพและผลกระทบต่อเว็บไซต์

collector ออกแบบมาให้มีผลกระทบต่อการโหลดหน้าและ latency ที่ผู้ใช้รับรู้น้อยที่สุด:

วิธีที่เราทำให้มันเบา:

• คุณสมบัติสคริปต์ async — collector โหลดในพื้นหลังและไม่ทำให้หน้าของคุณช้าในการแสดงผลหรือโต้ตอบ
• โหมดทำงานครั้งเดียว (data-auto-check-once) — หลังจากการประเมินครั้งแรก การเข้าชมซ้ำภายในช่วงแคชจะส่งเพียง ping การเยี่ยมชมเล็กๆ (~150 bytes)
• การประสานงานระหว่างแท็บ — แท็บที่เปิดหลายแท็บจะรวมเป็นการประเมินเดียว
• แคชหลังโหลดครั้งแรก — KHAN VM ที่ต้านการแก้ไขถูกแคชโดยเบราว์เซอร์ จึงโหลดได้ทันทีในการเข้าชมครั้งต่อไป
• การประมวลผลในพื้นหลัง เมื่อรองรับ เพื่อให้งานอยู่นอก main thread และหน้าของคุณยังคงตอบสนอง

หากคุณสังเกตเห็นความช้าหลังจากเพิ่ม SDK ให้เก็บโปรไฟล์ด้วย await client.collectAndSubmit({ telemetry: true }) — result.telemetry ที่ส่งคืนมีรายละเอียดการวัดเวลา

Sandbox กับ Production

คุณจะมี Site Key สองตัว: ตัวหนึ่งสำหรับการพัฒนาและ staging อีกตัวสำหรับ production แต่ละตัวรันภายใต้ policy ของตัวเองและเก็บข้อมูลแยกกันโดยสิ้นเชิง

สลับ Site Key ตามสภาพแวดล้อมเสมอ อย่าใช้ key pk_sand_* กับ production traffic — ข้อมูล sandbox จะไม่ปรากฏใน dashboard production ของคุณและการให้คะแนนความเสี่ยงจะผ่อนปรนเกินไป ในทางกลับกัน การใช้ key pk_prod_* ในการพัฒนาจะใช้ budget rate-limit ของ production

รูปแบบทั่วไป:

<script>
	// เลือก key ตาม hostname; fallback ไปยัง sandbox ในการพัฒนา
	const KEY = location.hostname === 'www.example.com' ? 'pk_prod_REPLACE_ME' : 'pk_sand_REPLACE_ME';
	const s = document.createElement('script');
	s.src = 'https://collect.noxtica.com/collector/noxtica.js';
	s.async = true;
	s.dataset.siteKey = KEY;
	s.dataset.autoInit = '';
	s.dataset.autoCheckOnce = '';
	document.head.appendChild(s);
</script>

ความเข้ากันได้กับ Tag Manager

collector ทำงานภายใน Google Tag Manager, Adobe Launch, Tealium และ Segment ได้ แต่มีข้อควรระวัง:

แนะนำ (ดีที่สุด): เพิ่มสคริปต์โดยตรงลงใน HTML ของคุณ ทันทีก่อน </body> หรือใน <head> พร้อม async การเริ่มต้นเร็วที่สุดเท่าที่เป็นไปได้ให้ collector มีโอกาสได้เปรียบที่สุด เพื่อให้พร้อมเมื่อผู้เยี่ยมชมโต้ตอบ

Tag managers — ใช้งานได้ มีข้อควรระวัง:

• ✅ tag manager สมัยใหม่ส่วนใหญ่ (GTM Custom HTML, Adobe Launch Custom Code, Segment Custom Source) โหลด collector ได้สำเร็จ
• ⚠️ consent gate ที่บล็อก script จนกว่าผู้เยี่ยมชมจะยอมรับจะ ล่าช้าการประเมินครั้งแรก — โดยทั่วไปจะไม่มีอะไรรันจนกว่า banner ยืนยันความยินยอมจะถูกปิด นี่เป็นพฤติกรรมที่ถูกต้อง แค่รู้ว่ามันอาจบิดเบือนตัวชี้วัด “เวลาในการตัดสินใจ” ของคุณ
• ⚠️ tag manager รุ่นเก่าบางตัวจะตัด custom data-* attributes ออก หาก data-site-key ไม่ถึง script tag auto-init จะไม่เริ่ม แก้ไขด้วยโค้ดแทน:

  NoxticaCollector.createClient({ siteKey: 'pk_prod_...' }).checkOnce();

• ❌ tag container ที่ sandbox อย่างหนักบางตัว (หายาก) ป้องกัน runtime ที่ต้านการแก้ไขจากการเริ่มต้น SDK ยังทำงานด้วยการเก็บข้อมูลรูปแบบที่เบากว่าและบันทึกคำเตือนใน console

หากต้องผสานผ่าน tag manager ให้ตั้งค่าให้ทำงาน Noxtica tag บน All Pages — Window Loaded (หรือเทียบเท่า) แทน DOM Ready — เพื่อให้แน่ใจว่าสถานะ consent สมบูรณ์ก่อนที่จะมีอะไรรัน

Content Security Policy

หากเว็บไซต์ของคุณใช้ content-security-policy คุณต้องอนุญาตให้ Noxtica โหลด รัน runtime ที่ต้านการแก้ไข (KHAN VM) และติดต่อ API ของเรา ตัวอย่างด้านล่างครอบคลุมทั้งสาม:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'wasm-unsafe-eval' https://collect.noxtica.com;
  connect-src 'self' https://collect.noxtica.com;

หาก policy ขาด token 'wasm-unsafe-eval' เบราว์เซอร์จะบล็อก runtime ที่ต้านการแก้ไขและคุณจะเห็นคำเตือนที่เกี่ยวข้องใน console Noxtica ยังทำงานต่อ — มัน fallback ไปยังการเก็บข้อมูลรูปแบบที่เบากว่า — แต่ด้วยการป้องกันการแก้ไขที่อ่อนลง การเพิ่ม token ด้านบนจะคืนค่าประสบการณ์เต็มรูปแบบ

Site Keys

Site Key ของคุณ (pk_...) เป็นตัวระบุสาธารณะที่ยืนยันคำขอจากโดเมนของคุณ แต่ละโดเมนที่คุณเพิ่มใน Backoffice จะได้รับ Site Key เฉพาะ

ข้อสังเกตสำคัญ:

• Site Keys เป็นสาธารณะและสามารถฝังใน HTML ของคุณได้อย่างปลอดภัย
• Site Key แต่ละตัวผูกกับ origin ที่เฉพาะเจาะจง (เช่น https://example.com)
• API จะปฏิเสธคำขอที่ origin ไม่ตรงกับโดเมนที่ลงทะเบียนของ Site Key

ตัวเลือกการตั้งค่า

const client = NoxticaCollector.createClient({
	// Site Key ของคุณ (จำเป็น)
	siteKey: 'pk_prod_your_site_key_here',

	// API endpoint (ค่าเริ่มต้นคือ production)
	apiUrl: 'https://collect.noxtica.com',

	// โหมดเก็บข้อมูล: 'max' (ค่าเริ่มต้น), 'standard' หรือ 'minimal'
	// ไม่ระบุเพื่อใช้โหมด max (แนะนำ)
	// mode: 'standard', // ยกเลิก comment เพื่อยกเลิกสัญญาณเฉพาะ max
});

โหมดการเก็บข้อมูล

รูปแบบการตอบกลับ

หลังจากเก็บและส่งข้อมูล คุณจะได้รับ:

{
	"success": true,
	"fingerprintId": "abc123...",
	"score": 15,
	"risk_level": "minimal",
	"confidence": 0.5,
	"flags": [],
	"details": {
		"summary": "Detected 0 risk indicator(s)."
	}
}

ระดับความเสี่ยง

การยืนยันตัวตน

SDK ยืนยันตัวตนของการเข้าชมแต่ละครั้งด้วยข้อมูลรับรองที่มีอายุสั้นและหมุนเวียนอัตโนมัติซึ่งผูกกับ Site Key ของคุณ มันขอ รีเฟรช และแนบข้อมูลรับรองเหล่านั้นกับทุก submission ให้คุณ

คุณไม่จำเป็นต้องจัดการสิ่งเหล่านี้เลย — SDK ดูแลให้อัตโนมัติ

กระบวนการ Onboarding

1. ขอสิทธิ์เข้าถึง: ติดต่อเรา เพื่อขอเดโมหรือเริ่มต้นใช้งาน
2. ตั้งค่าบัญชี: เราจะสร้างบัญชี tenant ของคุณบนแพลตฟอร์ม
3. เพิ่มโดเมน: ลงชื่อเข้าใช้ Backoffice ไปที่ Domains และเพิ่ม origins ของคุณ
4. คัดลอก Site Key: แต่ละโดเมนจะได้รับ Site Key เฉพาะ
5. ผสานเข้ากับระบบ: เพิ่มสคริปต์พร้อม Site Key ของคุณลงในหน้าเว็บ
6. ติดตาม: ดู fingerprint และ analytics ในแดชบอร์ด Backoffice

การจัดการหลายโดเมน

Noxtica รองรับหลายโดเมนต่อบัญชี:

• Production: https://www.yoursite.com
• Staging: https://staging.yoursite.com
• Mobile: https://m.yoursite.com

แต่ละโดเมนมี Site Key ของตัวเอง คุณสามารถ:

• เปิด/ปิดใช้งานโดเมนโดยไม่ต้องสร้างคีย์ใหม่
• หมุนเวียน Site Keys หากถูกบุกรุก
• ดู analytics ที่กรองตามโดเมน

เวอร์ชัน SDK

เวอร์ชัน SDK ปัจจุบัน: 3.3.0 (Schema: 2026-05-24)

มีอะไรใหม่ใน 3.3.0

• สัญญาณเชิงพฤติกรรมแบบเบา (เปิดเสมอ) — สัญญาณ timing ที่เรียบง่าย เช่น ระยะเวลาของ session และความเร็วในการโต้ตอบครั้งแรก ไม่มีข้อมูลชีวมาตรและไม่ต้องขอความยินยอมจากผู้ใช้ปลายทาง
• ชีวมาตรเชิงพฤติกรรม (opt-in) — เมื่อคุณเปิดใช้งานใน Backoffice → Settings → Behavioral Biometrics Noxtica จะดูจังหวะของการเคลื่อนเมาส์ ช่วงเวลาคลิก และการเลื่อน ข้อมูลนี้นับเป็นข้อมูลชีวมาตรภายใต้กฎหมายความเป็นส่วนตัวที่เข้มงวด ดังนั้นจึงต้องได้รับความยินยอมอย่างชัดเจนจากผู้ใช้ปลายทาง ดู ชีวมาตรเชิงพฤติกรรม ด้านล่าง
• การตรวจสอบความสอดคล้องของ Apple Pay — ยืนยันว่าอุปกรณ์ที่อ้างว่าเป็น iPhone ประพฤติตัวเหมือน iPhone จริงๆ จับเทคนิค spoofing ที่พบบ่อย
• การจับคู่ network-fingerprint — รับรู้รูปแบบการเชื่อมต่อที่เป็นเอกลักษณ์ของ automation tool ทั่วไป ทำให้ traffic จาก script และบอทโดดเด่นแม้เบราว์เซอร์ดูน่าเชื่อถือ
• IP reputation — flag ผู้เยี่ยมชมที่มาจากเครือข่ายที่มีชื่อเสียงไม่ดี พร้อมตัวเลือกเสียบ threat-intelligence feed ที่คุณต้องการ

ชีวมาตรเชิงพฤติกรรม (ทางเลือก, Opt-In)

Noxtica ยังสามารถศึกษา จังหวะ ของวิธีที่ใครบางคนเคลื่อนเมาส์ คลิก และเลื่อน มันเป็น ฟีเจอร์ opt-in ปิดอยู่โดยค่าเริ่มต้น

ทำไมต้อง opt-in? ข้อมูลเชิงพฤติกรรมประเภทนี้นับเป็นข้อมูลส่วนตัวที่ละเอียดอ่อนภายใต้กฎหมายความเป็นส่วนตัวที่เข้มงวด ดังนั้นการเก็บข้อมูลต้องได้รับความยินยอมอย่างชัดเจนจากผู้ใช้ปลายทางของคุณ เราทำให้มันเป็น opt-in เพื่อให้คุณควบคุมว่าจะใช้เมื่อใดและอย่างไร

วิธีเปิดใช้งาน:

1. ลงชื่อเข้าใช้ Backoffice → Settings → Behavioral Biometrics
2. ตรวจสอบประกาศการปฏิบัติตามกฎหมายกับทีมความเป็นส่วนตัวหรือกฎหมายของคุณ
3. อัปเดต privacy policy และ consent banner เพื่อเปิดเผยการเก็บข้อมูลนี้
4. เปิดใช้งานฟีเจอร์

เมื่อเปิดใช้งาน Noxtica จะนำสัญญาณเชิงพฤติกรรมเหล่านี้มาใช้ในการประเมินในอนาคตโดยอัตโนมัติ และ dashboard ของคุณจะแสดงคะแนนเชิงพฤติกรรมต่อโดเมน

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

• ลอง เดโมแบบสด เพื่อดูการเก็บ fingerprint ในการทำงานจริง
• อ่านคู่มือ การผสานกับ Backend สำหรับการค้นหาฝั่งเซิร์ฟเวอร์
• เข้าถึง แดชบอร์ด เพื่อสำรวจข้อมูลที่เก็บรวบรวม