WordPress 教學：允許使用者綁定多個登入方式，並在後台顯示

📌 目標

• 讓 WordPress 使用者可以同時綁定 Google、Facebook、LINE 登入
• 在 WordPress 後台 (wp-admin/users.php) 顯示所有綁定的登入方式圖示
• 確保 不覆蓋舊的登入方式

---

🔹 第 1 步：確保 social_login_methods 存入多個登入方式

在 handleUserLogin() 方法內，讓使用者可以綁定 多個 登入方式，而不覆蓋原本的登入紀錄。

🔹 Google 登入 (ORCAGoogleAuth.php)

$current_methods = get_user_meta($user->ID, 'social_login_methods', true);
$current_methods = is_array($current_methods) ? $current_methods : [];

if (!in_array('Google', $current_methods)) {
    $current_methods[] = 'Google';
}

update_user_meta($user->ID, 'social_login_methods', array_unique($current_methods));

🔹 Facebook 登入 (ORCAFBAuth.php)

$current_methods = get_user_meta($user->ID, 'social_login_methods', true);
$current_methods = is_array($current_methods) ? $current_methods : [];

if (!in_array('Facebook', $current_methods)) {
    $current_methods[] = 'Facebook';
}

update_user_meta($user->ID, 'social_login_methods', array_unique($current_methods));

🔹 LINE 登入 (ORCALineAuth.php)

$current_methods = get_user_meta($user->ID, 'social_login_methods', true);
$current_methods = is_array($current_methods) ? $current_methods : [];

if (!in_array('LINE', $current_methods)) {
    $current_methods[] = 'LINE';
}

update_user_meta($user->ID, 'social_login_methods', array_unique($current_methods));

---

🔹 第 2 步：修改 WordPress 使用者列表，顯示所有登入方式

📌 在 functions.php 或 ORCASettings.php 加入這段程式碼

✅ 在 wp-admin/users.php 新增「綁定的登入方式」欄位

function add_social_login_column($columns) {
    $columns['social_login_methods'] = '綁定的登入方式';
    return $columns;
}
add_filter('manage_users_columns', 'add_social_login_column');

✅ 顯示使用者綁定的所有登入方式圖示

function show_social_login_column_data($value, $column_name, $user_id) {
    if ($column_name === 'social_login_methods') {
        $methods = get_user_meta($user_id, 'social_login_methods', true);
        if (!$methods || !is_array($methods)) {
            return 'Local'; // 沒有社群綁定，顯示為本地登入
        }

        // 設定不同登入方式的圖示
        $icons = [
            'Google'   => '<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" width="24" height="24" alt="Google">',
            'Facebook' => '<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" width="24" height="24" alt="Facebook">',
            'LINE'     => '<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/LINE_logo.svg" width="24" height="24" alt="LINE">',
        ];

        $icons_html = array_map(fn($method) => $icons[$method] ?? $method, array_unique($methods));
        return implode(' ', $icons_html);
    }
    return $value;
}
add_filter('manage_users_custom_column', 'show_social_login_column_data', 10, 3);

---

✅ 最終效果

當你進入 WordPress 後台 (wp-admin/users.php)，你會看到：

使用者名稱	Email	角色	綁定的登入方式
User A	[email protected]	會員	🟢 Google 🔵 Facebook 🟢 LINE
User B	[email protected]	會員	🔵 Facebook
User C	[email protected]	會員	🟢 LINE 🟢 Google

---

📌 這樣就能讓 WordPress 使用者綁定多個登入方式，並在後台顯示所有登入方式的圖示！