วิธีเพิ่ม Captcha ให้กับ WooCommerce Checkout

เผยแพร่แล้ว: 2022-10-18

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

วิธีเพิ่ม Captcha ให้กับ WooCommerce Checkout

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

ในการแก้ปัญหานี้ คุณต้องเพิ่ม captcha ที่จุดชำระเงิน บนร้านค้า WooCommerce ของคุณ บทความนี้จะกล่าวถึงสาเหตุและวิธีที่คุณสามารถเพิ่มแคปต์ชาเพื่อปกป้องธุรกิจของคุณจากเครื่องมือสแปมและบอท

คุณสามารถทำได้โดยใช้ปลั๊กอินหรือไม่มีปลั๊กอิน เราจะครอบคลุมวิธีการที่เป็นไปได้ทั้งหมดที่เรานำไปใช้ในร้านค้า WooCommerce ของเราที่สร้างด้วย ShopReady เพื่อให้คุณสามารถใช้มันเพิ่ม Captcha ลงในไซต์ของคุณได้ เริ่มกันเลย!

วิธีเพิ่ม Captcha ให้กับ WooCommerce Checkout

คุณอาจสร้างร้านค้า WooCommerce ของคุณด้วยเครื่องมืออย่าง ShopReady แต่พยายามดิ้นรนเพื่อความปลอดภัย การเพิ่มแคปต์ชาที่จุดชำระเงินอาจเป็นหนึ่งในมาตรการรักษาความปลอดภัยที่คุณควรตรวจสอบ

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

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

สารบัญ

วิธีเพิ่ม Captcha ให้กับ Woocommerce Checkout

วิธีเพิ่ม Captcha ให้กับ WooCommerce Checkout

ตอนนี้ย้ายไปยังวิธีที่เราได้เพิ่มแคปต์ชาไปยังหน้าชำระเงินของร้านค้า ShopReady WooCommerce ของเรา เราได้ลองใช้ทั้งแบบปลั๊กอินและแบบไม่มีปลั๊กอินแล้ว

ระหว่างที่ลองทำสิ่งเหล่านี้ เราก็ได้ค้นพบปลั๊กอินและตัวอย่างโค้ดที่ยอดเยี่ยม มาพูดถึงวิธีการทั้งหมดเหล่านี้และดูว่าวิธีใดที่เหมาะกับคุณ

ด้วยปลั๊กอิน

เพื่อให้ลูกค้าของคุณดำเนินการซื้อจากร้านค้า WooCommerce ของคุณ คุณสามารถใช้ปลั๊กอินการตรวจสอบ captcha ต่างๆ ในหน้าชำระเงินหรือที่ใดก็ได้ที่คุณต้องการบนไซต์

มีปลั๊กอินดังกล่าวอยู่ไม่กี่ตัว อย่างไรก็ตาม 3 อันดับแรกที่เราพยายามสร้างร้าน WC ด้วย ShopReady มีดังต่อไปนี้:

  • reCaptcha สำหรับ WooCommerce

นี่คือปลั๊กอินระดับพรีเมียมที่ออกแบบมาโดยเฉพาะสำหรับ WooCommerce Spam Protection มันไม่สามารถใช้ได้ในเวอร์ชันฟรี ดังนั้นคุณจะต้องจ่ายเงินก่อน เมื่อใช้ปลั๊กอินนี้ คุณสามารถเพิ่ม Google ReCAPTCHA ในหน้าชำระเงินและแบบฟอร์มอื่นๆ รวมทั้งลงทะเบียน เข้าสู่ระบบ แบบฟอร์มรหัสผ่านหาย ฯลฯ

มันสามารถแสดงแคปต์ชาหลายอันในหน้าเดียว เช่น ถ้าคุณมีแบบฟอร์มการเข้าสู่ระบบและการลงทะเบียนในหน้าเดียวกัน คุณสามารถเปิดใช้งานแคปต์ชาในทั้งสองรูปแบบ

คุณสามารถมีทั้ง reCaptcha v2 และ ReCaptcha V3 ได้โดยใช้ปลั๊กอินนี้ คุณสมบัติหลักอื่นๆ บางส่วน ได้แก่ การตรวจหาภาษาของผู้ใช้อัตโนมัติ การปรับแต่ง reCaptcha การปรับแต่งข้อความแสดงข้อผิดพลาด และอื่นๆ

การติดตั้งนั้นง่ายเหมือนกับปลั๊กอิน WordPress อื่นๆ จากหน้าปลั๊กอิน การตั้งค่าที่ง่ายมาพร้อมกับตัวเลือกเปิด/ปิดเพื่อเปิดใช้งานหรือปิดใช้งาน captcha ในตำแหน่งที่ต้องการ เราไม่มีปัญหาในการเปิดใช้งานด้วยเครื่องมือ ShopReady

ปลั๊กอินนี้สร้างขึ้นตามมาตรฐานระดับสูงเพื่อหยุดการลงทะเบียนและคำสั่งซื้อปลอม และเพื่อให้แน่ใจว่าไม่มีสิ่งใดมาทำลายไซต์ได้

  • CAPTCHA 4WP

รองรับและดูแลโดย WP White Security นี่เป็นหนึ่งใน ปลั๊กอิน captcha ที่ดีที่สุดที่อนุญาตให้มนุษย์จริงผ่านแบบฟอร์ม WooCommerce และหน้าชำระเงิน

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

จุดเด่นของปลั๊กอินนี้คือคุณสามารถใช้สิ่งนี้เพื่อแสดงแคปต์ชาหลายรายการในหน้าเดียว นอกจากนี้ยังรองรับรูปแบบ captcha แบบกำหนดเอง คุณสามารถเลือกจาก v2 (ฉันไม่ใช่หุ่นยนต์), v2 (ล่องหน) หรือ v3 โดยจะตรวจจับภาษาของผู้ใช้โดยอัตโนมัติเพื่อแสดงแคปต์ชาและการตั้งค่าตามนั้น

คุณสามารถเพิ่ม captchas ได้หลายรูปแบบตามค่าเริ่มต้น แต่สำหรับ Contact Form 7 คุณจะต้อง เพิ่ม short code มีทั้งแบบฟรีและแบบพรีเมียม เราได้ลองใช้เวอร์ชันพรีเมียมในขณะที่ใช้ ShopReady

คุณสามารถติดตั้งได้อย่างง่ายดายจากหน้าปลั๊กอินในบัญชี WooCommerce ของคุณ ค้นหา CAPTCHA 4WP ติดตั้งและเปิดใช้งานเพื่อปกป้องร้านค้าของคุณจากนักส่งสแปม

  • reCaptcha โดย BestWebSoft

BestWebSoft นำเสนอโซลูชัน captcha ที่มีประสิทธิภาพเพื่อปกป้องร้านค้า WooCommerce ของคุณ ใช้งานได้กับเกือบทุกรูปแบบ รวมถึงแบบฟอร์มการเรียกเก็บเงินของ WooCommerce

คุณสามารถใช้ reCaptcha v2, v3 และเวอร์ชันที่มองไม่เห็นด้วยปลั๊กอินนี้ ลูกค้าต้องยืนยันว่าไม่ใช่หุ่นยนต์ก่อนดำเนินการซื้อของ

ป้องกันสแปมและการโจมตีด้วยกำลังเดรัจฉานโดยใช้ Limit Attempts ผลิตภัณฑ์ได้รับการสนับสนุนโดยการสนับสนุนที่รวดเร็วและเป็นมิตร

การติดตั้งทำได้ง่ายเหมือนกับปลั๊กอิน WP อื่นๆ คุณสามารถดาวน์โหลด ติดตั้ง และเปิดใช้งานได้จากหน้าปลั๊กอิน เมื่อตั้งค่าแล้ว คุณสามารถไปที่การตั้งค่าและเลือกหน้าชำระเงินหรือที่อื่นๆ ที่จำเป็นเพื่อเปิดใช้งาน

ปลั๊กอินประกอบด้วยการตั้งค่าที่ง่ายพร้อมคำแนะนำโดยละเอียดสำหรับการตั้งค่าอย่างรวดเร็ว เป็นปลั๊กอินหลายภาษาที่มีคุณสมบัติพร้อม RTL คุณยังสามารถเพิ่มรหัสที่กำหนดเองได้โดยใช้การตั้งค่า มันมาพร้อมกับธีมแคปต์ชาหลายแบบเช่นกัน โดยรวมแล้ว ปลั๊กอินทำงานได้ดีกับเครื่องมือสร้าง ShopReady

ไม่มีปลั๊กอิน

หลังจากเห็นวิธีปลั๊กอินแล้ว ก็ถึงเวลาค้นหาวิธีที่คุณสามารถเพิ่ม captcha โดยไม่ต้องใช้ปลั๊กอินในหน้าชำระเงินของ WooCommerce

เนื่องจาก Google ให้บริการต่อต้านสแปม reCaptcha v2 ฟรี คุณจึงสามารถนำไปใช้ในไซต์ของคุณได้โดยไม่ต้องใช้ปลั๊กอิน เรามีประสบการณ์ที่ประสบความสำเร็จในการดำเนินการนี้ในขณะที่ใช้ ShopReady เป็น captcha API ที่ได้รับความนิยมมากที่สุด และคุณต้องเขียนโค้ดเพื่อเพิ่มลงในการชำระเงิน WC โดยไม่ต้องใช้ปลั๊กอิน

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

<?php

/**

* เพิ่ม reCaptcha ลงในแบบฟอร์มการชำระเงิน

* @param $checkout

*/

ฟังก์ชั่น doublee_show_me_the_checkout_captcha($checkout) {

echo '<div class=”g-recaptcha” data-sitekey=”YOUR_KEY_HERE”></div>';

}

add_action('woocommerce_checkout_order_review', 'doublee_show_me_the_checkout_captcha', 18);

/**

* ตรวจสอบ reCaptcha

*/

ฟังก์ชั่น doublee_process_recaptcha () {

$postdata = $_POST['g-recaptcha-response'];

$verified_recaptcha = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=YOUR_KEY_HERE&response='.$postdata);

$response = json_decode($verified_recaptcha);

if(!$response->success) {

wc_add_notice('โปรดตรวจสอบว่าคุณไม่ใช่หุ่นยนต์' ,'ข้อผิดพลาด');

}

}

add_action('woocommerce_checkout_process', 'doublee_process_recaptcha');

เราลองแล้วและทำงานได้ดีกับร้านค้า ShopReady WooCommerce ของเรา

วิธีเปิดใช้งาน Google Recaptcha V2 บน Woocommerce Checkout

วิธีเพิ่ม Captcha ให้กับ WooCommerce Checkout
Google ReCaptcha v2 เป็นส่วนขยายที่ได้รับความนิยมมากที่สุดสำหรับ captchas เพื่อตั้งค่าในไซต์ WooCommerce ดังนั้น เราจึงคิดว่ามันคุ้มค่าที่จะแนะนำคุณเกี่ยวกับขั้นตอนผู้ใช้ที่สมบูรณ์

ในการทำเช่นนี้ วิธีที่ดีที่สุดคือการใช้ reCaptcha สำหรับปลั๊กอิน WooCommerce เนื่องจากรองรับทั้งเวอร์ชัน V2 และ V3

  • ขั้นแรก ดาวน์โหลดไฟล์ .zip จากบัญชี WC
  • ไปที่ผู้ดูแลระบบ > ปลั๊กอิน > เพิ่มใหม่ > อัปโหลดปลั๊กอิน
  • เลือกไฟล์ที่คุณดาวน์โหลด
  • ติดตั้งและเปิดใช้งาน reCaptcha
  • หลังจากเปิดใช้งาน ให้ไปที่ wooCommerce > การตั้งค่า
  • คลิกแท็บ reCaptcha ในการตั้งค่า
  • เลือกเวอร์ชัน Recaptcha เป็น ReCaptcha V2 (ช่องทำเครื่องหมาย)
  • ตั้งค่ารหัสเว็บไซต์และรหัสลับ
  • เก็บฟิลด์อื่น ๆ เช่นข้อความแสดงข้อผิดพลาดตามที่เป็นอยู่
  • บันทึกการตั้งค่า
  • จากรายการแท็บสำหรับเปิดใช้งาน captchas ให้เลือกการชำระเงินของผู้เยี่ยมชม WooCommerce และทำเครื่องหมายที่ช่องเพื่อเปิดใช้งาน reCaptcha ไปยังหน้าการชำระเงินของผู้เยี่ยมชม

ในการรับ Site Key และ Secret Key ให้ทำตามขั้นตอนด้านล่าง:

  • เข้าสู่ระบบบัญชี Google ของคุณ
  • ไปที่ คอนโซลผู้ดูแลระบบ Google ReCaptcha (https://www.google.com/recaptcha/admin)
  • คลิกปุ่ม + ที่ด้านบนขวา
  • เพิ่มชื่อเว็บไซต์ของคุณใน Add Label
  • เลือก reCaptcha v2
  • เลือกช่องทำเครื่องหมาย "ฉันไม่ใช่หุ่นยนต์"
  • เพิ่มโดเมนเว็บไซต์
  • ยอมรับเงื่อนไขการให้บริการ
  • เมื่อเสร็จแล้วให้คลิกส่ง
  • คีย์ไซต์และคีย์ลับควรปรากฏขึ้น เพียงคัดลอกและใช้งาน

บทสรุป

วิธีเพิ่ม Captcha ให้กับ WooCommerce Checkout
วิธีเพิ่ม Captcha ให้กับ WooCommerce Checkout

นี่เป็นบทสรุปสำหรับคำแนะนำในการเพิ่ม captcha ให้กับการชำระเงิน WooCommerce เราต้องบอกว่าวิธีการ captcha ทั้งหมดเหล่านี้ทำงานได้ดีในการชำระเงิน ShopReady WooCommerce ของเรา ดังนั้น บทความนี้น่าจะใช้ได้ผลดีสำหรับคุณเช่นกัน!

มีการกล่าวถึงปลั๊กอินที่ยอดเยี่ยมบางตัวที่สามารถปกป้องร้าน WC ของคุณจากผู้ส่งอีเมลขยะได้อย่างมีประสิทธิภาพ reCaptcha สำหรับ WooCommerce เป็นโปรแกรมที่โดดเด่นซึ่งช่วยให้คุณสามารถตั้งค่า Google reCaptcha V2 หรือ V3 ได้อย่างง่ายดายและมีประสิทธิภาพ

เราได้พูดคุยกันถึงวิธีที่คุณสามารถเพิ่ม reCaptcha V2 API โดยการเพิ่มโค้ดบางส่วนในตำแหน่งที่เกี่ยวข้อง ไม่ว่าคุณจะเลือกวิธีใดจากวิธีการข้างต้น คุณสามารถคาดหวังให้ไซต์ของคุณปลอดภัยจากคำสั่งซื้อที่ฉ้อฉลหลังจากเปิดใช้งานวิธีใดวิธีหนึ่ง

แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัยของ WordPress