Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Node.js
      • Installing & Exploring
      • Loading Modules
      • npm - Get Command Input
      • Express.js
        • Express Web Server
        • Template Engine & MVC
        • Authentication
        • Authentication Trong REST API Với JWT
        • File Upload with Multer, Express.js
        • Server-Side Validation Với Express-Validator
      • Sequelize
        • Sequelize Transactions: Đảm Bảo Tính Toàn Vẹn Dữ Liệu
        • 7 loại Data Types phổ biến Trong Sequelize
        • Phân Trang (Pagination) Trong Express.js Với Sequelize/MySQL
      • Hướng dẫn Cơ bản về Rest API
      • Node-cron Simple to Complex Setup with PM2
      • Hono
        • Hono Response
        • Error Handling
    • Cloudflare
      • Minimal Cloudflare Worker + Hono + Drizzle ORM (part 1)
      • Minimal Cloudflare Worker + Hono + Drizzle ORM (part 2)
    • htmx
      • HTMx Form: Request, Response, Swap
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • Typescript
      • TypeScript cơ bản (phần 1)
      • TypeScript cơ bản (phần 2)
      • require vs import
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • PHP
      • gruntJS
      • composer
      • MySQL
      • icon picker
        Thiết lập Cloudflare Turnstile chống spam trong PHP
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Payload CMS
youhoc

Thiết lập Cloudflare Turnstile chống spam trong PHP

Một giải pháp nhẹ hơn, gần như “vô hình” với người dùng thay thế Google reCAPTCHA.
Khi triển khai form đăng ký trong production, một vấn đề rất phổ biến là:
Bot spam tạo tài khoản hàng loạt
Fake email / username làm bẩn database
Tăng tải không cần thiết lên server
Trước đây, nhiều hệ thống dùng Google reCAPTCHA, nhưng:
UX không tốt (phải click chọn ảnh)
Dễ bị bypass nếu cấu hình không kỹ
Một giải pháp nhẹ hơn, gần như “vô hình” với người dùng là Cloudflare Turnstile.

Turnstile là gì?

Turnstile là một dịch vụ chống bot của Cloudflare
Hoạt động tương tự CAPTCHA nhưng:
Không cần người dùng tương tác
Nhẹ hơn reCAPTCHA
Tập trung vào trải nghiệm người dùng
👉 Về cơ bản:
Frontend: render widget → sinh token
Backend: verify token → xác nhận người dùng hợp lệ
⁠

Tích hợp vào form đăng ký (PHP)

Giả sử bạn đang có form như trong file register.php
⁠

Bước 1: Thêm script Turnstile

Thêm vào cuối file (trước </body>):
👉 Script này sẽ tự động render widget
⁠

Bước 2: Thêm widget vào form

Trong <form id='frmRegister'>, thêm:
Giải thích:
cf-turnstile: class để Cloudflare nhận diện
data-sitekey: public key (lấy từ dashboard)
⁠

Bước 3: Lấy token khi submit

Form của bạn đang submit bằng JS:
Cập nhật hàm:
Giải thích:
Turnstile sẽ tự tạo input hidden: cf-turnstile-response
Bạn lấy token này và gửi về server để verify
⁠

Bước 4: Verify ở backend (PHP)

Tạo file register_submit.php:
Giải thích:
Gửi request tới API verify của Cloudflare
Nếu success = false → chặn đăng ký
Nếu true → cho phép xử lý tiếp
⁠

Lấy Site Key và Secret Key

Vào dashboard của Cloudflare:
Turnstile → Add site
Lấy:
Site Key (frontend)
Secret Key (backend)
⁠

Một số lưu ý quan trọng (Best Practices)

✅ Nên làm

Verify token ở backend (bắt buộc)
Kết hợp thêm:
validate input
check trùng email / username
Reset Turnstile nếu submit fail:
⁠

❌ Không nên

❌ Tin tưởng token ở frontend
❌ Bỏ qua bước verify server
❌ Dùng lại token nhiều lần
⁠

Mở rộng (nâng cao)

Bạn có thể kết hợp thêm:
Rate limit đăng ký theo IP
Honeypot field (input ẩn chống bot)
Logging request nghi ngờ
⁠

Tổng kết

Trong bài này, bạn đã:
Hiểu Turnstile là gì
Tích hợp vào form PHP
Gửi token từ frontend
Verify ở backend
👉 Ưu điểm lớn nhất:
UX tốt hơn CAPTCHA truyền thống
Dễ tích hợp
Phù hợp production
Turnstile là gì?
Tích hợp vào form đăng ký (PHP)
Bước 1: Thêm script Turnstile
Bước 2: Thêm widget vào form
Bước 3: Lấy token khi submit
Bước 4: Verify ở backend (PHP)
Lấy Site Key và Secret Key
Một số lưu ý quan trọng (Best Practices)
✅ Nên làm
❌ Không nên
Mở rộng (nâng cao)
Tổng kết
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.