Ask me anything
Ithy Logo
Sign in to save

WordPress 社交登入完整方案

整合Google與Line登入，防止重複註冊並記錄使用者同意資訊

wordpress social login setup

關鍵重點

  • 防止重複註冊： 確保使用者無法透過不同社交帳號註冊多個帳戶，保護網站的用戶資料完整性。
  • 自訂社交登入短碼： 包含使用條款與隱私政策，同意後方可使用Google與Line登入選項。
  • 紀錄同意資訊與角色配置： 記錄使用者同意的時間與IP地址，並自動設定適當的用戶角色。

1. 防止重複註冊機制

檢查電子郵件是否已存在

為了避免同一使用者使用Google與Line分別註冊成為不同帳戶，我們需要在用戶註冊時檢查其電子郵件是否已存在於系統中。若已存在，則阻止註冊並提示用戶。

實作步驟：

將以下程式碼添加至您的WordPress網站，使用WPCode插件創建新的PHP程式碼片段，並設為「活動」狀態。


    // 防止重複帳戶註冊（檢查電子郵件）
    function prevent_duplicate_social_login($user_login, $user_email, $errors) {
        if (email_exists($user_email)) {
            $errors->add('email_exists', __('<strong>錯誤</strong>：此電子郵件已被註冊。'));
        }
    }
    add_action('registration_errors', 'prevent_duplicate_social_login', 10, 3);

此段程式碼會在用戶註冊時，檢查其電子郵件是否已被使用，若是，則阻止註冊並顯示錯誤訊息。

2. 自訂社交登入短碼

整合使用條款與隱私政策的登入流程

我們將設計一個新的短碼，包含Super Socializer的[TheChamp-Login]，並加入使用條款與隱私政策的同意機制。使用者必須勾選同意後，才能看到社交登入選項。

完整PHP程式碼：


    // 添加自定義短碼 [custom_social_login]
    function custom_social_login_shortcode() {
        // 檢查是否已登入
        if (is_user_logged_in()) {
            return '<p>您已經登入。</p>';
        }

        // 處理表單提交
        if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['custom_social_login_submit'])) {
            if (empty($_POST['terms_agree']) || empty($_POST['privacy_agree'])) {
                echo '<p style="color:red;">請您閱讀並同意條款和隱私政策。</p>';
            } else {
                // 儲存同意時間與IP地址到session中
                session_start();
                $_SESSION['user_agree_time'] = current_time('mysql');
                $_SESSION['user_agree_ip'] = $_SERVER['REMOTE_ADDR'];
            }
        }

        ob_start();
        ?>
        <form method="POST">
            <p>
                <input type="checkbox" id="terms_agree" name="terms_agree" required>
                <label for="terms_agree">我已閱讀並同意
                    <a href="/terms-and-conditions" target="_blank">網站使用條款</a>
                </label>
            </p>
            <p>
                <input type="checkbox" id="privacy_agree" name="privacy_agree" required>
                <label for="privacy_agree">我已閱讀並同意
                    <a href="/privacy-policy" target="_blank">隱私權政策</a>
                </label>
            </p>
            <button type="submit" name="custom_social_login_submit">同意並註冊</button>
        </form>
        
        <?php
        // 顯示社交登入按鈕
        if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['custom_social_login_submit']) && !empty($_POST['terms_agree']) && !empty($_POST['privacy_agree'])) {
            echo do_shortcode('[TheChamp-Login]');
        }

        return ob_get_clean();
    }
    add_shortcode('custom_social_login', 'custom_social_login_shortcode');

此短碼將在頁面上顯示兩個同意框，使用者必須勾選後，才能看到與使用Super Socializer的Google與Line登入選項。

如何使用：

  1. 使用WPCode插件創建新的PHP程式碼片段，將上述程式碼貼入並啟用。
  2. 在您希望顯示登入表單的頁面或文章中，添加短碼： 
    [custom_social_login]

3. 紀錄同意資訊與角色配置

記錄同意時間與IP地址

為了完整記錄使用者同意使用條款與隱私政策的資訊，我們將把同意的時間與IP地址儲存到用戶的個人資料中。

完整PHP程式碼：


    // 在使用者註冊時記錄同意資訊
    function save_user_meta_on_register($user_id) {
        if (session_status() == PHP_SESSION_NONE) {
            session_start();
        }
        if (isset($_SESSION['user_agree_time']) && isset($_SESSION['user_agree_ip'])) {
            update_user_meta($user_id, 'terms_agree_time', $_SESSION['user_agree_time']);
            update_user_meta($user_id, 'terms_agree_ip', $_SESSION['user_agree_ip']);
            update_user_meta($user_id, 'privacy_agree_time', $_SESSION['user_agree_time']);
            update_user_meta($user_id, 'privacy_agree_ip', $_SESSION['user_agree_ip']);
            
            // 清除session資料
            unset($_SESSION['user_agree_time'], $_SESSION['user_agree_ip']);
        }
    }
    add_action('user_register', 'save_user_meta_on_register');

    // 設定新註冊使用者的角色
    function set_user_role_on_register($user_id) {
        $user = new WP_User($user_id);
        $user->set_role('subscriber');

        // 為bbPress添加participant角色
        if (function_exists('bbp_set_user_role')) {
            bbp_set_user_role($user_id, 'bbp_participant');
        }
    }
    add_action('user_register', 'set_user_role_on_register', 20);

上述程式碼將在用戶註冊時，將其同意的時間與IP地址儲存至用戶的個人資料中，並自動設定其角色為subscriber，及bbPress的participant。

4. 使用WPCode插件與Blocksy主題設定

整合WPCode及Blocksy主題

確保您的網站已安裝並啟用WPCode插件，以及Blocksy主題的免費版。以下是具體步驟：

步驟一：安裝並啟用WPCode插件

  1. 登錄您的WordPress管理後台。
  2. 導航至「插件」 > 「安裝插件」。
  3. 在搜索欄輸入「WPCode」，找到插件後點擊「立即安裝」，然後啟用。

步驟二：新增PHP程式碼片段

  1. 在WordPress管理後台，導航至「Code Snippets」 > 「Add New」。
  2. 點擊「新增代碼片段」，選擇「PHP Snippet」。
  3. 將上述防止重複註冊、自訂社交登入短碼、紀錄同意資訊與角色配置的程式碼分別建立為獨立的片段。
  4. 為每個片段命名，並啟用它們。

步驟三：在頁面中使用自訂短碼

  1. 編輯您希望顯示登入表單的頁面或文章。
  2. 添加以下短碼到內容區： 
    [custom_social_login]
  3. 發布或更新頁面，檢視效果。

程式碼總覽

防止重複註冊程式碼


// 防止重複帳戶註冊（檢查電子郵件）
function prevent_duplicate_social_login($user_login, $user_email, $errors) {
    if (email_exists($user_email)) {
        $errors->add('email_exists', __('<strong>錯誤</strong>：此電子郵件已被註冊。'));
    }
}
add_action('registration_errors', 'prevent_duplicate_social_login', 10, 3);

自訂社交登入短碼程式碼


// 添加自定義短碼 [custom_social_login]
function custom_social_login_shortcode() {
    // 檢查是否已登入
    if (is_user_logged_in()) {
        return '<p>您已經登入。</p>';
    }

    // 處理表單提交
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['custom_social_login_submit'])) {
        if (empty($_POST['terms_agree']) || empty($_POST['privacy_agree'])) {
            echo '<p style="color:red;">請您閱讀並同意條款和隱私政策。</p>';
        } else {
            // 儲存同意時間與IP地址到session中
            session_start();
            $_SESSION['user_agree_time'] = current_time('mysql');
            $_SESSION['user_agree_ip'] = $_SERVER['REMOTE_ADDR'];
        }
    }

    ob_start();
    ?>
    <form method="POST">
        <p>
            <input type="checkbox" id="terms_agree" name="terms_agree" required>
            <label for="terms_agree">我已閱讀並同意
                <a href="/terms-and-conditions" target="_blank">網站使用條款</a>
            </label>
        </p>
        <p>
            <input type="checkbox" id="privacy_agree" name="privacy_agree" required>
            <label for="privacy_agree">我已閱讀並同意
                <a href="/privacy-policy" target="_blank">隱私權政策</a>
            </label>
        </p>
        <button type="submit" name="custom_social_login_submit">同意並註冊</button>
    </form>
    
    <?php
    // 顯示社交登入按鈕
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['custom_social_login_submit']) && !empty($_POST['terms_agree']) && !empty($_POST['privacy_agree'])) {
        echo do_shortcode('[TheChamp-Login]');
    }

    return ob_get_clean();
}
add_shortcode('custom_social_login', 'custom_social_login_shortcode');

紀錄同意資訊與設定角色程式碼


// 在使用者註冊時記錄同意資訊
function save_user_meta_on_register($user_id) {
    if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }
    if (isset($_SESSION['user_agree_time']) && isset($_SESSION['user_agree_ip'])) {
        update_user_meta($user_id, 'terms_agree_time', $_SESSION['user_agree_time']);
        update_user_meta($user_id, 'terms_agree_ip', $_SESSION['user_agree_ip']);
        update_user_meta($user_id, 'privacy_agree_time', $_SESSION['user_agree_time']);
        update_user_meta($user_id, 'privacy_agree_ip', $_SESSION['user_agree_ip']);
        
        // 清除session資料
        unset($_SESSION['user_agree_time'], $_SESSION['user_agree_ip']);
    }
}
add_action('user_register', 'save_user_meta_on_register');


// 設定新註冊使用者的角色
function set_user_role_on_register($user_id) {
    $user = new WP_User($user_id);
    $user->set_role('subscriber');

    // 為bbPress添加participant角色
    if (function_exists('bbp_set_user_role')) {
        bbp_set_user_role($user_id, 'bbp_participant');
    }
}
add_action('user_register', 'set_user_role_on_register', 20);

測試與驗證

確保功能正常運作

在實作上述程式碼後，請依照以下步驟進行測試，以確保所有功能正確運作：

步驟一：測試防止重複註冊

  1. 使用Google帳號進行註冊，確認註冊成功。
  2. 使用同一電子郵件透過Line進行再次註冊，應顯示錯誤訊息「此電子郵件已被註冊」。

步驟二：測試自訂短碼功能

  1. 訪問包含[custom_social_login]短碼的頁面。
  2. 確認頁面顯示使用條款與隱私政策的勾選框。
  3. 在未勾選前，社交登入按鈕不應顯示。
  4. 勾選兩個選項後，社交登入按鈕應顯示並可正常使用。

步驟三：測試紀錄同意資訊與角色設定

  1. 完成註冊後，進入WordPress後台的用戶資料頁面。
  2. 確認用戶的個人資料中已紀錄terms_agree_time、terms_agree_ip、privacy_agree_time、privacy_agree_ip。
  3. 確認新註冊用戶的角色為subscriber，並且具有bbPress的participant角色。

結論

透過上述步驟，您已成功為WordPress網站整合Super Socializer的Google與Line社交登入功能，同時防止用戶重複註冊，並記錄使用者同意使用條款與隱私政策的相關資訊。此外，註冊用戶將自動獲得subscriber與bbPress的participant角色，確保網站運作的順暢與安全性。

若在實作過程中遇到問題，建議檢查以下幾點：

  • 確認所有程式碼片段已正確添加並啟用。
  • 確保Super Socializer插件已正確配置並啟用Google與Line登入選項。
  • 檢查網站是否有其他衝突的插件或主題設定。

如有任何疑問，歡迎進一步諮詢或參考相關插件的官方文檔。

參考資料

codex.bbpress.org
bbPress 使用者角色與權限
wpcode.com
WPCode 插件文件
wordpress.org
Super Socializer 官方插件頁面
creativethemes.com
Blocksy 主題官方頁面

Last updated January 27, 2025

AI-assisted research. Sources, methodology and corrections · Source-checked guides and tools · Explore published answers

Ask Ithy AI