2 วิธีง่ายๆ ในการเปิดใช้งานการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ใน WooCommerce

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

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

ทำไมคุณควรเปิดใช้ งาน การลงชื่อเข้าใช้หมายเลขโทรศัพท์ WooCommerce ในร้านค้าของคุณ?

การลงทะเบียนและเข้าสู่ระบบโทรศัพท์มีประโยชน์อย่างมากสำหรับร้านค้า WooCommerce ที่ต้องพึ่งพาหมายเลขโทรศัพท์มือถือของลูกค้าเป็นอย่างมาก เช่น บริการส่งอาหาร แท็กซี่ เป็นต้น

นอกเหนือจากช่องเฉพาะเหล่านี้แล้ว ด้านล่างนี้คือข้อดีบางประการที่เป็นประโยชน์ต่อธุรกิจใดๆ

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

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

#1: เปิดใช้งานการลงชื่อเข้าใช้หมายเลขโทรศัพท์บนร้านค้า WooCommerce ของคุณด้วยปลั๊กอิน

มีปลั๊กอินหลายตัวที่สามารถช่วยคุณได้ ตัวอย่างเช่น:

• การลงทะเบียนและเข้าสู่ระบบด้วยหมายเลขโทรศัพท์มือถือ
• ตัวเลข: หมายเลขโทรศัพท์มือถือ WordPress แบบฟอร์มลงทะเบียน OTP และเข้าสู่ระบบ
• เข้าสู่ระบบด้วยหมายเลขโทรศัพท์มือถือสำหรับ WooCommerce

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

ติดตั้ง ปลั๊กอิน " เข้าสู่ระบบด้วยหมายเลขโทรศัพท์ " เปิดใช้งานบน ร้านค้า WooCommerce ของคุณ

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน “ เข้าสู่ระบบด้วยหมายเลขโทรศัพท์ ” บนร้านค้า WooCommerce ของคุณ ด้านล่างนี้เป็นคำแนะนำ

1. ประการแรก จากแดชบอร์ดของ WordPress ให้ไปที่หน้า ปลั๊กอิน > เพิ่มหน้าใหม่

2. ป้อน "เข้าสู่ระบบด้วยหมายเลขโทรศัพท์" ในช่องค้นหาที่มุมบนขวา
3. ปลั๊กอินควรปรากฏเป็นอันดับแรกในรายการ คลิกปุ่ม ติดตั้ง ทันทีที่แสดงถัดจากชื่อ
4. หลังจากนั้น ปลั๊กอินจะถูกดาวน์โหลด เมื่อเสร็จแล้วคุณจะเห็นปุ่ม ติดตั้ง ทันทีเปลี่ยนเป็นปุ่ม เปิดใช้งาน คลิกเลย

สร้างหน้าเข้าสู่ระบบ/ลงทะเบียนใหม่

ขั้นตอนต่อไปคือการแทรกรหัสย่อของปลั๊กอินลงในหน้าเข้าสู่ระบบ/ลงทะเบียนใหม่

1. ไปที่ หน้า > เพิ่มใหม่ จากแดชบอร์ด WordPress

2. เลือกชื่อสำหรับหน้าใหม่ เช่น “ หน้าเข้าสู่ระบบ/ลงทะเบียน ”

3. ใส่รหัสย่อ [idehweb_lwp] ไว้ข้างใน
4. เผยแพร่ หน้า

รับ OTP ฟรี 10,000 SMS ต่อเดือนด้วย Firebase

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

คุณสามารถใช้ Firebase จาก Google มันให้ 10,000 OTP SMS ฟรีต่อเดือน นี่คือวิธี:

1. ลงชื่อเข้าใช้คอนโซล Firebase โดยใช้บัญชี Google ของคุณ
2. คลิกปุ่ม สร้างโครงการ

3. ตอนนี้ คุณจะต้องป้อนชื่อสำหรับโปรเจ็กต์ใหม่ ยอมรับข้อกำหนดในการให้บริการของ Firebase แล้วคลิกปุ่ม สร้างโปรเจ็ กต์
4. เมื่อสร้างโปรเจ็กต์สำเร็จแล้ว ที่แถบด้านข้างด้านซ้าย ให้ไปที่หน้า Build > Authentication

5. คลิกปุ่ม เริ่มต้น
6. เลือก โทรศัพท์ เป็นผู้ให้บริการ

7. สลับการสลับที่มุมบนขวาเพื่อเปิดใช้งานตัวเลือกนี้ จากนั้นคลิกปุ่ม บันทึก

8. เลื่อนลงไปที่ส่วน โดเมนที่ได้รับอนุญาต คลิกปุ่ม เพิ่มโดเมน และป้อนชื่อโดเมนของร้านค้า WooCommerce ของคุณ จากนั้นคลิกปุ่ม เพิ่ม

9. ตอนนี้ไปที่แท็บ เทมเพลต

10. คลิกที่ไอคอนดินสอถัดจากข้อความ ภาษาของเทมเพลต จากนั้นเลือกภาษาที่คุณต้องการใช้สำหรับการยืนยันทาง SMS

11. คลิกไอคอนรูปเฟืองถัดจากข้อความ ภาพรวมโครงการ แล้วเลือก การตั้งค่าโครงการ

12. เลื่อนลงไปที่ส่วน แอปของคุณ จากนั้นคลิกที่ไอคอนเว็บ

13. ป้อนชื่อเล่นสำหรับแอปใหม่ของคุณ จากนั้นคลิกปุ่ม ลงทะเบียนแอป

14. เลือกตัวเลือก แท็ก Use a <script> และคัดลอกสคริปต์ที่มีให้

15. ตอนนี้ไปที่แดชบอร์ด WordPress ของร้านค้า WooCommerce ของคุณ จากนั้นไปที่หน้า "การตั้งค่าการเข้าสู่ระบบ"

16. วางสคริปต์ลงในกล่องข้อความการกำหนดค่า Firebase
17. กลับไปที่หน้าต่าง Firebase คัดลอกคีย์ API ที่ให้ไว้ในสคริปต์

18. กลับไปที่หน้าต่าง WordPress วางคีย์ API ลงในกล่องข้อความ Firebase api

19. สุดท้าย เลื่อนลงไปที่ด้านล่างของหน้าแล้วคลิกปุ่ม บันทึกการเปลี่ยนแปลง

นอกจากนี้ นี่คือที่ที่คุณสามารถกำหนดค่าแอปได้ คุณควรตรวจสอบการตั้งค่าเพื่อดูว่ามีอะไรอีกหรือไม่ที่คุณต้องปรับ

#2: เปิดใช้งานการลงชื่อเข้าใช้หมายเลขโทรศัพท์บนร้านค้า WooCommerce ของคุณโดยทางโปรแกรม

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

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

คุณจะต้องเพิ่มโค้ด PHP ที่กำหนดเองลงในไฟล์ "functions.php" ของธีมที่ใช้งานอยู่ในปัจจุบัน หากคุณไม่ทราบวิธีดำเนินการ ให้ทำตามคำแนะนำด้านล่าง:

1. ไปที่หน้า ลักษณะที่ ปรากฏ > ตัวแก้ไขไฟล์ธีม จากแดชบอร์ด WordPress

2. เลือกธีมที่คุณใช้ที่มุมบนขวา
3. เข้าถึงไฟล์ “functions.php” จากแถบด้านข้างขวา

เพิ่มรายการหมายเลขโทรศัพท์

ในการเปิดใช้งานการลงชื่อเข้าใช้หมายเลขโทรศัพท์ WooCommerce บนไซต์อีคอมเมิร์ซ WordPress คุณต้องจัดเก็บหมายเลขโทรศัพท์ของผู้ใช้ในตาราง "wp_usermeta"

สามารถทำได้ในขณะที่ลงทะเบียนผู้ใช้ คุณสามารถใช้รหัสด้านล่างเพื่อบรรลุเป้าหมายนี้

 <?php $user_id = 1; // pass user id $phone_number = 9999999999; add_user_meta( $user_id, 'user_phone', $phone_number);

เมื่อคุณมี meta_key “user_phone” พร้อมค่าแล้ว คุณสามารถตรวจสอบข้อมูลรับรองของผู้ใช้ด้วยหมายเลขโทรศัพท์

สร้างแบบฟอร์มเข้าสู่ระบบ

ตอนนี้ มาสร้างแบบฟอร์มการเข้าสู่ระบบอย่างง่ายซึ่งผู้ใช้สามารถป้อนรายละเอียดการเข้าสู่ระบบได้ จะมีองค์ประกอบดังนี้

• ช่องข้อความสำหรับใส่ชื่อผู้ใช้/อีเมล/โทรศัพท์
• ช่องข้อความเพื่อป้อนรหัสผ่าน
• Nonce เพื่อหลีกเลี่ยงการโจมตี CSRF (เป็นฟิลด์ที่ซ่อนอยู่)
• ปุ่มส่ง

 <?php $return = log_the_user_in(); if( is_wp_error( $return ) ) { echo $return->get_error_message(); } ?> <form method="post"> <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p> <p><input type="password" name="user_password" placeholder="Password" required /></p> <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" /> <input type="submit" name="btn_login" value="Submit" /> </form>

ในสคริปต์ข้างต้น เราได้เพิ่มโค้ด HTML และเรียกอีกอย่างว่าเมธอด “log_the_user_in()” มีหน้าที่ตรวจสอบข้อมูลประจำตัวของผู้ใช้

หากมีข้อผิดพลาดเกิดขึ้นที่ฝั่งเซิร์ฟเวอร์ เราจะแจ้งให้ผู้ใช้ทราบผ่านเมธอด “get_error_message()”

ในขั้นตอนต่อไป เราจะต้องกำหนดเมธอด “log_the_user_in()” และส่งคืนข้อผิดพลาด

เข้าสู่ระบบด้วยหมายเลขโทรศัพท์ใน WooCommerce

เมื่อผู้ใช้กรอกข้อมูลประจำตัวและคลิกปุ่มส่ง เราจะได้รับข้อมูลรับรองและยืนยันกับฐานข้อมูล

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

เราจะกำหนดวิธีการ “log_the_user_in()” บนตะขอ “init” เบ็ดนี้เริ่มทำงานหลังจาก WordPress โหลดเสร็จแล้ว แต่ก่อนที่จะส่งส่วนหัว ซึ่งเหมาะสำหรับการประมวลผลแบบฟอร์มโดยใช้วิธี POST

ด้านล่างเป็นรหัส:

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } if ( is_email( $_POST['user_login'] ) ) { // check user by email $user = get_user_by( 'email', $_POST['user_login'] ); } elseif ( is_numeric( $_POST['user_login'] ) ) { // check user by phone number global $wpdb; $tbl_usermeta = $wpdb->prefix.'usermeta'; $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) ); $user = get_user_by( 'ID', $user_id ); } else { // check user by username $user = get_user_by( 'login', $_POST['user_login'] ); } if ( ! $user ) { return new WP_Error('wrong_credentials', 'Invalid credentials.'); } // check the user's login with their password. if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) { return new WP_Error('wrong_credentials', 'Invalid password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

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

ถัดไป ตามวิธี “is_email()” หรือ “is_numeric()” WordPress จะตรวจสอบอีเมลหรือหมายเลขโทรศัพท์ที่ถูกต้อง หากค่าที่ป้อนไม่ใช่อีเมลหรือหมายเลขโทรศัพท์ เราจะตรวจสอบชื่อผู้ใช้

คำพูดสุดท้าย

นั่นคือทั้งหมดที่เกี่ยวกับการเพิ่มการลงชื่อเข้าใช้หมายเลขโทรศัพท์ในร้านค้า WooCommerce ของคุณ ฉันหวังว่ามันจะช่วยคุณในโครงการของคุณ

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