WooCommerce で電話番号サインインを有効にする 2 つの簡単な方法

公開: 2022-05-31

電話番号によるサインインは、ユーザーエクスペリエンスを向上させ、ログインと登録プロセスを容易にするために設計された便利な機能です。したがって、多くの WooCommerce ユーザーは、この機能をオンラインストアに実装したいと考えています。

あなたがそれらの人々の一人なら、あなたは正しいウェブページにたどり着きました. この記事では、ユーザーが WooCommerce 電話番号でログインして登録できるようにする方法を 2 つの方法で説明します。

[表示][非表示]

ストアで WooCommerce 電話番号サインインを有効にする必要があるのはなぜですか?
#1: プラグインを使用して WooCommerce ストアで電話番号サインインを有効にする
1. WooCommerce ストアに「電話番号でログイン」プラグインを有効にするをインストールします
2. 新しいログイン/登録ページを作成する
3. Firebase で毎月 10,000 件の無料 OTP SMS を取得
#2: プログラムで WooCommerce ストアで電話番号サインインを有効にする
1. 電話番号エントリを追加
2. ログインフォームを作成する
3. WooCommerce に電話番号でログインする
最後の言葉

ストアでWooCommerce電話番号サインインを有効にする必要があるのはなぜですか?

電話登録とログインは、顧客の携帯電話番号に大きく依存している WooCommerce ストアにとって非常に便利になりました。たとえば、食品の配達、タクシーなどです。

これらの特定のニッチに加えて、以下はあらゆるビジネスに利益をもたらすいくつかの利点です.

バイヤーはログインして、WooCommerce ストアの電話番号で直接登録できます。
オンラインストアでの顧客登録スパムを回避します。
バイヤーは、ユーザー名とパスワードを覚えていなくてもログインできます。
OTP SMS で顧客の電話番号を確認できます。
確認済みのお客様はすべて本物であるため、偽の注文を防ぐことができます。
顧客は、インターネットにアクセスできない場合でも、モバイルデバイスを介して迅速に通知を受けることができます。
顧客の電話番号を介して、プロモーションやオファーをすばやく顧客に届けることができます。

これらの利点により、ビジネス戦略を容易に強化し、最終的には消費の成長を促進できます。最もシンプルで具体的な方法で顧客とコミュニケーションをとるために必要なものがすべて揃っています。

#1:プラグインを使用して WooCommerce ストアで電話番号サインインを有効にする

これに役立つプラグインがいくつかあります。例えば：

携帯電話番号での登録とログイン
数字: WordPress 携帯電話番号 OTPサインアップとログインフォーム
WooCommerce の携帯電話番号でログイン

ただし、このチュートリアルでは、最も人気のある無料プラグインである「電話番号でログイン」プラグインを使用します。

WooCommerceストアに「電話番号でログイン」プラグインを有効化するをインストールします

最初に、 WooCommerceストアに「電話番号でログイン」プラグインをインストールして有効にする必要があります。以下に手順を示します。

まず、WordPress ダッシュボードから、 [プラグイン] > [新規追加]ページに移動します。

右上隅の検索ボックスに「電話番号でログイン」と入力します。
プラグインはリストの最初に表示されます。タイトルの横に表示される[今すぐインストール] ボタンをクリックします。
その後、プラグインがダウンロードされます。完了すると、 [今すぐインストール] ボタンが [アクティブ化] ボタンに変わります。クリックして。

新しいログイン/登録ページを作成する

次のステップは、プラグインのショートコードを新しいログイン/登録ページに挿入することです。

WordPress ダッシュボードから[ページ] > [新規追加] に移動します。

「ログイン/登録ページ」など、新しいページのタイトルを選択します。

[idehweb_lwp] ショートコードをその中に入れます。
ページを公開します。

Firebase で毎月 10,000 件の無料 OTP SMS を取得

新しいユーザーが WooCommerce ストアにアカウントを登録すると、確認コードが携帯電話番号に送信されます。したがって、プラグインが正しく機能するには、SMS ゲートウェイを提供する必要があります。

Google の Firebase を使用できます。毎月 10,000 件の OTP SMS を無料で提供します。方法は次のとおりです。

Google アカウントを使用して Firebase コンソールにサインインします。
[プロジェクトの作成] ボタンをクリックします。

ここで、新しいプロジェクトの名前を入力し、Firebase の利用規約に同意して、[プロジェクトの作成] ボタンをクリックする必要があります。
プロジェクトが正常に作成されたら、左側のサイドバーで [ビルド] > [認証]ページに移動します。

[開始する] ボタンをクリックします。
電話をプロバイダーとして選択します。

右上隅のトグルを切り替えて、このオプションを有効にします。次に、[保存] ボタンをクリックします。

[承認済みドメイン]セクションまで下にスクロールします。 [ドメインを追加] ボタンをクリックして、WooCommerce ストアのドメイン名を入力します。次に、[追加] ボタンをクリックします。

次に、[テンプレート] タブに移動します。

テンプレート言語テキストの横にある鉛筆アイコンをクリックします。次に、SMS 検証に使用する言語を選択します。

Project Overviewテキストの横にある歯車アイコンをクリックし、 Project settingsを選択します。

[あなたのアプリ]セクションまで下にスクロールします。次に、Web アイコンをクリックします。

新しいアプリのニックネームを入力します。次に、[アプリの登録] ボタンをクリックします。

Use a <script> tagオプションを選択し、提供されたスクリプトをコピーします。

次に、WooCommerce ストアの WordPress ダッシュボードに移動します。次に、「ログイン設定」ページにアクセスします。

スクリプトをFirebase 構成テキストボックスに貼り付けます。
Firebase ウィンドウに戻り、スクリプトで提供された API キーをコピーします。

WordPress ウィンドウに戻り、API キーをFirebase apiテキストボックスに貼り付けます。

最後に、ページの一番下までスクロールして、[変更を保存] ボタンをクリックします。

また、ここでアプリを構成できます。設定を確認して、他に調整する必要があるものがないかどうかを確認する必要があります。

#2:プログラムで WooCommerce ストアで電話番号サインインを有効にする

このチュートリアルでは、WooCommerce ストアのログインフォームに電話番号オプションをもう 1 つ追加します。これは、前のチュートリアルのようにユーザーを確認するために OTP SMS を送信しないことに注意してください。

ユーザーは自分にとってより便利なものを選択できます。これは Amazon ログインフォームで見たことがあるかもしれません。これにより、ユーザーは電子メールまたは電話番号でサインインできます。

現在アクティブなテーマの「functions.php」ファイルにカスタム PHP コードを追加する必要があります。その方法がわからない場合は、次の手順に従ってください。

WordPress ダッシュボードから[外観] > [テーマファイルエディター]ページに移動します。

右上隅で使用しているテーマを選択します。
右側のサイドバーから「functions.php」ファイルにアクセスします。

電話番号エントリを追加

WordPress eCommerce サイトで WooCommerce 電話番号サインインを有効にするには、ユーザーの電話番号を「wp_usermeta」テーブルに保存する必要があります。

これは、ユーザー登録時に行うことができます。以下のコードを使用して、この目標を達成できます。

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

「user_phone」メタキーとその値を取得したら、ユーザーの資格情報を電話番号で確認できます。

ログインフォームを作成する

それでは、ユーザーがログイン情報を入力できる簡単なログインフォームを作成しましょう。次の要素があります。

ユーザー名/メールアドレス/電話番号を入力するテキストフィールド
パスワードを入力するテキストフィールド
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」クラスを使用してログに記録されます。必要に応じて、コードを変更して他のページに変更できます。

「init」フックで「log_the_user_in()」メソッドを定義します。このフックは、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; }

ここでは、フォームを特定の種類の誤用、悪意のあるコード、および CSRF 攻撃から保護するために、最初に nonce を検証しました。

次に、「is_email()」または「is_numeric()」メソッドに基づいて、WordPress は有効な電子メールまたは電話番号をチェックします。入力された値が電子メールまたは電話番号でない場合、ユーザー名が確認されます。

最後の言葉

以上で、WooCommerce ストアに電話番号サインインを追加することができます。あなたのプロジェクトに役立つことを願っています。

この記事が役に立ったと思われる場合は、下のコメントセクションでご意見やご提案をお寄せください。