WooCommerce'de Telefon Numarası ile Oturum Açmayı Etkinleştirmenin 2 Kolay Yolu

Telefon numarasıyla oturum açma, kullanıcı deneyimini geliştirmek ve oturum açma ve kayıt sürecini kolaylaştırmak için tasarlanmış kullanışlı bir özelliktir. Bu nedenle, birçok WooCommerce kullanıcısı bu özelliği çevrimiçi mağazalarına uygulamak istiyor.

Eğer bu insanlardan biriyseniz, o zaman doğru web sayfasına geldiniz. Bu makale, kullanıcıların WooCommerce telefon numaralarıyla iki şekilde oturum açmasına ve kaydolmasına nasıl izin vereceğinizi öğretecektir.

Mağazanızda WooCommerce Telefon Numarası ile Oturum Açmayı Neden Etkinleştirmelisiniz ?

Telefon kaydı ve oturum açma, büyük ölçüde müşteri cep telefonu numaralarına dayanan WooCommerce mağazaları için son derece yararlı hale geldi. Örneğin, yemek teslimatı, taksiler vb.

Bu özel nişlere ek olarak, aşağıda herhangi bir işletmeye fayda sağlayan bazı avantajlar bulunmaktadır.

• Alıcılar, WooCommerce mağazanızdaki telefon numaralarıyla doğrudan giriş yapabilir ve kayıt olabilir.
• Çevrimiçi mağazanızda müşteri kaydı spam'ini önler.
• Alıcılar ayrıca kullanıcı adı ve şifrelerini hatırlamadan da giriş yapabilirler.
• Müşterilerin telefon numaralarını OTP SMS'leri ile doğrulayabilirsiniz.
• Doğrulanmış tüm müşteriler orijinaldir ve bu nedenle sahte siparişleri önler.
• Müşterileriniz internete erişimleri olmasa bile mobil cihazlar üzerinden hızlı bir şekilde bilgilendirilebilir.
• Kampanya ve kampanyalarla müşterilerinize telefon numaralarından hızlıca ulaşabilirsiniz.

Bu avantajlarla iş stratejinizi ve nihayetinde tüketim büyümenizi kolayca geliştirebilirsiniz. Müşterilerinizle en basit ve somut şekilde iletişim kurmak için ihtiyacınız olan her şeye sahipsiniz.

1: Bir Eklenti ile WooCommerce Mağazanızda Telefon Numarası Oturum Açmayı Etkinleştirin

Bu konuda size yardımcı olabilecek birkaç eklenti var. Örneğin:

• Cep Telefonu Numarası ile Kayıt & Giriş
• Rakamlar: WordPress Cep Telefonu Numarası OTP Kayıt ve Giriş Formu
• WooCommerce için Cep Numarası ile Giriş Yapın

Ancak bu eğitimde, en popüler ücretsiz eklenti olduğu için “Telefon numarası ile giriş yap” eklentisini kullanacağız.

WooCommerce Mağazanıza “ Telefon Numarasıyla Giriş Yap ” Eklentisini Etkinleştirin

Yapmanız gereken ilk şey, WooCommerce mağazanıza “ Telefon numarası ile giriş yap ” eklentisini kurmak ve etkinleştirmektir. Talimatlar aşağıdadır.

1. İlk olarak, WordPress panosundan Eklentiler > Yeni Ekle sayfasına gidin.

2. Sağ üst köşedeki arama kutusuna "Telefon numarası ile giriş yap" yazın.
3. Eklenti listede ilk sırada görünmelidir. Başlığının yanında görüntülenen Şimdi Yükle düğmesini tıklayın.
4. Bundan sonra, eklenti indirilecektir. Tamamlandığında, Şimdi Kur düğmesinin Etkinleştir düğmesine değiştiğini göreceksiniz. Tıkla.

Yeni Giriş/Kayıt Sayfası Oluştur

Sonraki adım, eklentinin kısa kodunu yeni bir oturum açma/kayıt sayfasına eklemektir.

1. WordPress kontrol panelinden Sayfa > Yeni Ekle'ye gidin.

2. Yeni sayfa için bir başlık seçin, örneğin “ Giriş/Kayıt Sayfası ”.

3. [idehweb_lwp] kısa kodunu içine koyun.
4. Sayfayı yayınlayın .

Firebase ile Ayda 10.000 Ücretsiz OTP SMS Alın

Yeni bir kullanıcı WooCommerce mağazanızda bir hesap kaydettiğinde, cep telefonu numarasına bir doğrulama kodu gönderilecektir. Bu nedenle, eklentinin düzgün çalışması için bir SMS ağ geçidi sağlamanız gerekecektir.

Firebase'i Google'dan kullanabilirsiniz. Ayda 10.000 OTP SMS'i ücretsiz olarak sağlar. İşte nasıl:

1. Google hesabınızı kullanarak Firebase konsolunda oturum açın.
2. Proje oluştur düğmesine tıklayın.

3. Şimdi yeni proje için bir ad girmeniz, Firebase'in hüküm ve koşullarını kabul etmeniz ve Proje oluştur düğmesini tıklamanız gerekecek.
4. Proje başarıyla oluşturulduktan sonra, sol kenar çubuğunda Oluştur > Kimlik Doğrulama sayfasına gidin.

5. Başlayın düğmesini tıklayın.
6. Sağlayıcı olarak Telefon'u seçin.

7. Bu seçeneği etkinleştirmek için sağ üst köşedeki düğmeyi değiştirin. Ardından Kaydet düğmesini tıklayın.

8. Yetkili alanlar bölümüne ilerleyin. Alan ekle düğmesini tıklayın ve WooCommerce mağazanızın alan adını girin. Ardından Ekle düğmesini tıklayın.

9. Şimdi Şablonlar sekmesine gidin.

10. Şablon dili metninin yanındaki kalem simgesine tıklayın. Ardından, SMS doğrulaması için kullanmayı tercih ettiğiniz dili seçin.

11. Projeye Genel Bakış metninin yanındaki dişli simgesine tıklayın ve Proje ayarları'nı seçin.

12. Uygulamalarınız bölümlerine ilerleyin. Ardından web simgesine tıklayın.

13. Yeni uygulamanız için bir takma ad girin. Ardından, uygulamayı kaydet düğmesini tıklayın.

14. Bir <script> etiketi kullan seçeneğini belirleyin ve sağlanan komut dosyalarını kopyalayın.

15. Şimdi WooCommerce mağazanızın WordPress panosuna gidin. Ardından “oturum açma ayarı” sayfasını ziyaret edin.

16. Komut dosyalarını Firebase yapılandırma metin kutusuna yapıştırın.
17. Firebase penceresine geri dönün, komut dosyalarında sağlanan API anahtarını kopyalayın.

18. WordPress penceresine geri dönün, API anahtarını Firebase api metin kutusuna yapıştırın.

19. Son olarak, sayfanın en altına gidin ve Değişiklikleri kaydet düğmesini tıklayın.

Ayrıca, uygulamayı yapılandırabileceğiniz yer burasıdır. Ayarlamanız gereken başka bir şey olup olmadığını görmek için ayarları kontrol etmelisiniz.

#2: WooCommerce Mağazanızda Programlı Olarak Telefon Numarası Oturum Açmayı Etkinleştirin

Bu eğitimde, WooCommerce mağazanızın giriş formuna bir telefon numarası seçeneği daha ekleyeceğiz. Lütfen bunun, önceki eğitimde olduğu gibi kullanıcıları doğrulamak için OTP SMS'leri göndermediğini unutmayın.

Kullanıcılar kendileri için daha uygun olanı seçebilir. Bunu Amazon giriş formunda görmüş olabilirsiniz. Kullanıcıların bir e-posta veya telefon numarası ile oturum açmasına olanak tanır.

Şu anda aktif olan temanın “functions.php” dosyasına özel PHP kodu eklemeniz gerekecek. Bunu nasıl yapacağınızı bilmiyorsanız, aşağıdaki talimatları izleyin:

1. WordPress panosundan Görünüm > Tema Dosyası Düzenleyici sayfasına gidin.

2. Sağ üst köşede kullandığınız temayı seçin.
3. Sağ kenar çubuğundan “functions.php” dosyasına erişin.

Telefon Numarası Girişi Ekle

WordPress e-Ticaret sitenizde WooCommerce telefon numarası ile oturum açmayı etkinleştirmek için, kullanıcıların telefon numaralarını “wp_usermeta” tablosunda saklamanız gerekir.

Bu, kullanıcı kaydı sırasında yapılabilir. Bu amaca ulaşmak için aşağıdaki kodu kullanabilirsiniz.

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

Değerine sahip bir "user_phone" meta_key'iniz olduğunda, bir telefon numarası ile kullanıcının kimlik bilgilerini kontrol edebilirsiniz.

Giriş Formu Oluştur

Şimdi, kullanıcıların giriş bilgilerini girebilecekleri basit bir giriş formu oluşturalım. Aşağıdaki unsurlara sahip olacaktır:

• Kullanıcı adı/e-posta/telefon girmek için bir metin alanı
• Şifre girmek için bir metin alanı
• CSRF saldırılarından kaçınmak için bir nonce (gizli bir alandır)
• Gönder düğmesi

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

Yukarıdaki scriptlerde HTML kodunu ekledik ve “log_the_user_in()” metodunu da çağırdık. Bu, kullanıcının kimlik bilgilerini kontrol etmekten sorumludur.

Sunucu tarafında bazı hatalar oluşursa “get_error_message()” yöntemi ile kullanıcıyı bilgilendireceğiz.

Bir sonraki adımda “log_the_user_in()” yöntemini tanımlamamız ve hatayı döndürmemiz gerekecek.

WooCommerce'de Telefon Numaraları ile Giriş Yapın

Bir kullanıcı kimlik bilgilerini doldurup gönder düğmesini tıkladığında, kimlik bilgilerini alır ve bunları veritabanına göre doğrularız.

Her şey eşleşirse, onları oturum açıp ana sayfaya yönlendireceğiz. Yanlış girişler için, hatalar “WP_Error” sınıfı kullanılarak günlüğe kaydedilir. İhtiyaçlarınıza göre, kodu değiştirerek başka bir sayfaya değiştirebilirsiniz.

“init” kancasında “log_the_user_in()” yöntemini tanımlayacağız. Bu kanca, WordPress yüklemeyi bitirdikten sonra ancak herhangi bir başlık gönderilmeden önce tetiklenir. Bu, POST yöntemini kullanarak bir formu işlemek için idealdir.

Kod aşağıdadır:

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

Burada, önce formu belirli yanlış kullanım, kötü amaçlı kod ve CSRF saldırılarından korumak için nonce'yi doğruladık.

Ardından, “is_email()” veya “is_numeric()” yöntemine bağlı olarak, WordPress geçerli bir e-posta veya telefon numarası olup olmadığını kontrol edecektir. Girilen değer bir e-posta veya telefon numarası değilse, kullanıcı adı olup olmadığını kontrol edeceğiz.

Son sözler

Bu, WooCommerce mağazanıza telefon numarası girişini eklemekle ilgilidir. Umarım projenizde size yardımcı olmuştur.

Bu makaleyi faydalı bulduysanız, düşüncelerinizi ve önerilerinizi aşağıdaki yorumlar bölümünde paylaşmaktan çekinmeyin.