2 Cara Mudah Mengaktifkan Masuk dengan Nomor Telepon di WooCommerce

Masuk dengan nomor telepon adalah fitur praktis yang dirancang untuk meningkatkan pengalaman pengguna dan memudahkan proses masuk dan pendaftaran. Oleh karena itu, banyak pengguna WooCommerce ingin menerapkan fitur ini ke toko online mereka.

Jika Anda salah satu dari orang-orang itu, maka Anda telah mendarat di halaman web yang tepat. Artikel ini akan mengajari Anda cara membiarkan pengguna masuk dan mendaftar dengan nomor telepon WooCommerce mereka dengan dua cara.

Mengapa Anda Harus Mengaktifkan Masuk dengan Nomor Telepon WooCommerce di Toko Anda?

Pendaftaran dan login telepon telah menjadi sangat berguna untuk toko WooCommerce yang sangat bergantung pada nomor ponsel pelanggan. Misalnya, pengiriman makanan, taksi, dll.

Selain ceruk khusus ini, di bawah ini adalah beberapa keuntungan yang menguntungkan bisnis apa pun.

• Pembeli dapat masuk dan mendaftar langsung dengan nomor telepon mereka di toko WooCommerce Anda.
• Ini menghindari spam pendaftaran pelanggan di toko online Anda.
• Pembeli juga dapat masuk tanpa mengingat nama pengguna dan kata sandi mereka.
• Anda dapat memverifikasi nomor telepon pelanggan melalui SMS OTP.
• Semua pelanggan terverifikasi adalah asli dan karenanya mencegah pesanan palsu.
• Pelanggan Anda dapat diberi tahu dengan cepat melalui perangkat seluler, meskipun mereka tidak memiliki akses ke internet.
• Anda dapat dengan cepat menjangkau pelanggan Anda dengan promosi dan penawaran melalui nomor telepon mereka.

Dengan keunggulan ini, Anda dapat dengan mudah meningkatkan strategi bisnis Anda dan, pada akhirnya, pertumbuhan konsumsi Anda. Anda memiliki semua yang Anda butuhkan untuk berkomunikasi dengan pelanggan Anda dengan cara yang paling sederhana dan paling konkret.

#1: Aktifkan Masuk dengan Nomor Telepon di Toko WooCommerce Anda dengan Plugin

Ada beberapa plugin yang dapat membantu Anda dalam hal ini. Sebagai contoh:

• Registrasi & Login dengan Nomor Ponsel
• Digit: Nomor Ponsel WordPress Formulir Pendaftaran dan Login OTP
• Masuk Dengan Nomor Ponsel untuk WooCommerce

Tapi dalam tutorial ini, kita akan menggunakan plugin “Login with phone number” karena ini adalah plugin gratis yang paling populer.

Instal Plugin Aktifkan “ Login dengan Nomor Telepon ” di Toko WooCommerce Anda

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin “ Login dengan nomor telepon ” di toko WooCommerce Anda. Di bawah ini adalah petunjuknya.

1. Pertama, dari dashboard WordPress, navigasikan ke halaman Plugins > Add New .

2. Masukkan "Masuk dengan nomor telepon" ke dalam kotak pencarian di sudut kanan atas.
3. Plugin akan muncul pertama kali dalam daftar. Klik tombol Instal Sekarang yang ditampilkan di sebelah judulnya.
4. Setelah itu, plugin akan diunduh. Setelah selesai, Anda akan melihat tombol Install Now berubah menjadi tombol Activate . Klik itu.

Buat Halaman Login/Daftar Baru

Langkah selanjutnya adalah memasukkan kode pendek plugin ke halaman login/daftar baru.

1. Arahkan ke Halaman > Tambah Baru dari dasbor WordPress.

2. Pilih judul untuk halaman baru, misalnya, “ Halaman Login/Daftar ”.

3. Masukkan kode pendek [idehweb_lwp] di dalamnya.
4. Publikasikan halaman.

Dapatkan 10.000 SMS OTP Gratis Per Bulan dengan Firebase

Saat pengguna baru mendaftarkan akun di toko WooCommerce Anda, kode verifikasi akan dikirim ke nomor ponsel mereka. Oleh karena itu, Anda perlu menyediakan gateway SMS agar plugin berfungsi dengan baik.

Anda dapat menggunakan Firebase dari Google. Ini menyediakan 10.000 SMS OTP per bulan secara gratis. Berikut caranya:

1. Masuk ke konsol Firebase menggunakan akun Google Anda.
2. Klik tombol Buat proyek .

3. Sekarang, Anda harus memasukkan nama untuk proyek baru, menerima syarat dan ketentuan Firebase, dan klik tombol Buat proyek .
4. Setelah proyek berhasil dibuat, di bilah sisi kiri, buka halaman Build > Authentication .

5. Klik tombol Mulai .
6. Pilih Telepon sebagai penyedia.

7. Alihkan sakelar di sudut kanan atas untuk mengaktifkan opsi ini. Kemudian klik tombol Simpan .

8. Gulir ke bawah ke bagian Domain yang diotorisasi . Klik tombol Tambahkan domain dan masukkan nama domain toko WooCommerce Anda. Kemudian klik tombol Tambah .

9. Sekarang, buka tab Template .

10. Klik ikon pensil di sebelah teks bahasa Template . Selanjutnya, pilih bahasa yang Anda inginkan untuk digunakan untuk verifikasi SMS.

11. Klik ikon roda gigi di sebelah teks Ikhtisar Proyek dan pilih Pengaturan proyek .

12. Gulir ke bawah ke bagian Aplikasi Anda . Kemudian klik pada ikon web.

13. Masukkan nama panggilan untuk aplikasi baru Anda. Kemudian klik tombol Daftar aplikasi .

14. Pilih opsi Gunakan tag <script> dan salin skrip yang disediakan.

15. Sekarang, buka dasbor WordPress toko WooCommerce Anda. Kemudian kunjungi halaman “pengaturan login”.

16. Rekatkan skrip ke dalam kotak teks konfigurasi Firebase .
17. Kembali ke jendela Firebase, salin kunci API yang disediakan di skrip.

18. Kembali ke jendela WordPress, rekatkan kunci API ke dalam kotak teks Firebase api .

19. Terakhir, gulir ke bawah ke bagian bawah halaman dan klik tombol Simpan perubahan .

Juga, ini adalah tempat Anda dapat mengonfigurasi aplikasi. Anda harus memeriksa pengaturan untuk melihat apakah ada hal lain yang perlu Anda sesuaikan.

#2: Aktifkan Masuk dengan Nomor Telepon di Toko WooCommerce Anda Secara Terprogram

Dalam tutorial ini, kami akan menambahkan satu opsi nomor telepon lagi pada formulir login toko WooCommerce Anda. Harap dicatat bahwa ini tidak mengirim SMS OTP untuk memverifikasi pengguna seperti pada tutorial sebelumnya.

Pengguna dapat memilih apa yang lebih nyaman bagi mereka. Anda mungkin pernah melihat ini di formulir masuk Amazon. Ini memungkinkan pengguna untuk masuk dengan email atau nomor telepon.

Anda perlu menambahkan kode PHP khusus ke file “functions.php” dari tema yang sedang aktif. Jika Anda tidak tahu bagaimana melakukannya, ikuti petunjuk di bawah ini:

1. Arahkan ke halaman Appearance > Theme File Editor dari dashboard WordPress.

2. Pilih tema yang Anda gunakan di sudut kanan atas.
3. Akses file “functions.php” dari sidebar kanan.

Tambahkan Entri Nomor Telepon

Untuk mengaktifkan masuk nomor telepon WooCommerce di situs eCommerce WordPress Anda, Anda perlu menyimpan nomor telepon pengguna di tabel “wp_usermeta”.

Ini dapat dilakukan pada saat pendaftaran pengguna. Anda dapat menggunakan kode di bawah ini untuk mencapai tujuan ini.

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

Setelah Anda memiliki meta_key “user_phone” dengan nilainya, Anda dapat memeriksa kredensial pengguna dengan nomor telepon.

Buat Formulir Masuk

Sekarang, mari kita buat formulir login sederhana di mana pengguna dapat memasukkan detail login mereka. Ini akan memiliki elemen-elemen berikut:

• Bidang teks untuk memasukkan nama pengguna/email/telepon
• Bidang teks untuk memasukkan kata sandi
• Nonce untuk menghindari serangan CSRF (ini adalah bidang tersembunyi)
• Tombol kirim

 <?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>

Dalam skrip di atas, kami menambahkan kode HTML dan juga disebut metode “log_the_user_in()”. Ini bertanggung jawab untuk memeriksa kredensial pengguna.

Jika beberapa kesalahan terjadi di sisi server, kami akan memberi tahu pengguna melalui metode “get_error_message()”.

Pada langkah berikutnya, kita perlu mendefinisikan metode “log_the_user_in()” dan mengembalikan kesalahan.

Masuk dengan Nomor Telepon di WooCommerce

Ketika pengguna mengisi kredensial dan mengklik tombol kirim, kami akan mendapatkan kredensial dan memverifikasinya terhadap database.

Jika semuanya cocok, kami akan memasukkannya dan mengarahkannya ke beranda. Untuk login palsu, kesalahan akan dicatat menggunakan kelas "WP_Error". Berdasarkan kebutuhan Anda, Anda dapat mengubahnya ke halaman lain dengan mengubah kode.

Kita akan mendefinisikan metode “log_the_user_in()” pada hook “init”. Kait ini menyala setelah WordPress selesai memuat tetapi sebelum header apa pun dikirim. Ini sangat ideal untuk memproses formulir menggunakan metode POST.

Di bawah ini adalah kode:

 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; }

Di sini, pertama-tama kami memverifikasi nonce untuk melindungi formulir dari jenis penyalahgunaan tertentu, kode berbahaya, dan serangan CSRF.

Selanjutnya, berdasarkan metode “is_email()” atau “is_numeric()”, WordPress akan memeriksa email atau nomor telepon yang valid. Jika nilai yang dimasukkan bukan email atau nomor telepon, kami akan memeriksa nama pengguna.

Kata-kata Terakhir

Itu semua tentang menambahkan nomor telepon masuk di toko WooCommerce Anda. Saya harap ini membantu Anda dengan proyek Anda.

Jika Anda merasa artikel ini bermanfaat, jangan ragu untuk membagikan pemikiran dan saran Anda di bagian komentar di bawah.