如何在WordPress中实现定期刷新二维码？

如何将 PHP cURL 脚本与刷新代码整合到 WordPress 中

在构建 WordPress 网站时，我们常常需要与外部 API 进行交互，例如进行身份验证、获取数据或处理支付。这时，PHP cURL 就成为我们连接外部世界的桥梁。本文将以一个需要定期刷新的二维码功能为例，教你如何将独立的 PHP cURL 脚本与刷新代码整合到 WordPress 中，使其成为网站的一部分。

需求分析

假设我们需要实现以下功能：

1. 用户访问网站页面时，生成一个用于身份验证的二维码。
2. 该二维码需要定期刷新，以保证安全性。
3. 用户使用手机扫描二维码后，网站需要显示验证状态。

为了满足以上需求，我们需要调用两个不同的 API 接口：

• 生成二维码接口 : 根据用户信息生成二维码图片链接。
• 验证状态接口 : 根据二维码标识查询验证状态。

解决方案

我们将创建一个 WordPress 插件来实现这些功能。该插件包含以下几个部分：

1. 插件主文件 : 处理插件初始化、注册脚本和样式表、定义短代码等。
2. API 处理函数 : 封装与 API 接口交互的逻辑。
3. 前端模板 : 负责在页面上显示二维码和状态信息。
4. JavaScript 代码 : 处理二维码刷新和状态查询的 AJAX 请求。

步骤一：创建插件文件结构

在 wp-content/plugins/ 目录下创建一个新文件夹，命名为 qr-code-authentication， 作为插件的根目录。然后，在该目录下创建以下文件：

• qr-code-authentication.php：插件主文件。
• includes/api-functions.php： API 处理函数文件。
• templates/qr-code-template.php：前端模板文件。
• assets/js/qr-code-script.js：JavaScript 代码文件。

步骤二：编写代码

1. 插件主文件 (qr-code-authentication.php)

<?php
/**
 * Plugin Name: 二维码身份验证
 * Description: 通过二维码实现用户身份验证。
 * Version: 1.0.0
 * Author: Your Name
 */

// 定义插件目录常量
define( 'QRCODE_AUTH_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );

// 引入 API 处理函数文件
require_once QRCODE_AUTH_PLUGIN_DIR . 'includes/api-functions.php';

// 注册脚本和样式表
function qrcode_auth_enqueue_scripts() {
    wp_enqueue_script( 'qrcode-auth-script', plugins_url( 'assets/js/qr-code-script.js', __FILE__ ), array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'qrcode-auth-script', 'qrcode_auth_vars', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );
}
add_action( 'wp_enqueue_scripts', 'qrcode_auth_enqueue_scripts' );

// 定义短代码
function qrcode_auth_shortcode( $atts ) {
    // 获取短代码参数
    $atts = shortcode_atts( array(
        'user_id' => get_current_user_id()
    ), $atts );

    // 获取二维码数据
    $qr_code_data = get_qr_code_data( $atts['user_id'] );

    // 加载前端模板
    ob_start();
    include QRCODE_AUTH_PLUGIN_DIR . 'templates/qr-code-template.php';
    return ob_get_clean();
}
add_shortcode( 'qr_code_authentication', 'qrcode_auth_shortcode' );

// 处理 AJAX 请求
function qrcode_auth_ajax_handler() {
    // 检查用户是否登录
    if ( ! is_user_logged_in() ) {
        wp_send_json_error( array( 'message' => '请先登录' ) );
    }

    // 获取 AJAX 请求参数
    $user_id = isset( $_POST['user_id'] ) ? intval( $_POST['user_id'] ) : 0;

    // 获取验证状态
    $status = check_authentication_status( $user_id );

    // 返回结果
    wp_send_json_success( array( 'status' => $status ) );
}
add_action( 'wp_ajax_check_authentication_status', 'qrcode_auth_ajax_handler' );

2. API 处理函数文件 (includes/api-functions.php)

<?php

// 获取二维码数据
function get_qr_code_data( $user_id ) {
    // 设置 API 接口地址和参数
    $api_url = 'https://api.example.com/generate_qr_code';
    $api_args = array(
        'user_id' => $user_id,
        'api_key'  => 'YOUR_API_KEY'
    );

    // 发送 API 请求
    $response = wp_remote_post( $api_url, array(
        'body' => $api_args
    ) );

    // 检查请求是否成功
    if ( is_wp_error( $response ) ) {
        return false;
    }

    // 解析 API 返回结果
    $response_body = json_decode( wp_remote_retrieve_body( $response ), true );

    // 返回二维码数据
    return isset( $response_body['data'] ) ? $response_body['data'] : false;
}

// 检查验证状态
function check_authentication_status( $user_id ) {
    // 设置 API 接口地址和参数
    $api_url = 'https://api.example.com/check_authentication_status';
    $api_args = array(
        'user_id' => $user_id,
        'api_key'  => 'YOUR_API_KEY'
    );

    // 发送 API 请求
    $response = wp_remote_post( $api_url, array(
        'body' => $api_args
    ) );

    // 检查请求是否成功
    if ( is_wp_error( $response ) ) {
        return false;
    }

    // 解析 API 返回结果
    $response_body = json_decode( wp_remote_retrieve_body( $response ), true );

    // 返回验证状态
    return isset( $response_body['status'] ) ? $response_body['status'] : false;
}

3. 前端模板 (templates/qr-code-template.php)

<?php if ( $qr_code_data ): ?>
    <div class="qrcode-auth-container" data-user-id="<?php echo esc_attr( $atts['user_id'] ); ?>">
        <img src="<?php echo esc_url( $qr_code_data['qr_code_url'] ); ?>" alt="二维码" class="qrcode-auth-image">
        <div class="qrcode-auth-status">
            <p>请扫描二维码进行验证</p>
        </div>
    </div>
<?php else: ?>
    <p>获取二维码失败</p>
<?php endif; ?>

4. JavaScript 代码 (assets/js/qr-code-script.js)

jQuery( document ).ready( function( $ ) {
    // 定时刷新二维码
    setInterval( function() {
        $( '.qrcode-auth-container' ).each( function() {
            var user_id = $( this ).data( 'user-id' );
            $.ajax( {
                url: qrcode_auth_vars.ajax_url,
                type: 'POST',
                data: {
                    action: 'check_authentication_status',
                    user_id: user_id
                },
                success: function( response ) {
                    if ( response.success ) {
                        if ( response.data.status === 'success' ) {
                            $( '.qrcode-auth-status' ).html( '<p>验证成功</p>' );
                        } else if ( response.data.status === 'pending' ) {
                            $( '.qrcode-auth-status' ).html( '<p>等待验证</p>' );
                        } else {
                            $( '.qrcode-auth-status' ).html( '<p>验证失败</p>' );
                        }
                    } else {
                        $( '.qrcode-auth-status' ).html( '<p>验证失败</p>' );
                    }
                },
                error: function() {
                    $( '.qrcode-auth-status' ).html( '<p>网络错误</p>' );
                }
            } );
        } );
    }, 5000 );
} );

步骤三：使用插件

1. 将插件代码上传到 WordPress 网站的插件目录。
2. 在 WordPress 后台启用插件。
3. 在页面或文章编辑器中使用短代码 [qr_code_authentication] 插入二维码。

代码解读

• qr-code-authentication.php :

  • 定义插件信息，包括名称、、版本号和作者。
  • 引入 API 处理函数文件。
  • 注册脚本和样式表，用于加载 JavaScript 代码和样式。
  • 定义短代码，用于在页面上插入二维码。
  • 处理 AJAX 请求，用于检查验证状态。

• includes/api-functions.php :

  • 定义两个函数：get_qr_code_data() 和 check_authentication_status()。
  • 这两个函数分别用于获取二维码数据和检查验证状态。
  • 函数内部使用 wp_remote_post() 函数发送 POST 请求到 API 接口。
  • 使用 json_decode() 函数解析 API 接口返回的 JSON 格式数据。

• templates/qr-code-template.php :

  • 根据 $qr_code_data 变量的值判断是否成功获取到二维码数据。
  • 如果成功获取到数据，则显示二维码图片和状态信息。
  • 如果获取数据失败，则显示错误信息。

• assets/js/qr-code-script.js :

  • 使用 jQuery 定时刷新二维码，每隔 5 秒钟发送一次 AJAX 请求到服务器。
  • 根据服务器返回的验证状态更新页面上的状态信息。

常见问题

1. 如何更改二维码的刷新频率？

   在 JavaScript 代码中修改 setInterval() 函数的第二个参数，该参数单位为毫秒。例如，将 5000 改为 10000，则二维码每 10 秒刷新一次。

2. 如何自定义二维码的大小和样式？

   可以通过 CSS 样式表来自定义二维码的大小和样式。

3. 如何处理 API 请求失败的情况？

   在 API 处理函数中，使用 is_wp_error() 函数检查 wp_remote_post() 函数的返回值，如果返回值为 WP_Error 对象，则表示请求失败。

4. 如何记录用户的验证状态？

   可以在 API 处理函数中，根据 API 接口返回的验证状态更新数据库中的用户记录。

5. 如何提高安全性？

   • 使用 HTTPS 协议加密数据传输。
   • 对 API 请求进行签名验证。
   • 设置 API 密钥，并妥善保管。
   • 定期更换 API 密钥。

通过以上步骤，我们成功地将 PHP cURL 脚本与刷新代码整合到了 WordPress 中，实现了二维码身份验证功能。

希望本文能够帮助你了解如何在 WordPress 中使用 cURL 与外部 API 进行交互，并构建更强大的网站功能！