คู่มือการผสานรวม Web SDK

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

รายการ คำอธิบาย
ความเข้ากันได้ IE9+, Chrome, Firefox, Safari, Opera, เบราว์เซอร์มือถือกระแสหลัก, Webview ที่ฝังใน iOS และ Android

รูปแบบการยืนยัน

["slide","icon","nine","match"]
              
              ["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>
              
              <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)
              
              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)
              
               <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)
              
              /**
 * @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({...,toolbar:['close','refresh']},function(){...})

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

การกำหนดค่าภาษา

initGeetest({...,language:'zh'},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 ที่ผิดปกติจะไม่ส่งผลกระทบต่อกระบวนการธุรกิจปกติในสถานการณ์ที่รุนแรง

โหมดการหยุดทำงานจะเกิดขึ้นเมื่อเซิร์ฟเวอร์หลักของเว็บไซต์ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์การยืนยัน ส่งผลให้เกิดการหมดเวลาการเชื่อมต่อและปัญหาอื่น ๆ

ในโหมดการหยุดทำงาน กระบวนการยืนยันทั้งหมดจะไม่ผ่านเซิร์ฟเวอร์การยืนยัน ฝ่ายที่เข้าถึงต้องเพิ่มตรรกะการยืนยันหรือมีแผนลดระดับผลิตภัณฑ์

image

เมื่อเซิร์ฟเวอร์การยืนยันเข้าสู่โหมดการหยุดทำงาน,

กระบวนการฝั่งไคลเอนต์ยังคงไม่เปลี่ยนแปลง และการเรียก 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" }// ส่งไปยังระบบธุรกิจ... })})
              
              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"
                 }// ส่งไปยังระบบธุรกิจ...
                 })})

            
โค้ดนี้โชว์เป็นหน้าต่างลอย
Icon Solid Transparent White Qiyu
ติดต่อฝ่ายขาย