Cloudflare Turnstile: ทำงานอย่างไร เห็นอะไรฝั่งคุณ และวิธีติดตั้ง — คู่มือทีละขั้นตอน

บทนำ: สิ่งที่คุณจะได้จากคู่มือนี้

Cloudflare Turnstile คือวิดเจ็ตเล็ก ๆ ที่มีวงกลมหมุนและข้อความ «Verifying» ซึ่งเริ่มพบเห็นบ่อยขึ้นแทนแคปชาที่ให้เลือกภาพ มันปรากฏอยู่บนฟอร์มสมัครสมาชิก ในตะกร้าสินค้าของร้านออนไลน์ บนแลนดิ้งเพจ และในหน้าสมาชิกของบริการต่าง ๆ ผู้เข้าชมทั่วไปแทบไม่สังเกตเห็นมัน แต่สำหรับนักการตลาด นักไถ่ถอน หรือนักพัฒนาที่ทำงานผ่านพร็อกซีมือถือและเปิดเว็บไซต์หลายสิบแห่งต่อวัน มันกลับกลายเป็นปริศนา ทำไมโปรไฟล์หนึ่งผ่านการตรวจสอบภายในหนึ่งวินาที แต่อีกโปรไฟล์กลับค้าง ขอให้ติ๊กถูก หรือแสดงรหัสข้อผิดพลาด?

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

คู่มือนี้เหมาะกับใคร

• เจ้าของธุรกิจและนักการตลาดที่เจอปัญหาสแปมและสมัครสมาชิกปลอมทำลายสถิติและกินงบประมาณ
• นักพัฒนาที่ต้องฝัง Turnstile ลงในฟอร์มอย่างรวดเร็วและตรวจสอบโทเคนบนเซิร์ฟเวอร์อย่างถูกต้อง
• นักไถ่ถอนและผู้เชี่ยวชาญด้านมัลติแอคเคานต์ที่ทำงานผ่านพร็อกซีมือถือและอยากเข้าใจว่า Turnstile เห็นอะไรเมื่อเชื่อมต่อของพวกเขา

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

ไม่จำเป็นต้องมีความรู้พิเศษใด ๆ แค่เข้าใจว่า HTML เพจคืออะไร เปิดคอนโซลนักพัฒนาในเบราว์เซอร์เป็น และมีประสบการณ์อย่างน้อยเล็กน้อยกับภาษาใดก็ได้บนเซิร์ฟเวอร์ — PHP, Node.js, Python ถ้าคุณไม่มีส่วนเซิร์ฟเวอร์เลย คุณก็ยังทำคู่มือส่วนใหญ่ได้ เพราะวิดเจ็ตสามารถติดตั้งและทดสอบบนหน้าท้องถิ่นได้

ใช้เวลานานเท่าไหร่

ทำทั้งหมดประมาณหนึ่งชั่วโมงครึ่งถึงสองชั่วโมง การสมัครและสร้างวิดเจ็ตใช้เวลา 10-15 นาที การฝังลงในหน้าเว็บ 20 นาที การตรวจสอบฝั่งเซิร์ฟเวอร์ 30-40 นาที การทดสอบและวินิจฉัยอีก 30 นาที ส่วนภาคทฤษฎีอ่านตามลำดับใดก็ได้และกลับมาอ่านซ้ำเมื่อจำเป็น

การเตรียมตัวเบื้องต้น: เครื่องมือและสิทธิ์การเข้าถึง

ก่อนเริ่ม ให้รวบรวมทุกอย่างที่ต้องใช้ไว้ก่อน จะช่วยให้คุณไม่ต้องหยุดกลางคัน

เครื่องมือและสิทธิ์ที่จำเป็น

• บัญชี Cloudflare ใช้ฟรี สมัครด้วยอีเมลใช้เวลาแค่ไม่กี่นาที ไม่จำเป็นต้องย้ายโดเมนมา Cloudflare เพราะ Turnstile ทำงานบนเว็บไซต์ใดก็ได้ไม่ว่าจะโฮสต์ที่ไหน
• เว็บไซต์หรือหน้าทดสอบ ใช้หน้า HTML ใดก็ได้ที่มีฟอร์ม สำหรับทดลองในเครื่อง ไฟล์บนคอมพิวเตอร์ที่เปิดผ่านเซิร์ฟเวอร์ท้องถิ่นง่าย ๆ ก็พอ
• สภาพแวดล้อมเซิร์ฟเวอร์ โฮสติ้งใดก็ได้ที่มี PHP หรือ Node.js หรือ Python บนเครื่องของคุณ จำเป็นสำหรับครึ่งหลังของคู่มือ — การตรวจสอบโทเคน
• เบราว์เซอร์สมัยใหม่ Chrome, Firefox, Edge หรือ Safari เวอร์ชันล่าสุดที่เปิดเครื่องมือนักพัฒนาได้
• พร็อกซีมือถือที่เปลี่ยน IP ได้ จำเป็นในส่วนการวินิจฉัย เพื่อดูว่าวิดเจ็ตตอบสนองต่อเครือข่ายและการหมุนเวียนที่อยู่ต่าง ๆ อย่างไร

ข้อกำหนดของระบบ

Turnstile ไม่ต้องการอะไรมาก วิดเจ็ตทำงานบนเบราว์เซอร์ใดก็ได้ที่รองรับ JavaScript สมัยใหม่ และโหลดโค้ดของตัวเองจากโดเมน challenges.cloudflare.com ถ้าในเครือข่ายของคุณหรือในส่วนขยายของเบราว์เซอร์มีการบล็อกโดเมนนี้ วิดเจ็ตจะไม่โหลด — คำนึงถึงเรื่องนี้ตอนทดสอบด้วย สำหรับการตรวจสอบฝั่งเซิร์ฟเวอร์ ต้องสามารถส่งคำขอ HTTPS ขาออกได้

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

1. เปิดไฟล์ข้อความไว้จดบันทึก ในนั้นคุณจะเขียน site key ชื่อวิดเจ็ต รายการโฮสต์เนม และผลการทดสอบ
2. เปิดหน้าเว็บที่มีฟอร์มที่คุณอยากป้องกัน และบันทึกสำเนาไว้พร้อมวันที่ นี่คือไฟล์สำรองของคุณ
3. ถ้าคุณมีตัวจัดการฟอร์มฝั่งเซิร์ฟเวอร์ สำรองมันไว้ด้วย เราจะเพิ่มโค้ดตรวจสอบลงไป
4. ตรวจสอบว่าเซิร์ฟเวอร์ท้องถิ่นหรือเซิร์ฟเวอร์จริงของคุณส่งหน้าเว็บผ่าน HTTPS หรือผ่าน localhost Turnstile ทำงานบน HTTP ธรรมดาได้ แต่บนเว็บจริงคุณยังต้องใช้ HTTPS อยู่ดี

⚠️ ข้อควรระวัง: ห้ามเก็บ Secret key ของวิดเจ็ตไว้ใน HTML ใน JavaScript บนหน้าเว็บ หรือในรีโปสาธารณะ มันอยู่ได้เฉพาะบนเซิร์ฟเวอร์เท่านั้น ถ้าคุณเผลอเผยแพร่มัน ให้ออกคีย์ใหม่ในแผง Cloudflare ทันที — คีย์เก่าจะใช้ไม่ได้อีก

แนวคิดพื้นฐาน: Cloudflare Turnstile ทำงานอย่างไร

เพื่อให้ขั้นตอนต่อไปเข้าใจง่าย เรามาอธิบายคำศัพท์สำคัญด้วยภาษาง่าย ๆ

คำศัพท์สำคัญ

• วิดเจ็ต — บล็อกที่ผู้เข้าชมเห็น ในทางเทคนิคมันคือ iframe ที่โหลดจากโดเมน Cloudflare และฝังในหน้าเว็บของคุณ
• Site key — ตัวระบุสาธารณะของวิดเจ็ต ใส่ใน HTML และทุกคนเห็นได้ Cloudflare ใช้มันเพื่อรู้ว่าจะแสดงวิดเจ็ตตัวไหนและอนุญาตให้ใช้กับโดเมนใด
• Secret key — คีย์ส่วนตัว เซิร์ฟเวอร์ของคุณใช้ยืนยันว่าโทเคนที่เข้ามานั้นของจริง ไม่เคยออกจากเซิร์ฟเวอร์
• โทเคน — สตริงที่วิดเจ็ตออกให้หลังผ่านการตรวจสอบสำเร็จ มันจะถูกใส่ในช่องซ่อนของฟอร์มและส่งไปยังเซิร์ฟเวอร์ของคุณพร้อมข้อมูลอื่น ๆ
• Siteverify — เอนด์พอยต์ของ Cloudflare ที่เซิร์ฟเวอร์ส่งโทเคนพร้อมคีย์ลับเข้าไปและรับคำตอบกลับว่า สำเร็จหรือไม่
• โหมดวิดเจ็ต — วิธีแสดงผล: แบบจัดการได้ (Managed) แบบไม่ต้องมีปฏิสัมพันธ์ (Non-interactive) หรือแบบมองไม่เห็น (Invisible) ความแตกต่างอธิบายด้านล่าง
• โฮสต์เนม — โดเมนที่อนุญาตให้ใช้วิดเจ็ต ถ้าไม่ระบุโดเมน วิดเจ็ตจะปฏิเสธการทำงานพร้อมข้อผิดพลาด

หลักการทำงานในสี่ประโยค

1. หน้าเว็บโหลดสคริปต์ Turnstile และวิดเจ็ตก็เริ่มชุดการตรวจสอบในเบราว์เซอร์อย่างเงียบ ๆ
2. Cloudflare รวบรวมผลลัพธ์ ประเมินร่วมกับข้อมูลเครือข่าย และตัดสินใจว่า: ผ่านเลย แสดงติ๊กถูกให้ยืนยัน หรือปฏิเสธ
3. เมื่อสำเร็จ วิดเจ็ตจะสร้างโทเคนใช้ครั้งเดียวและใส่ลงในฟอร์ม
4. เซิร์ฟเวอร์ของคุณรับฟอร์ม ส่งโทเคนไปที่ siteverify และประมวลผลคำขอเฉพาะเมื่อได้คำตอบบวกเท่านั้น

Turnstile ตรวจสอบอะไร — ภาพรวม

สิ่งสำคัญที่ต้องเข้าใจคือ Cloudflare Turnstile ไม่ได้ดู «ความเป็นมนุษย์» ผ่านปริศนาภาพ มันประเมิน ความสอดคล้องของสภาพแวดล้อม ว่าเบราว์เซอร์ เครือข่าย และพฤติกรรมสอดคล้องกันเป็นภาพที่น่าเชื่อถือเพียงใด กลุ่มสัญญาณหลักมีดังนี้:

• สภาพแวดล้อมเบราว์เซอร์ สคริปต์รันงาน JavaScript เล็ก ๆ หลายอย่างและตรวจว่าสภาพแวดล้อมทำงานเหมือนเบราว์เซอร์จริง: โครงสร้างของออบเจ็กต์ window เป็นอย่างไร กราฟิกเรนเดอร์อย่างไร มีร่องรอยของระบบอัตโนมัติหรือเปล่า User-Agent ที่ประกาศตรงกับความสามารถจริงของเอนจินไหม
• หลักฐานการทำงาน วิดเจ็ตขอให้เบราว์เซอร์คำนวณเล็กน้อย สำหรับคนใช้เวลาเสี้ยววินาที แต่สำหรับบอทที่เปิดหน้าเว็บหลายพันหน้า กลับเป็นภาระที่รู้สึกได้
• สัญญาณเครือข่าย ชื่อเสียงของที่อยู่ IP และระบบอัตโนมัติ (autonomous system) ที่คำขอออกมา ความสอดคล้องของคุณลักษณะเครือข่ายกับเบราว์เซอร์ที่ประกาศ และประวัติคำขอจากที่อยู่นั้นทั่วทั้งเครือข่าย Cloudflare
• โทเคนความน่าเชื่อถือของอุปกรณ์ บนอุปกรณ์ Apple และในระบบนิเวศอื่นบางแห่ง Turnstile อาจขอการยืนยันจากระบบปฏิบัติการว่าเป็นอุปกรณ์จริง — แล้วการตรวจสอบก็ผ่านไปโดยไม่ต้องคำนวณอะไรเลย
• พฤติกรรมบนหน้าเว็บ เวลาที่วิดเจ็ตปรากฏ จังหวะที่ส่งฟอร์ม ความเป็นธรรมชาติของการกระทำในโหมดที่จัดการได้

สิ่งที่ Turnstile ไม่ทำ: ไม่เก็บข้อมูลเพื่อโปรไฟล์โฆษณา ไม่ติดตามผู้ใช้ข้ามเว็บไซต์ผ่านคุกกี้บุคคลที่สาม และไม่แสดงภาพปริศนาเลย สิ่งนี้สำคัญทั้งในแง่กฎหมายคุ้มครองข้อมูลส่วนบุคคลและในแง่อัตราการแปลง เพราะผู้เข้าชมจะไม่หนีไปเพราะแคปชาน่ารำคาญ

สามโหมดของวิดเจ็ต

• Managed — โหมดพื้นฐาน วิดเจ็ตมองเห็นได้ หมุนตัวบ่งชี้ และถ้าไม่แน่ใจจะแสดงติ๊กถูกที่ต้องคลิก เหมาะกับฟอร์มส่วนใหญ่
• Non-interactive — วิดเจ็ตมองเห็นได้ แต่ไม่ต้องมีการกระทำใดเลย มันจะผ่านเองหรือแสดงข้อผิดพลาด เหมาะกับหน้าที่หลีกเลี่ยงการคลิกเกินจำเป็นไม่ได้
• Invisible — วิดเจ็ตไม่เรนเดอร์เลย การตรวจสอบเกิดขึ้นเบื้องหลัง สะดวกสำหรับปุ่มและฟอร์มที่คุณไม่อยากเปลี่ยนดีไซน์ แต่ต้องจัดการข้อผิดพลาดอย่างระมัดระวัง

ขั้นตอนที่ 1: ทำความเข้าใจว่า Turnstile เห็นอะไรจากฝั่งคุณ

เป้าหมายของขั้นนี้: ก่อนจะตั้งค่าอะไร คุณต้องเข้าใจว่าข้อมูลอะไรในสภาพแวดล้อมของคุณที่วิดเจ็ตได้รับ นี่คือพื้นฐานสำหรับการวินิจฉัยในขั้นถัดไปและการทำงานผ่านพร็อกซีมือถืออย่างมีสติ

วิธีดูการทำงานของวิดเจ็ตด้วยตาตัวเอง

1. เปิดเว็บไซต์ใดก็ได้ที่มี Cloudflare Turnstile วิดเจ็ตแบบนี้สังเกตง่ายจากโลโก้ Cloudflare ที่มุมขวาล่างของบล็อก และลิงก์ «Privacy» กับ «Terms»
2. กด F12 หรือคลิกขวา — «ตรวจสอบองค์ประกอบ» เพื่อเปิดเครื่องมือนักพัฒนา
3. ไปที่แท็บ «Network» (เครือข่าย) แล้วรีเฟรชหน้า
4. ในช่องกรองพิมพ์ challenges.cloudflare.com คุณจะเห็นคำขอหลายรายการ: การโหลด api.js การโหลด iframe ของวิดเจ็ต และคำขอ POST หนึ่งรายการหรือมากกว่า — นี่คือการส่งผลการตรวจสอบ
5. เปิดแท็บ «Elements» (องค์ประกอบ) แล้วหาบล็อกที่มีคลาส cf-turnstile ข้างในจะปรากฏช่อง input ซ่อนชื่อ cf-turnstile-response พร้อมสตริงยาว ๆ ในค่า นั่นคือโทเคน

เคล็ดลับ: เนื้อหาของคำขอ POST ถูกเข้ารหัสและทำให้อ่านยาก อ่านก็ไม่เกิดประโยชน์ ให้ดูอย่างอื่นแทน: ส่งคำขอไปกี่รายการ การตรวจสอบใช้เวลานานเท่าไหร่ และสถานะวิดเจ็ตเปลี่ยนเป็น «Success» หรือยัง นี่คือตัวบ่งชี้ความน่าเชื่อถือจากภายนอกของคุณ

Turnstile เห็นอะไรเกี่ยวกับเบราว์เซอร์คุณ

วิดเจ็ตรัน JavaScript ในหน้าต่างของคุณโดยตรง จึงเข้าถึงทุกอย่างที่สคริปต์ใด ๆ บนหน้าเข้าถึงได้: เวอร์ชันเอนจิน API ที่ติดตั้ง ขนาดหน้าจอ เขตเวลา ภาษาในอินเทอร์เฟซ ลักษณะการเรนเดอร์กราฟิกและฟอนต์ พฤติกรรมของฟังก์ชันที่มักถูกเขียนทับในเบราว์เซอร์อัตโนมัติ มันไม่อ่านไฟล์ของคุณและไม่เข้าไปในแท็บอื่น แต่สังเกตได้ดีเมื่อเบราว์เซอร์ประกาศอย่างหนึ่งแต่ทำอีกอย่าง ตัวอย่างเช่น User-Agent บอกว่า «Chrome บน Android» แต่ในสภาพแวดล้อมไม่มีเหตุการณ์สัมผัสและมี API ที่ไม่มีบนมือถือ

Turnstile เห็นอะไรเกี่ยวกับเครือข่ายคุณ

ตรงนี้เริ่มน่าสนใจสำหรับคนที่ทำงานผ่านพร็อกซีมือถือ คำขอทั้งหมดของวิดเจ็ตไปที่เซิร์ฟเวอร์ Cloudflare ดังนั้น Cloudflare จึงเห็นที่อยู่ IP ภายนอกของคุณ ระบบอัตโนมัติของมัน (คือผู้ให้บริการ) ประเทศ และคุณลักษณะระดับต่ำของการเชื่อมต่อ — ว่าลูกค้าของคุณสร้างการเชื่อมต่อที่ปลอดภัยอย่างไร คุณลักษณะเหล่านี้แตกต่างกันในแต่ละเบราว์เซอร์ และ Cloudflare เปรียบเทียบกับ User-Agent ที่ประกาศไว้

ผู้ให้บริการมือถือแจกที่อยู่จากพูลรวมขนาดใหญ่ มีสมาชิกจริงหลายร้อยคนใช้ที่อยู่เดียวกันในเวลาเดียวกัน ที่อยู่แบบนี้จึงมีชื่อเสียงเป็นกลางหรือดี — บล็อกมันหมายถึงบล็อกคนจริง แต่ชื่อเสียงเป็นเพียงสัญญาณหนึ่ง ถ้าจากที่อยู่มือถือส่งเบราว์เซอร์ที่มีลายนิ้วมือเครือข่ายของสคริปต์เดสก์ท็อป มีเขตเวลาทวีปอื่น และมีร่องรอยระบบอัตโนมัติ ภาพรวมก็เริ่มไม่สอดคล้อง และวิดเจ็ตจะเปลี่ยนเป็นโหมดต้องมีปฏิสัมพันธ์หรือปฏิเสธ

Turnstile เห็นอะไรเกี่ยวกับพฤติกรรมคุณ

ในโหมดที่จัดการได้ วิดเจ็ตให้ความสนใจกับความเร็วที่ฟอร์มถูกส่งหลังโหลด ว่าผู้ใช้มีปฏิสัมพันธ์กับหน้าเว็บหรือไม่ และการคลิกติ๊กถูกดูเป็นธรรมชาติไหม ในโหมดมองไม่เห็นและไม่ต้องมีปฏิสัมพันธ์ องค์ประกอบด้านพฤติกรรมมีน้อยมาก — การตัดสินใจอาศัยสภาพแวดล้อมและเครือข่าย

✅ ตรวจสอบ: ในขั้นนี้คุณต้องเปิดแท็บ Network กรองคำขอไปที่ challenges.cloudflare.com เห็นช่องซ่อน cf-turnstile-response และอธิบายด้วยคำพูดตัวเองได้ว่าสัญญาณสามกลุ่มคืออะไร: เบราว์เซอร์ เครือข่าย พฤติกรรม ถ้าทำได้แล้ว — ไปสร้างวิดเจ็ตของคุณต่อ

ปัญหาที่อาจเจอ

• ไม่มีคำขอไปที่ challenges.cloudflare.com เลย เป็นไปได้ว่าโดเมนถูกบล็อกโดยส่วนขยายเบราว์เซอร์หรือตัวกรองขององค์กร ปิดตัวบล็อกระหว่างทดสอบก่อน
• วิดเจ็ตค้างในสถานะกำลังตรวจสอบไม่สิ้นสุด ตรวจสอบเวลาระบบในคอมพิวเตอร์: การคลาดเคลื่อนมากกับเวลาจริงทำให้การตรวจสอบพัง

ขั้นตอนที่ 2: สร้างวิดเจ็ตในแผง Cloudflare

เป้าหมายของขั้นนี้: ได้คีย์คู่หนึ่ง — site key และ secret key — และตั้งค่ารายการโดเมนกับโหมดการทำงานให้ถูกต้อง

1. เปิดแผงควบคุม Cloudflare และเข้าสู่ระบบบัญชี ถ้าไม่มีบัญชี กด «Sign up» กรอกอีเมลและรหัสผ่าน ยืนยันอีเมล
2. ในเมนูซ้ายมือ หารายการ Turnstile ถ้ามีหลายบัญชี ให้เลือกอันที่ต้องการที่หน้าหลักก่อน
3. กดปุ่มสีน้ำเงิน Add widget (เพิ่มวิดเจ็ต)
4. ในช่อง Widget name ใส่ชื่อที่เข้าใจง่าย เช่น «แลนดิ้งขอข้อมูล — หลัก» ชื่อนี้มีแค่คุณที่เห็น แต่เมื่อมีวิดเจ็ตเป็นสิบตัวมันจะช่วยไม่ให้สับสน
5. ในบล็อก Hostname management กด Add hostnames แล้วใส่โดเมนที่วิดเจ็ตจะทำงาน ใส่โดยไม่มีโปรโตคอลและไม่มีพาธ: example.ru ไม่ใช่ https://example.ru/form ซับโดเมนต้องเพิ่มแยก หรือระบุโดเมนราก — แล้วซับโดเมนจะได้รับอนุญาตด้วย
6. สำหรับทดสอบในเครื่อง ให้เพิ่ม localhost ในรายการ รองรับอย่างเป็นทางการและไม่กระทบการทำงานจริง
7. ในบล็อก Widget Mode เลือกโหมด ครั้งแรกให้เลือก Managed — คุณจะเห็นทุกสถานะของวิดเจ็ตรวมถึงแบบต้องมีปฏิสัมพันธ์
8. ตัวเลือก Pre-clearance ให้ปิดไว้ก่อน จำเป็นเฉพาะเมื่อเว็บไซต์ของคุณผ่านพร็อกซี Cloudflare และเราจะพูดถึงในส่วนขั้นสูง
9. กด Create
10. หน้าถัดไปคุณจะเห็นสองช่อง: Site Key และ Secret Key คัดลอกทั้งคู่ลงไฟล์จดบันทึก Secret key ดูย้อนหลังได้ในตั้งค่าวิดเจ็ต แต่สะดวกกว่าถ้าเซฟไว้เลย

เคล็ดลับ: สร้างสองวิดเจ็ตพร้อมกัน — อันหนึ่งสำหรับโดเมนจริง อีกอันชื่อ «ทดสอบ» กับโฮสต์เนม localhost คุณจะได้ทดลองโหมดและการตั้งค่าโดยไม่กระทบสถิติของวิดเจ็ตทำงาน

ผลลัพธ์ที่ถูกต้องเป็นอย่างไร

ในรายการ Turnstile จะมีการ์ดแสดงชื่อวิดเจ็ต โหมด และรายการโฮสต์เนม Site key ขึ้นต้นด้วย «0x» ยาวประมาณ 24 ตัวอักษร secret key ก็ขึ้นต้นด้วย «0x» แต่ยาวกว่า ถ้าคีย์ดูแปลกไป คุณอาจคัดลอกช่องผิด

✅ ตรวจสอบ: ในไฟล์จดบันทึกมี site key, secret key, ชื่อวิดเจ็ต, รายการโฮสต์เนม และโหมดที่เลือกไว้ ในแผง Cloudflare วิดเจ็ตแสดงในรายการพร้อมสถานะใช้งานอยู่

ปัญหาที่อาจเจอ

• ปุ่ม Create กดไม่ได้ ยังไม่เพิ่มโฮสต์เนมเลยหรือใส่ผิด (มีโปรโตคอล เครื่องหมายทับ ช่องว่าง)
• หาเมนู Turnstile ไม่เจอ คุณอยู่ในตั้งค่าของโดเมนใดโดเมนหนึ่ง กลับขึ้นไประดับบัญชี — Turnstile อยู่ตรงนั้น ไม่ได้อยู่ในโซน

ขั้นตอนที่ 3: ฝังวิดเจ็ตลงในหน้าที่มีฟอร์ม

เป้าหมายของขั้นนี้: วิดเจ็ตแสดงบนหน้าเว็บ ผ่านการตรวจสอบ และใส่โทเคนลงในฟอร์ม

เชื่อมต่อสคริปต์

1. เปิดไฟล์ HTML ของหน้าที่มีฟอร์มในโปรแกรมแก้ไข
2. ภายในแท็ก head หรือก่อนแท็กปิด body ให้เพิ่มบรรทัดเชื่อมต่อสคริปต์:

<script src='https://challenges.cloudflare.com/turnstile/v0/api.js' async defer></script>

แอตทริบิวต์ async และ defer ทำให้หน้าเว็บไม่ต้องรอการโหลดสคริปต์ วิดเจ็ตจะปรากฏช้าเล็กน้อย แต่ผู้ใช้จะไม่เห็นความหน่วงในการโหลดเนื้อหา

วางคอนเทนเนอร์วิดเจ็ต

1. หาฟอร์มที่คุณต้องการป้องกัน ปกติคือแท็ก form ที่มีช่องชื่อ อีเมล เบอร์โทร
2. ก่อนปุ่มส่งโดยตรง ให้แทรกบล็อกว่างที่มีคลาส cf-turnstile และ site key ของคุณ:

<form action='/submit.php' method='POST'> <input type='text' name='name' placeholder='ชื่อของคุณ'> <input type='email' name='email' placeholder='อีเมล'> <div class='cf-turnstile' data-sitekey='SITE_KEY_ของคุณ' data-theme='light'></div> <button type='submit'>ส่ง</button> </form>

1. แทนที่ SITE_KEY_ของคุณ ด้วยคีย์จากไฟล์จดบันทึก ห้ามใส่ secret key ตรงนี้ เด็ดขาด
2. บันทึกไฟล์และเปิดหน้าเว็บในเบราว์เซอร์ผ่าน localhost

สิ่งที่คุณควรเห็น

หนึ่งถึงสองวินาทีหลังโหลด ในตำแหน่งของบล็อกจะปรากฏวิดเจ็ตขนาดประมาณ 300 คูณ 65 พิกเซล ตอนแรกมันจะแสดงตัวบ่งชี้การโหลดและข้อความ «Verifying» จากนั้นเป็นติ๊กถูกสีเขียวและ «Success» ถ้า Cloudflare ตัดสินใจตรวจสอบสภาพแวดล้อมซ้ำ จะมีช่องติ๊กถูกพร้อมข้อความ «Verify you are human» — คลิกแล้วสักครู่ วิดเจ็ตจะแสดงความสำเร็จ

เปิดเครื่องมือนักพัฒนา แท็บ Elements แล้วขยายบล็อก cf-turnstile ข้างในมีช่อง input ซ่อนชื่อ cf-turnstile-response ค่าของมันคือโทเคนยาว ๆ นี่แหละที่จะส่งไปเซิร์ฟเวอร์เมื่อส่งฟอร์ม

แอตทริบิวต์ที่มีประโยชน์ของคอนเทนเนอร์

• data-theme — light, dark หรือ auto โหมด auto จะปรับตามธีมระบบของผู้ใช้
• data-size — normal, compact หรือ flexible โหมด flexible จะขยายวิดเจ็ตตามความกว้างของคอนเทนเนอร์ — เหมาะกับเลย์เอาต์มือถือ
• data-language — รหัสภาษา เช่น th หรือ ru โดยค่าเริ่มต้นวิดเจ็ตใช้ภาษาของเบราว์เซอร์
• data-action — ป้ายสั้น ๆ เช่น login หรือ checkout มันจะส่งกลับมาในคำตอบ siteverify และช่วยแยกฟอร์มในสถิติ
• data-callback — ชื่อฟังก์ชัน JavaScript ที่จะถูกเรียกเมื่อสำเร็จ โทเคนจะเข้ามาในนั้น
• data-error-callback — ฟังก์ชันที่จะรับรหัสข้อผิดพลาดถ้ามีอะไรผิดพลาด
• data-refresh-expired — ทำอย่างไรเมื่อโทเคนหมดอายุ: auto ขอใหม่เอง, manual แสดงปุ่มรีเฟรช, never ไม่ทำอะไร

เคล็ดลับ: เพิ่ม data-error-callback ไว้เลย และแสดงรหัสข้อผิดพลาดในคอนโซล รหัสของ Turnstile ให้ข้อมูลดี: กลุ่ม 110xxx บอกปัญหากับคีย์หรือโดเมน, 300xxx คือการทำงานล้มเหลวในเบราว์เซอร์, 600xxx คือการตรวจสอบไม่ผ่าน ถ้าไม่มีตรงนี้คุณจะได้แต่เดาว่าทำไมวิดเจ็ตเงียบ

อีกทางเลือก: เรนเดอร์ชัดเจนผ่าน JavaScript

ถ้าคุณทำงานบนเฟรมเวิร์กหรืออยากควบคุมจังหวะที่วิดเจ็ตปรากฏ ให้เปลี่ยนการเรนเดอร์แบบอิมพลิซิตเป็นเอ็กซ์พลิซิต เพิ่มพารามิเตอร์ render=explicit ที่ที่อยู่สคริปต์ แล้วเรียก turnstile.render ด้วยพารามิเตอร์ที่ต้องการ:

turnstile.render('#my-widget', { sitekey: 'SITE_KEY_ของคุณ', theme: 'auto', action: 'signup', callback: function(token) { console.log('ได้โทเคนแล้ว', token.length); } });

วิธีนี้ช่วยให้เรนเดอร์วิดเจ็ตใหม่หลังข้อผิดพลาดด้วยเมธอด turnstile.reset และดึงโทเคนปัจจุบันด้วยเมธอด turnstile.getResponse

✅ ตรวจสอบ: วิดเจ็ตแสดงบนหน้าเว็บ แสดง «Success» มีฟิลด์ cf-turnstile-response พร้อมโทเคนใน DOM และไม่มีข้อผิดพลาดในคอนโซล ลองรีเฟรชหน้าเว็บสาม-สี่ครั้ง — ทุกครั้งควรมีโทเคนใหม่

ปัญหาที่อาจเจอ

• วิดเจ็ตแสดงข้อผิดพลาด 110200 โดเมนที่เปิดหน้ามาจากยังไม่ถูกเพิ่มในโฮสต์เนมของวิดเจ็ต ตรวจว่าคุณเปิดผ่าน localhost จริง ไม่ใช่ 127.0.0.1 หรือ file:// — มันเป็นโฮสต์เนมต่างกัน
• วิดเจ็ตไม่ปรากฏ ในคอนโซลว่างเปล่า สคริปต์ไม่โหลด ตรวจที่อยู่สคริปต์ว่าพิมพ์ผิดไหมและไม่มีตัวบล็อก
• วิดเจ็ตทำเลย์เอาต์พัง ใช้ data-size='flexible' หรือห่อบล็อกในคอนเทนเนอร์ที่มีความกว้างตามต้องการ

ขั้นตอนที่ 4: ตั้งค่าการตรวจสอบโทเคนฝั่งเซิร์ฟเวอร์

เป้าหมายของขั้นนี้: เซิร์ฟเวอร์ปฏิเสธการส่งฟอร์มใด ๆ ที่ไม่มีโทเคนที่ถูกต้อง นี่คือขั้นที่สำคัญที่สุด — ถ้าไม่มีมัน วิดเจ็ตก็แค่ของประดับ เพราะบอทสามารถส่งคำขอ POST ตรงเข้ามาโดยข้ามหน้าเว็บได้

คำขอไปที่ siteverify มีโครงสร้างอย่างไร

เซิร์ฟเวอร์ของคุณส่งคำขอ POST ไปที่ https://challenges.cloudflare.com/turnstile/v0/siteverify พร้อมฟิลด์:

• secret — คีย์ลับของคุณ;
• response — โทเคนจากฟิลด์ cf-turnstile-response;
• remoteip — IP ของผู้เข้าชม ไม่บังคับ แต่มีประโยชน์;
• idempotency_key — ตัวระบุคำขอแบบไม่บังคับ จะพูดถึงในส่วนขั้นสูง

คำตอบจะเป็น JSON ฟิลด์สำคัญ:

{ "success": true, "challenge_ts": "2026-03-14T10:22:31.000Z", "hostname": "example.ru", "error-codes": [], "action": "signup", "cdata": "" }

โทเคนมีอายุ 300 วินาที และใช้ได้ ครั้งเดียว การตรวจสอบโทเคนเดิมซ้ำจะคืนข้อผิดพลาด timeout-or-duplicate

ตัวอย่างใน PHP

1. เปิดไฟล์ตัวจัดการฟอร์ม เช่น submit.php
2. ที่จุดเริ่มต้น ก่อนจัดการข้อมูลฟอร์มใด ๆ ให้เพิ่มบล็อกตรวจสอบ:

<?php $token = $_POST['cf-turnstile-response'] ?? ''; if ($token === '') { http_response_code(400); exit('การตรวจสอบไม่ผ่าน: ไม่มีโทเคน'); } $data = [ 'secret' => getenv('TURNSTILE_SECRET'), 'response' => $token, 'remoteip' => $_SERVER['REMOTE_ADDR'] ]; $ch = curl_init('https://challenges.cloudflare.com/turnstile/v0/siteverify'); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 10); $raw = curl_exec($ch); curl_close($ch); $result = json_decode($raw, true); if (empty($result['success'])) { http_response_code(403); exit('การตรวจสอบไม่ผ่าน: ' . implode(',', $result['error-codes'] ?? ['no-response'])); } 






เกี่ยวกับผู้เขียน










Roman Melnikov
Technical Writer and System Administrator







ประสบการณ์ทำงาน:
Technical writer and DevOps engineer with 9 years of experience. Created over 50 detailed guides on system configuration and administration. His instructions helped thousands of professionals successfully solve technical tasks. Popular author on Habr and YouTube.







การศึกษา:

Bauman Moscow State Technical University. Information Systems and Technologies








ความเชี่ยวชาญ:

Technical Documentation
DevOps
System Administration
Linux
Docker and Kubernetes
CI/CD
Infrastructure Automation
Cloud Technologies
System Monitoring
Bash and Python Scripting












แชร์บทความ: