คู่มือการผสานรวม Web SDK
ความเข้ากันได้
| รายการ | คำอธิบาย |
|---|---|
| ความเข้ากันได้ | IE9+, Chrome, Firefox, Safari, Opera, เบราว์เซอร์มือถือกระแสหลัก, Webview ที่ฝังใน iOS และ Android |
รูปแบบการยืนยัน
["slide","icon","nine","match"]
รูปแบบที่รองรับในปัจจุบัน:
| ชื่อ | คำอธิบาย |
|---|---|
| slide | ปริศนาสไลด์ |
| icon | คลิกไอคอนตามลำดับ |
| nine | ตารางเก้าช่อง |
| match | เกมจับคู่ 3 |
เริ่มต้นอย่างรวดเร็ว
การนำเข้า
ไฟล์ gt4.js
จัดเตรียมโดย EngageLab
การนำเข้า gt4.js จะติดตั้งฟังก์ชันการเริ่มต้น initGeetest ทั่วโลก
<script src="https://captcha-stat.engagelab.com/www/gt4.js"></script>
การเริ่มต้น Captcha
💡 เคล็ดลับ
ก่อนการเริ่มต้น คุณต้องได้รับ Verification ID จากเซิร์ฟเวอร์ ดูรายละเอียดในพารามิเตอร์การกำหนดค่า
ใช้ฟังก์ชัน initGeetest เพื่อรับ อินสแตนซ์ captcha พารามิเตอร์แรกของฟังก์ชันนี้คือ พารามิเตอร์การกำหนดค่า สำหรับ captcha และพารามิเตอร์ที่สองคือ ฟังก์ชัน callback หลังจากการเริ่มต้นเสร็จสิ้น
var config = {
captchaId:'xxxx',// Verification ID
apiServers:['https://captcha-api.engagelab.com'],// รายการที่อยู่เซิร์ฟเวอร์การยืนยัน ต้องกำหนดค่าตามที่กำหนด
staticServers:['https://captcha-stat.engagelab.com/www/js']// รายการที่อยู่เซิร์ฟเวอร์ทรัพยากรคงที่ ต้องกำหนดค่าตามที่กำหนด
}
/**
* @desc Callback หลังจากการเริ่มต้นเสร็จสิ้น
* @param { Object } gt อินสแตนซ์ Captcha
*/
var callback=function(gt){
// จัดการธุรกิจที่เกี่ยวข้องตามอินสแตนซ์ captcha เช่น การเรียกหน้าต่าง captcha การฟังเหตุการณ์การยืนยันสำเร็จ...
}
initGeetest(config, callback)
การเรียกหน้าต่าง Captcha
💡 เคล็ดลับ
ด้วยพารามิเตอร์การกำหนดค่า
productมีสองวิธีในการเรียกหน้าต่าง captcha:
- คลิกปุ่มในตัวที่จัดเตรียมไว้เพื่อเรียก (
productค่าไม่ใช่bind) - เรียกใช้เมธอด
showCaptchaของอินสแตนซ์ captcha (productค่าเป็นbind)
<div id="captch_wrap" class="captch-wrap"></div>
var config = {
captchaId:'xxxx',// Verification ID
apiServers:['https://captcha-api.engagelab.com'],// รายการที่อยู่เซิร์ฟเวอร์การยืนยัน ต้องกำหนดค่าตามที่กำหนด
staticServers:['https://captcha-stat.engagelab.com/www/js'],// รายการที่อยู่เซิร์ฟเวอร์ทรัพยากรคงที่ ต้องกำหนดค่าตามที่กำหนด
product:'bind'// สถานการณ์ที่ 2
}
/**
* @desc Callback หลังจากการเริ่มต้นเสร็จสิ้น
* @param { Object } gt อินสแตนซ์ Captcha
*/var callback=function(gt){
gt.onReady(function(){
// สถานการณ์ที่ 1 ใช้ปุ่มในตัวที่จัดเตรียมโดย EngageLab เพื่อเรียกหน้าต่าง captcha
// เพิ่มปุ่มในตัวไปยังพื้นที่ที่ระบุ
gt.appendTo("#captch_wrap")
// สถานการณ์ที่ 2 การเรียกหน้าต่าง captcha แบบกำหนดเอง
// เรียกใช้เมธอด `showCaptcha` ของอินสแตนซ์ในเหตุการณ์ที่ระบุ
// ตัวอย่างเช่น เรียกทันทีหลังจาก captcha พร้อม
gt.showCaptcha()
})
}
initGeetest(config, callback)
รับผลลัพธ์การยืนยัน
/**
* @desc Callback หลังจากการเริ่มต้นเสร็จสิ้น
* @param { Object } gt อินสแตนซ์ Captcha
*/
var callback = function(gt){
// เรียกหน้าต่าง captcha...
// ฟังผลลัพธ์การยืนยัน
gt.onSuccess(function(res){
console.log(res)
})
}
initGeetest({...}, callback)
พารามิเตอร์การกำหนดค่า
พารามิเตอร์การกำหนดค่า
| พารามิเตอร์ | ประเภท | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|---|
| captchaId | string | Verification ID, ได้รับจาก EngageLab backend | จำเป็น |
| product | string | โหมดการแสดงหน้าต่าง captcha, ค่าที่เลือกได้: float, popup, bind | float |
| language | string | ให้ความสำคัญกับค่าที่ส่งมาก่อน ตามด้วยภาษาของเบราว์เซอร์ปัจจุบัน หากไม่มีค่าที่ตรงกัน จะใช้ค่าเริ่มต้น | zh |
| protocol | string | โปรโตคอลเครือข่าย | // |
| apiServers | array | ที่อยู่บริการคำขอการยืนยัน (ไม่รวมโปรโตคอล), ต้องกำหนดค่าเป็น ['https://captcha-api.engagelab.com'] | - |
| staticServers | array | ที่อยู่บริการทรัพยากรคงที่ที่จำเป็นสำหรับการยืนยัน (ไม่รวมโปรโตคอล), ต้องกำหนดค่าเป็น ['https://captcha-stat.engagelab.com/www/js'] | - |
| post | boolean | เมื่อกำหนดเป็น true วิธีการคำขอคือ ajax; มิฉะนั้นเป็น jsonp | false |
| showSuccessTip | boolean | ควบคุมหน้าต่างแจ้งเตือนความสำเร็จเมื่อ product เป็น bind | true |
| riskType | string | ระบุรูปแบบการยืนยัน เช่น การเลื่อน การคลิก ฯลฯ (มีผลเฉพาะเมื่อโหมดการยืนยันของระบบ backend ถูกตั้งค่าเป็นโหมดการควบคุมความเสี่ยงแบบผสม) | - |
| timeout | number | เวลาในการหมดอายุของคำขอการยืนยัน | 30000 |
| offlineCb | function | ฟังก์ชันการจัดการแบบกำหนดเองสำหรับการหยุดทำงาน | - |
| onError | function | การจับข้อผิดพลาดก่อนการเริ่มต้น captcha | - |
| mask | Object | การกำหนดค่ามาสก์หน้าต่าง captcha | |
| nativeButton | Object | การกำหนดค่าที่เกี่ยวข้องกับปุ่มในตัว | |
| toolbar | Array | การกำหนดค่าแถบเครื่องมือ | |
| clientType | string | ประเภทไคลเอนต์, ค่าที่เลือกได้: web | |
| width | string | กำหนดความกว้างของหน้าต่าง captcha ความกว้างสูงสุดคือ 340px (ความสูงของหน้าต่าง captcha จะปรับอัตโนมัติ โดยมีอัตราส่วนประมาณ | 340px |
| zoom | number | ค่าการปรับขนาดสำหรับสถานการณ์พิเศษ ไม่จำกัดค่ามากสุด (ค่าคงที่คือ 1 สำหรับเบราว์เซอร์ Firefox) | 1 |
การกำหนดค่า Mask Object
| พารามิเตอร์ | ประเภท | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|---|
| backgroundColor | string | ค่าสีที่ถูกต้อง | - |
| outside | boolean | ปิด captcha เมื่อคลิกนอกพื้นที่ captcha | - |
การกำหนดค่า NativeButton Object
| พารามิเตอร์ | ประเภท | คำอธิบาย | ค่าเริ่มต้น |
|---|---|---|---|
| width | string | ความกว้างของปุ่มในตัว | - |
| height | string | ความสูงของปุ่มในตัว | - |
การกำหนดค่า Toolbar Array
initGeetest({...,toolbar:['close','refresh']},function(){...})
การกำหนดค่าภาษา
initGeetest({...,language:'zh'},function(){...})
| ค่าที่ถูกต้อง | ประเภท | คำอธิบาย |
|---|---|---|
| close | string | ปุ่มปิดหน้าต่าง captcha |
| refresh | string | ปุ่มรีเฟรชหน้าต่าง captcha |
ภาษา (18 ประเภท)
| ค่าที่เลือกได้ | ภาษา |
|---|---|
| ara | อาหรับ |
| deu | เยอรมัน |
| eng | อังกฤษ |
| fra | ฝรั่งเศส |
| ind | อินโดนีเซีย |
| jpn | ญี่ปุ่น |
| kor | เกาหลี |
| msa | มาเลย์ |
| pon | โปรตุเกสบราซิล |
| por | โปรตุเกสยุโรป |
| rus | รัสเซีย |
| spa | สเปน |
| tha | ไทย |
| udm | อุยกูร์ |
| vie | เวียดนาม |
| zh | จีนตัวย่อ |
| zho-hk | จีนตัวเต็ม (ฮ่องกง) |
| zho-tw | จีนตัวเต็ม (ไต้หวัน) |
โหมดการหยุดทำงานของการยืนยันพฤติกรรม
โหมดการหยุดทำงานเป็นโหมดการจัดการฉุกเฉินที่ตั้งค่าเพื่อให้แน่ใจว่ากระบวนการยืนยัน captcha ที่ผิดปกติจะไม่ส่งผลกระทบต่อกระบวนการธุรกิจปกติในสถานการณ์ที่รุนแรง
โหมดการหยุดทำงานจะเกิดขึ้นเมื่อเซิร์ฟเวอร์หลักของเว็บไซต์ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์การยืนยัน ส่งผลให้เกิดการหมดเวลาการเชื่อมต่อและปัญหาอื่น ๆ
ในโหมดการหยุดทำงาน กระบวนการยืนยันทั้งหมดจะไม่ผ่านเซิร์ฟเวอร์การยืนยัน ฝ่ายที่เข้าถึงต้องเพิ่มตรรกะการยืนยันหรือมีแผนลดระดับผลิตภัณฑ์

เมื่อเซิร์ฟเวอร์การยืนยันเข้าสู่โหมดการหยุดทำงาน,
กระบวนการฝั่งไคลเอนต์ยังคงไม่เปลี่ยนแปลง และการเรียก captcha จะผ่านทันที เข้าสู่ onSuccess
ระบบธุรกิจส่งการยืนยันครั้งที่สองไปยังระบบ captcha และหากหมดเวลา จะได้รับการยืนยันว่าเป็นโหมดการหยุดทำงาน
initGeetest({...},function(gt){...
gt.onSuccess(function(res){
console.log(res)// ตัวอย่างค่าผลลัพธ์การยืนยันสำเร็จ
{ captcha_id: "59bbe0f128f0624fdd185a6a2207aa54",
captcha_output: "X000Q5p.....i-SFRyH1",
client_type: "web",
gen_time: "1648204854",
lot_number: "200e2e58e1d3a6906e08cc9ff5c6e0b5",
offline: true,
pass_token: "e000b4dc372c1397976f7b8f12d66ea8d5c993ab2db5810258e835429f6fa4ae"
}// ส่งไปยังระบบธุรกิจ...
})})
