实战教程：为网站集成智能化的多平台账号一键登录与授权管理

引言：智能化登录体验的重要性

在当今互联网环境中，用户拥有多个平台的账号已成为常态。从社交媒体到专业工具，从娱乐应用到工作软件，每个用户平均管理着超过7个不同平台的账号。这种碎片化的账号体系给用户带来了记忆负担和安全风险，同时也为网站运营者带来了用户转化率低、注册流程复杂等挑战。

智能化多平台账号一键登录与授权管理正是解决这一痛点的关键技术。通过集成主流社交平台和第三方服务的登录接口，网站可以为用户提供无缝的登录体验，同时获取用户授权的基本信息，实现个性化服务。本教程将深入探讨如何通过WordPress程序的代码二次开发，实现这一功能，并扩展常用互联网小工具功能。

第一章：理解多平台登录的技术原理

1.1 OAuth 2.0协议基础

OAuth 2.0是目前最流行的授权框架，它允许用户授权第三方应用访问他们在其他服务提供者处的信息，而无需将用户名和密码提供给第三方应用。OAuth 2.0的核心流程包括：

1. 授权请求：用户被重定向到服务提供者的授权页面
2. 用户授权：用户在授权页面同意授权请求
3. 授权码返回：服务提供者将授权码返回给第三方应用
4. 令牌交换：第三方应用使用授权码交换访问令牌
5. 资源访问：第三方应用使用访问令牌访问受保护的资源

1.2 OpenID Connect扩展

OpenID Connect是建立在OAuth 2.0之上的身份层，它添加了身份验证功能，使客户端能够验证用户的身份并获取基本的用户信息。与纯OAuth 2.0相比，OpenID Connect提供了标准的身份信息（ID Token）和用户信息端点。

1.3 主流平台登录接口对比

第二章：WordPress开发环境准备

2.1 本地开发环境搭建

要实现WordPress的代码二次开发，首先需要搭建合适的开发环境：

1. 服务器环境：推荐使用XAMPP、MAMP或Local by Flywheel
2. WordPress安装：下载最新版WordPress并完成基础安装
3. 代码编辑器：推荐VS Code、PHPStorm或Sublime Text
4. 调试工具：安装Query Monitor、Debug Bar等调试插件
5. 版本控制：初始化Git仓库，建立开发分支

2.2 创建自定义插件框架

为了避免主题更新导致功能丢失，我们将通过创建独立插件的方式实现功能：

<?php
/**
 * Plugin Name: 智能多平台登录与工具集成
 * Plugin URI: https://yourwebsite.com/
 * Description: 为WordPress网站集成多平台一键登录与常用工具功能
 * Version: 1.0.0
 * Author: Your Name
 * License: GPL v2 or later
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 定义插件常量
define('SMPL_VERSION', '1.0.0');
define('SMPL_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('SMPL_PLUGIN_URL', plugin_dir_url(__FILE__));

// 初始化插件
require_once SMPL_PLUGIN_DIR . 'includes/class-core.php';

function smpl_init() {
    return SMPL_Core::get_instance();
}
add_action('plugins_loaded', 'smpl_init');

2.3 数据库表设计

为存储用户授权信息和登录记录，我们需要创建自定义数据库表：

// 在插件激活时创建表
register_activation_hook(__FILE__, 'smpl_create_tables');

function smpl_create_tables() {
    global $wpdb;
    
    $charset_collate = $wpdb->get_charset_collate();
    $table_name = $wpdb->prefix . 'smpl_user_connections';
    
    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id bigint(20) NOT NULL AUTO_INCREMENT,
        user_id bigint(20) NOT NULL,
        platform varchar(50) NOT NULL,
        platform_user_id varchar(100) NOT NULL,
        access_token text,
        refresh_token text,
        token_expiry datetime,
        user_data text,
        created_at datetime DEFAULT CURRENT_TIMESTAMP,
        updated_at datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        UNIQUE KEY platform_user (platform, platform_user_id),
        KEY user_id (user_id)
    ) $charset_collate;";
    
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
    
    // 创建登录日志表
    $log_table = $wpdb->prefix . 'smpl_login_logs';
    $log_sql = "CREATE TABLE IF NOT EXISTS $log_table (
        id bigint(20) NOT NULL AUTO_INCREMENT,
        user_id bigint(20),
        platform varchar(50),
        ip_address varchar(45),
        user_agent text,
        status varchar(20),
        created_at datetime DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        KEY user_id (user_id),
        KEY platform (platform)
    ) $charset_collate;";
    
    dbDelta($log_sql);
}

第三章：多平台登录接口集成

3.1 平台应用注册与配置管理

在集成各平台登录功能前，需要先在各平台开发者中心注册应用，获取必要的API密钥：

class SMPL_Platform_Config {
    private $platforms = [];
    
    public function __construct() {
        $this->init_platforms();
    }
    
    private function init_platforms() {
        $this->platforms = [
            'wechat' => [
                'name' => '微信',
                'auth_url' => 'https://open.weixin.qq.com/connect/qrconnect',
                'token_url' => 'https://api.weixin.qq.com/sns/oauth2/access_token',
                'userinfo_url' => 'https://api.weixin.qq.com/sns/userinfo',
                'app_id' => get_option('smpl_wechat_appid', ''),
                'app_secret' => get_option('smpl_wechat_secret', ''),
                'scope' => 'snsapi_login',
                'enabled' => get_option('smpl_wechat_enabled', false)
            ],
            'qq' => [
                'name' => 'QQ',
                'auth_url' => 'https://graph.qq.com/oauth2.0/authorize',
                'token_url' => 'https://graph.qq.com/oauth2.0/token',
                'userinfo_url' => 'https://graph.qq.com/user/get_user_info',
                'app_id' => get_option('smpl_qq_appid', ''),
                'app_secret' => get_option('smpl_qq_secret', ''),
                'scope' => 'get_user_info',
                'enabled' => get_option('smpl_qq_enabled', false)
            ],
            'weibo' => [
                'name' => '微博',
                'auth_url' => 'https://api.weibo.com/oauth2/authorize',
                'token_url' => 'https://api.weibo.com/oauth2/access_token',
                'userinfo_url' => 'https://api.weibo.com/2/users/show.json',
                'app_id' => get_option('smpl_weibo_appkey', ''),
                'app_secret' => get_option('smpl_weibo_secret', ''),
                'scope' => '',
                'enabled' => get_option('smpl_weibo_enabled', false)
            ],
            'github' => [
                'name' => 'GitHub',
                'auth_url' => 'https://github.com/login/oauth/authorize',
                'token_url' => 'https://github.com/login/oauth/access_token',
                'userinfo_url' => 'https://api.github.com/user',
                'app_id' => get_option('smpl_github_client_id', ''),
                'app_secret' => get_option('smpl_github_secret', ''),
                'scope' => 'user',
                'enabled' => get_option('smpl_github_enabled', false)
            ]
        ];
    }
    
    public function get_platform_config($platform) {
        return isset($this->platforms[$platform]) ? $this->platforms[$platform] : false;
    }
    
    public function get_enabled_platforms() {
        return array_filter($this->platforms, function($platform) {
            return $platform['enabled'] && !empty($platform['app_id']);
        });
    }
}

3.2 统一授权处理类设计

创建一个统一的OAuth处理类，封装各平台的授权流程：

class SMPL_OAuth_Handler {
    private $config;
    
    public function __construct() {
        $this->config = new SMPL_Platform_Config();
    }
    
    /**
     * 生成授权URL
     */
    public function get_auth_url($platform, $state = '') {
        $config = $this->config->get_platform_config($platform);
        if (!$config) {
            return false;
        }
        
        $params = [
            'response_type' => 'code',
            'client_id' => $config['app_id'],
            'redirect_uri' => $this->get_callback_url($platform),
            'state' => $state ?: $this->generate_state(),
            'scope' => $config['scope']
        ];
        
        // 平台特定参数
        if ($platform === 'wechat') {
            $params['appid'] = $config['app_id'];
        }
        
        return $config['auth_url'] . '?' . http_build_query($params);
    }
    
    /**
     * 处理授权回调
     */
    public function handle_callback($platform) {
        if (!isset($_GET['code']) || !isset($_GET['state'])) {
            return new WP_Error('invalid_callback', '无效的回调参数');
        }
        
        $code = sanitize_text_field($_GET['code']);
        $state = sanitize_text_field($_GET['state']);
        
        // 验证state防止CSRF攻击
        if (!$this->validate_state($state)) {
            return new WP_Error('invalid_state', '无效的state参数');
        }
        
        // 获取访问令牌
        $token_data = $this->get_access_token($platform, $code);
        if (is_wp_error($token_data)) {
            return $token_data;
        }
        
        // 获取用户信息
        $user_info = $this->get_user_info($platform, $token_data['access_token'], 
                                         isset($token_data['openid']) ? $token_data['openid'] : '');
        if (is_wp_error($user_info)) {
            return $user_info;
        }
        
        // 处理用户登录或注册
        return $this->process_user($platform, $user_info, $token_data);
    }
    
    /**
     * 获取访问令牌
     */
    private function get_access_token($platform, $code) {
        $config = $this->config->get_platform_config($platform);
        
        $params = [
            'grant_type' => 'authorization_code',
            'code' => $code,
            'client_id' => $config['app_id'],
            'client_secret' => $config['app_secret'],
            'redirect_uri' => $this->get_callback_url($platform)
        ];
        
        $response = wp_remote_post($config['token_url'], [
            'body' => $params,
            'timeout' => 15
        ]);
        
        if (is_wp_error($response)) {
            return $response;
        }
        
        $body = wp_remote_retrieve_body($response);
        
        // 不同平台返回格式不同
        switch ($platform) {
            case 'wechat':
            case 'weibo':
                $data = json_decode($body, true);
                break;
            case 'qq':
                parse_str($body, $data);
                break;
            case 'github':
                parse_str($body, $data);
                if (isset($data['access_token'])) {
                    $data = ['access_token' => $data['access_token']];
                }
                break;
            default:
                $data = json_decode($body, true);
        }
        
        if (isset($data['error'])) {
            return new WP_Error('token_error', $data['error_description'] ?? $data['error']);
        }
        
        return $data;
    }
    
    /**
     * 获取用户信息
     */
    private function get_user_info($platform, $access_token, $openid = '') {
        $config = $this->config->get_platform_config($platform);
        
        $params = ['access_token' => $access_token];
        
        // 添加平台特定参数
        switch ($platform) {
            case 'wechat':
                $params['openid'] = $openid;
                $params['lang'] = 'zh_CN';
                break;
            case 'qq':
                $params['oauth_consumer_key'] = $config['app_id'];
                $params['openid'] = $openid;
                break;
            case 'github':
                // GitHub使用Authorization头
                $headers = ['Authorization' => 'token ' . $access_token];
                $response = wp_remote_get($config['userinfo_url'], ['headers' => $headers]);
                break;
        }
        
        if (!isset($response)) {
            $response = wp_remote_get($config['userinfo_url'] . '?' . http_build_query($params));
        }
        
        if (is_wp_error($response)) {
            return $response;
        }
        
        $body = wp_remote_retrieve_body($response);
        $user_data = json_decode($body, true);
        
        if (isset($user_data['error'])) {
            return new WP_Error('userinfo_error', $user_data['error']);
        }
        
        return $this->normalize_user_data($platform, $user_data);
    }
    
    /**
     * 标准化用户数据
     */
    private function normalize_user_data($platform, $data) {
        $normalized = [
            'platform' => $platform,
            'platform_user_id' => '',
            'username' => '',
            'email' => '',
            'display_name' => '',
            'avatar' => ''
        ];
        
        switch ($platform) {
            case 'wechat':
                $normalized['platform_user_id'] = $data['openid'] ?? '';
                $normalized['display_name'] = $data['nickname'] ?? '';
                $normalized['avatar'] = $data['headimgurl'] ?? '';
                break;
            case 'qq':
                $normalized['platform_user_id'] = $data['openid'] ?? '';
                $normalized['display_name'] = $data['nickname'] ?? '';
                $normalized['avatar'] = $data['figureurl_qq_2'] ?? $data['figureurl_qq_1'] ?? '';
                break;
            case 'weibo':
                $normalized['platform_user_id'] = $data['id'] ?? '';
                $normalized['display_name'] = $data['screen_name'] ?? '';
                $normalized['avatar'] = $data['profile_image_url'] ?? '';
                break;
            case 'github':
                $normalized['platform_user_id'] = $data['id'] ?? '';
                $normalized['username'] = $data['login'] ?? '';
                $normalized['display_name'] = $data['name'] ?? $data['login'];
                $normalized['email'] = $data['email'] ?? '';
                $normalized['avatar'] = $data['avatar_url'] ?? '';
                break;
        }
        
        return $normalized;
    }
}

3.3 用户账户关联与登录处理

class SMPL_User_Handler {
    private $oauth_handler;
    
    public function __construct() {
        $this->oauth_handler = new SMPL_OAuth_Handler();
    }
    
    /**
     * 处理用户登录或注册
     */
    public function process_user($platform, $user_info, $token_data) {
        global $wpdb;
        
        $table_name = $wpdb->prefix . 'smpl_user_connections';
        
        // 检查是否已存在关联
        $existing = $wpdb->get_row($wpdb->prepare(
            "SELECT * FROM $table_name WHERE platform = %s AND platform_user_id = %s",
            $platform,
            $user_info['platform_user_id']
        ));
        
        if ($existing) {
            // 更新令牌信息
            $wpdb->update(
                $table_name,
                [
                    'access_token' => $token_data['access_token'],
                    'refresh_token' => $token_data['refresh_token'] ?? '',
                    'token_expiry' => isset($token_data['expires_in']) ? 
                        date('Y-m-d H:i:s', time() + $token_data['expires_in']) : null,
                    'user_data' => json_encode($user_info)
                ],
                ['id' => $existing->id]
            );
            
            $user_id = $existing->user_id;
        } else {
            // 创建新用户或关联现有用户
            if (is_user_logged_in()) {
                // 已登录用户，关联到当前账户
                $user_id = get_current_user_id();
            } else {
                // 创建新用户
                $user_id = $this->create_user_from_platform($user_info);
            }
            
            if (is_wp_error($user_id)) {
                return $user_id;
            }
            

// 保存关联信息

        $wpdb->insert(
            $table_name,
            [
                'user_id' => $user_id,
                'platform' => $platform,
                'platform_user_id' => $user_info['platform_user_id'],
                'access_token' => $token_data['access_token'],
                'refresh_token' => $token_data['refresh_token'] ?? '',
                'token_expiry' => isset($token_data['expires_in']) ? 
                    date('Y-m-d H:i:s', time() + $token_data['expires_in']) : null,
                'user_data' => json_encode($user_info)
            ]
        );
    }
    
    // 记录登录日志
    $this->log_login($user_id, $platform, true);
    
    // 执行用户登录
    if (!is_user_logged_in()) {
        wp_set_current_user($user_id);
        wp_set_auth_cookie($user_id, true);
        
        // 更新用户最后登录时间
        update_user_meta($user_id, 'last_login', current_time('mysql'));
    }
    
    return $user_id;
}

/**
 * 从平台信息创建用户
 */
private function create_user_from_platform($user_info) {
    // 生成唯一用户名
    $username = $this->generate_unique_username($user_info);
    
    // 生成随机密码
    $password = wp_generate_password(12, true, true);
    
    // 准备用户数据
    $userdata = [
        'user_login' => $username,
        'user_pass' => $password,
        'display_name' => $user_info['display_name'],
        'user_email' => $user_info['email'] ?: $this->generate_temp_email($username),
        'role' => get_option('default_role', 'subscriber')
    ];
    
    // 插入用户
    $user_id = wp_insert_user($userdata);
    
    if (is_wp_error($user_id)) {
        return $user_id;
    }
    
    // 保存用户头像
    if (!empty($user_info['avatar'])) {
        update_user_meta($user_id, 'smpl_platform_avatar', $user_info['avatar']);
        
        // 可选：下载并设置为本地头像
        $this->download_remote_avatar($user_id, $user_info['avatar']);
    }
    
    // 保存平台信息
    update_user_meta($user_id, 'smpl_registered_via', $user_info['platform']);
    
    // 发送欢迎邮件（可选）
    if (!empty($user_info['email'])) {
        wp_new_user_notification($user_id, null, 'user');
    }
    
    return $user_id;
}

/**
 * 生成唯一用户名
 */
private function generate_unique_username($user_info) {
    $base_username = '';
    
    // 尝试使用不同字段作为用户名基础
    if (!empty($user_info['username'])) {
        $base_username = sanitize_user($user_info['username'], true);
    } elseif (!empty($user_info['display_name'])) {
        $base_username = sanitize_user($user_info['display_name'], true);
    } else {
        $base_username = $user_info['platform'] . '_user';
    }
    
    // 清理用户名
    $base_username = preg_replace('/[^a-z0-9_]/', '', strtolower($base_username));
    
    // 确保唯一性
    $username = $base_username;
    $counter = 1;
    
    while (username_exists($username)) {
        $username = $base_username . $counter;
        $counter++;
    }
    
    return $username;
}

/**
 * 记录登录日志
 */
private function log_login($user_id, $platform, $success) {
    global $wpdb;
    
    $table_name = $wpdb->prefix . 'smpl_login_logs';
    
    $wpdb->insert(
        $table_name,
        [
            'user_id' => $user_id,
            'platform' => $platform,
            'ip_address' => $this->get_client_ip(),
            'user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? '',
            'status' => $success ? 'success' : 'failed'
        ]
    );
}

/**
 * 获取客户端IP
 */
private function get_client_ip() {
    $ip_keys = ['HTTP_CLIENT_IP', 'HTTP_X_FORWARDED_FOR', 'HTTP_X_FORWARDED', 
               'HTTP_X_CLUSTER_CLIENT_IP', 'HTTP_FORWARDED_FOR', 'HTTP_FORWARDED', 'REMOTE_ADDR'];
    
    foreach ($ip_keys as $key) {
        if (array_key_exists($key, $_SERVER) === true) {
            foreach (explode(',', $_SERVER[$key]) as $ip) {
                $ip = trim($ip);
                if (filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE) !== false) {
                    return $ip;
                }
            }
        }
    }
    
    return $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
}

}

## 第四章：前端登录界面实现

### 4.1 登录按钮组件设计

class SMPL_Login_Buttons {

private $platform_config;

public function __construct() {
    $this->platform_config = new SMPL_Platform_Config();
}

/**
 * 显示登录按钮
 */
public function display_buttons($args = []) {
    $defaults = [
        'layout' => 'horizontal', // horizontal, vertical, grid
        'size' => 'normal', // small, normal, large
        'shape' => 'rectangle', // rectangle, rounded, circle
        'show_labels' => true,
        'show_icons' => true,
        'before_text' => '快速登录：',
        'container_class' => 'smpl-login-buttons'
    ];
    
    $args = wp_parse_args($args, $defaults);
    
    $platforms = $this->platform_config->get_enabled_platforms();
    
    if (empty($platforms)) {
        return '';
    }
    
    ob_start();
    ?>
    <div class="<?php echo esc_attr($args['container_class']); ?> layout-<?php echo esc_attr($args['layout']); ?>">
        <?php if ($args['before_text']) : ?>
            <div class="smpl-before-text"><?php echo esc_html($args['before_text']); ?></div>
        <?php endif; ?>
        
        <div class="smpl-buttons-container">
            <?php foreach ($platforms as $platform => $config) : ?>
                <?php 
                $auth_url = $this->get_auth_url($platform);
                if (!$auth_url) continue;
                ?>
                <a href="<?php echo esc_url($auth_url); ?>" 
                   class="smpl-login-button smpl-<?php echo esc_attr($platform); ?> 
                          size-<?php echo esc_attr($args['size']); ?> 
                          shape-<?php echo esc_attr($args['shape']); ?>"
                   data-platform="<?php echo esc_attr($platform); ?>"
                   title="<?php printf(__('使用%s登录'), esc_attr($config['name'])); ?>">
                    
                    <?php if ($args['show_icons']) : ?>
                        <span class="smpl-button-icon">
                            <?php echo $this->get_platform_icon($platform); ?>
                        </span>
                    <?php endif; ?>
                    
                    <?php if ($args['show_labels']) : ?>
                        <span class="smpl-button-text">
                            <?php printf(__('%s登录'), esc_html($config['name'])); ?>
                        </span>
                    <?php endif; ?>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
    <?php
    
    // 添加CSS样式
    $this->add_styles($args);
    
    return ob_get_clean();
}

/**
 * 获取平台图标
 */
private function get_platform_icon($platform) {
    $icons = [
        'wechat' => '<svg viewBox="0 0 24 24"><path d="M9.5,4C5.4,4,2,7.4,2,11.5c0,1.7,0.7,3.4,1.9,4.6l-0.7,2.6l2.7-0.7c1.2,0.7,2.6,1.1,4,1.1c4.1,0,7.5-3.4,7.5-7.5S13.6,4,9.5,4z"/></svg>',
        'qq' => '<svg viewBox="0 0 24 24"><path d="M12,2C6.5,2,2,6.5,2,12c0,1.7,0.5,3.4,1.3,4.8l-1.1,4.1l4.2-1.1c1.4,0.8,3,1.2,4.6,1.2c5.5,0,10-4.5,10-10S17.5,2,12,2z"/></svg>',
        'weibo' => '<svg viewBox="0 0 24 24"><path d="M20,12c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8S20,7.6,20,12z M10.9,9.2c-0.6,0-1.1,0.5-1.1,1.1s0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1S11.5,9.2,10.9,9.2z M13.1,14.8c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2s2.2,1,2.2,2.2S14.3,14.8,13.1,14.8z"/></svg>',
        'github' => '<svg viewBox="0 0 24 24"><path d="M12,2C6.5,2,2,6.5,2,12c0,4.4,2.9,8.1,6.9,9.4c0.5,0.1,0.7-0.2,0.7-0.5c0-0.2,0-1,0-2c-2.8,0.6-3.4-1.3-3.4-1.3c-0.5-1.2-1.1-1.5-1.1-1.5c-0.9-0.6,0.1-0.6,0.1-0.6c1,0.1,1.5,1,1.5,1c0.9,1.5,2.3,1.1,2.9,0.8c0.1-0.6,0.3-1.1,0.6-1.4c-2.2-0.3-4.6-1.1-4.6-5c0-1.1,0.4-2,1-2.7c-0.1-0.3-0.4-1.3,0.1-2.7c0,0,0.8-0.3,2.7,1c0.8-0.2,1.6-0.3,2.4-0.3c0.8,0,1.6,0.1,2.4,0.3c1.9-1.3,2.7-1,2.7-1c0.5,1.4,0.2,2.4,0.1,2.7c0.6,0.7,1,1.6,1,2.7c0,3.9-2.3,4.7-4.6,4.9c0.4,0.3,0.7,1,0.7,2c0,1.4,0,2.6,0,2.9c0,0.3,0.2,0.6,0.7,0.5c4-1.3,6.9-5,6.9-9.4C22,6.5,17.5,2,12,2z"/></svg>'
    ];
    
    return isset($icons[$platform]) ? $icons[$platform] : '';
}

/**
 * 添加CSS样式
 */
private function add_styles($args) {
    static $styles_added = false;
    
    if ($styles_added) {
        return;
    }
    
    $styles = "
    <style>
    .smpl-login-buttons {
        margin: 20px 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .smpl-before-text {
        margin-bottom: 10px;
        color: #666;
        font-size: 14px;
    }
    
    .smpl-buttons-container {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .smpl-login-buttons.layout-horizontal .smpl-buttons-container {
        flex-direction: row;
    }
    
    .smpl-login-buttons.layout-vertical .smpl-buttons-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .smpl-login-buttons.layout-grid .smpl-buttons-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    
    .smpl-login-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
    }
    
    .smpl-login-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    /* 尺寸 */
    .smpl-login-button.size-small {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .smpl-login-button.size-normal {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .smpl-login-button.size-large {
        padding: 14px 28px;
        font-size: 16px;
    }
    
    /* 形状 */
    .smpl-login-button.shape-rectangle {
        border-radius: 4px;
    }
    
    .smpl-login-button.shape-rounded {
        border-radius: 20px;
    }
    
    .smpl-login-button.shape-circle {
        border-radius: 50%;
        width: 44px;
        height: 44px;
        padding: 0;
    }
    
    .smpl-login-button.shape-circle .smpl-button-text {
        display: none;
    }
    
    /* 图标 */
    .smpl-button-icon {
        display: inline-flex;
        align-items: center;
        margin-right: 8px;
    }
    
    .smpl-button-icon svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }
    
    .smpl-login-button.shape-circle .smpl-button-icon {
        margin-right: 0;
    }
    
    /* 平台特定样式 */
    .smpl-wechat {
        background-color: #07C160;
        color: white;
    }
    
    .smpl-qq {
        background-color: #12B7F5;
        color: white;
    }
    
    .smpl-weibo {
        background-color: #E6162D;
        color: white;
    }
    
    .smpl-github {
        background-color: #24292E;
        color: white;
    }
    
    /* 响应式设计 */
    @media (max-width: 480px) {
        .smpl-login-buttons.layout-horizontal .smpl-buttons-container {
            flex-direction: column;
        }
        
        .smpl-login-button {
            width: 100%;
            justify-content: center;
        }
    }
    </style>
    ";
    
    echo $styles;
    $styles_added = true;
}

}

### 4.2 用户中心账户管理界面

class SMPL_User_Profile {

public function __construct() {
    // 添加用户资料页面的账户管理部分
    add_action('show_user_profile', [$this, 'add_profile_section']);
    add_action('edit_user_profile', [$this, 'add_profile_section']);
    
    // 保存用户设置
    add_action('personal_options_update', [$this, 'save_profile_settings']);
    add_action('edit_user_profile_update', [$this, 'save_profile_settings']);
    
    // 添加快捷码
    add_shortcode('smpl_connected_accounts', [$this, 'connected_accounts_shortcode']);
}

/**
 * 添加账户管理部分到用户资料页面
 */
public function add_profile_section($user) {
    if (!current_user_can('edit_user', $user->ID)) {
        return;
    }
    
    $connected_accounts = $this->get_user_connected_accounts($user->ID);
    ?>
    <h3><?php _e('第三方账户管理', 'smpl'); ?></h3>
    
    <table class="form-table">
        <tr>
            <th><?php _e('已连接的平台', 'smpl'); ?></th>
            <td>
                <?