在 WooCommerce 中启用电话号码登录的 2 种简单方法

电话号码登录是一项方便的功能，旨在增强用户体验并简化登录和注册过程。 因此，许多 WooCommerce 用户希望将此功能实施到他们的在线商店中。

如果您是这些人中的一员，那么您已经登陆了正确的网页。 本文将教您如何通过两种方式让用户使用他们的 WooCommerce 电话号码登录和注册。

为什么要在商店中启用 WooCommerce 电话号码登录？

对于严重依赖客户手机号码的 WooCommerce 商店，电话注册和登录变得非常有用。 例如，送餐、出租车等。

除了这些特定的利基之外，以下是一些有益于任何企业的优势。

• 买家可以在您的 WooCommerce 商店中使用他们的电话号码直接登录和注册。
• 它避免了您的在线商店中的客户注册垃圾邮件。
• 买家也可以在不记住用户名和密码的情况下登录。
• 您可以通过 OTP 短信验证客户的电话号码。
• 所有经过验证的客户都是真实的，因此可以防止虚假订单。
• 您的客户可以通过移动设备快速收到通知，即使他们无法访问互联网。
• 您可以通过客户的电话号码快速接触到促销和优惠信息。

凭借这些优势，您可以轻松地增强您的业务战略，并最终促进您的消费增长。 您拥有以最简单、最具体的方式与客户沟通所需的一切。

#1：使用插件在您的 WooCommerce 商店上启用电话号码登录

有几个插件可以帮助你解决这个问题。 例如：

• 手机号注册登录
• 数字：WordPress 手机号码 OTP 注册和登录表格
• 使用手机号码登录 WooCommerce

但在本教程中，我们将使用“使用电话号码登录”插件，因为它是最受欢迎的免费插件。

在您的WooCommerce商店中安装激活“使用电话号码登录”插件

您需要做的第一件事是在您的WooCommerce商店上安装并激活“使用电话号码登录”插件。 以下是说明。

1. 首先，从 WordPress 仪表板，导航到插件 > 添加新页面。

2. 在右上角的搜索框中输入“使用电话号码登录”。
3. 该插件应首先出现在列表中。 单击标题旁边显示的立即安装按钮。
4. 之后，插件将被下载。 完成后，您将看到立即安装按钮变为激活按钮。 点击它。

创建一个新的登录/注册页面

下一步是将插件的简码插入新的登录/注册页面。

1. 从 WordPress 仪表板导航到页面 > 添加新内容。

2. 为新页面选择一个标题，例如“登录/注册页面”。

3. 将 [idehweb_lwp] 短代码放入其中。
4. 发布页面。

使用 Firebase 每月获得 10,000 条免费 OTP 短信

当新用户在您的 WooCommerce 商店注册帐户时，验证码将发送到他们的手机号码。 因此，您需要提供一个 SMS 网关以使插件正常运行。

您可以使用 Google 的 Firebase。 它每月免费提供 10,000 条 OTP 短信。 方法如下：

1. 使用您的 Google 帐户登录 Firebase 控制台。
2. 单击创建项目按钮。

3. 现在，您需要输入新项目的名称，接受 Firebase 的条款和条件，然后单击创建项目按钮。
4. 成功创建项目后，在左侧边栏上，转到Build > Authentication页面。

5. 单击开始按钮。
6. 选择电话作为提供商。

7. 切换右上角的切换开关以启用此选项。 然后单击保存按钮。

8. 向下滚动到授权域部分。 单击添加域按钮并输入您的 WooCommerce 商店的域名。 然后单击添加按钮。

9. 现在，转到模板选项卡。

10. 单击模板语言文本旁边的铅笔图标。 接下来，选择您喜欢用于 SMS 验证的语言。

11. 单击Project Overview文本旁边的齿轮图标，然后选择Project settings 。

12. 向下滚动到您的应用部分。 然后点击网页图标。

13. 输入新应用的昵称。 然后单击注册应用程序按钮。

14. 选择使用 <script> 标签选项并复制提供的脚本。

15. 现在，转到您的 WooCommerce 商店的 WordPress 仪表板。 然后访问“登录设置”页面。

16. 将脚本粘贴到Firebase 配置文本框中。
17. 返回 Firebase 窗口，复制脚本中提供的 API 密钥。

18. 返回 WordPress 窗口，将 API 密钥粘贴到Firebase api文本框中。

19. 最后，向下滚动到页面底部，然后单击保存更改按钮。

此外，您可以在此处配置应用程序。 您应该检查设置，看看是否还有其他需要调整的地方。

#2：以编程方式在您的 WooCommerce 商店中启用电话号码登录

在本教程中，我们将在您的 WooCommerce 商店的登录表单上再添加一个电话号码选项。 请注意，这不会像上一个教程那样发送 OTP SMS 来验证用户。

用户可以选择更方便的方式。 您可能已经在亚马逊登录表单上看到了这一点。 它允许用户使用电子邮件或电话号码登录。

您需要将自定义 PHP 代码添加到当前活动主题的“functions.php”文件中。 如果您不知道如何操作，请按照以下说明操作：

1. 从 WordPress 仪表板导航到外观 > 主题文件编辑器页面。

2. 在右上角选择您正在使用的主题。
3. 从右侧边栏访问“functions.php”文件。

添加电话号码条目

要在您的 WordPress 电子商务网站上启用 WooCommerce 电话号码登录，您需要将用户的电话号码存储在“wp_usermeta”表中。

这可以在用户注册时完成。 您可以使用以下代码来实现此目标。

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

一旦你有了一个带有值的“user_phone”meta_key，你就可以用电话号码检查用户的凭据。

创建登录表单

现在，让我们创建一个简单的登录表单，用户可以在其中输入他们的登录详细信息。 它将具有以下元素：

• 用于输入用户名/电子邮件/电话的文本字段
• 用于输入密码的文本字段
• 避免 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; }

在这里，我们首先验证了 nonce 以保护表单免受某些类型的误用、恶意代码和 CSRF 攻击。

接下来，基于“is_email()”或“is_numeric()”方法，WordPress 将检查有效的电子邮件或电话号码。 如果输入的值不是电子邮件或电话号码，我们将检查用户名。

最后的话

这就是在您的 WooCommerce 商店中添加电话号码登录。 我希望它对您的项目有所帮助。

如果您发现本文有帮助，请随时在下面的评论部分分享您的想法和建议。