完整教學：客製化社交登入 Snippet 程式碼

從條款同意、reCAPTCHA 驗證到角色設定，一次搞定社交登入

精華重點

避免重複註冊：透過檢查使用者電子郵件，防止同一人利用 Google 與 Line 產生多帳號。
強制條款同意與 reCAPTCHA：註冊前必須閱讀並勾選網站使用條款及隱私權政策，並經由 Google reCAPTCHA v2 驗證確認「我不是機器人」。
自動記錄與角色設定：同意紀錄（包含時間與 IP）會儲存於 WordPress 使用者設定，並自動分派為 subscriber 與 bbPress 的 Participant Role。

一、簡介

本篇說明將帶您完整了解如何在使用 Ultimate Member 來管理會員資料與導覽選單的 WordPress 網站中，利用 WP Code plugin 實作一個客製化的社交登入系統。這個系統整合了 Super Socializer 提供的 [TheChamp-Login] 的社交登入功能，並額外加入兩個條款連結（網站使用條款與隱私權政策），使得使用者必須勾選同意後才能進行註冊。同時，系統整合 Google reCAPTCHA v2 驗證機制，降低機器人與惡意註冊風險。註冊成功後，自動記錄同意的時間和 IP 位址，並將帳號角色設定為 subscriber，同時賦予 bbPress 的 Participant Role。此課程特別適合55歲以上樂齡會員使用的網站。

二、系統需求與前置準備

系統需求

在開始之前，請確認您的 WordPress 網站已經安裝下列插件並做好基本設定：

Ultimate Member（管理會員與內容）
Super Socializer Social Login（社交登入支援 Google 及 Line 登入）
Ultimate Member - ReCHPTCHA（整合 Google reCAPTCHA v2）
WP Code Plugin（用來新增客製化程式片段 Snippet）
bbPress（論壇系統，需賦予新註冊會員參與者角色）

前置步驟

1. 請先建立兩個相關頁面：一個為「網站使用條款」（terms-conditions），另一個為「隱私權政策」（privacy-policy）。 2. 確認 Ultimate Member 的 reCAPTCHA 設定為 V2，並取得正確的「站點金鑰」與「秘密金鑰」。 3. 請到 Super Socializer 外掛中設置 Google 與 Line 的登入設定資料。 4. 確認您的主題（本網站使用 Blocksy 免費版）可以正確顯示短代碼內容。

三、完整程式碼 Snippet

以下為完整的 PHP 程式碼，您可直接複製整段程式碼至 WP Code Plugin 中並啟用。此程式碼解決所有需求，包括：

防止同一使用者利用 Google 與 Line 註冊重複帳號；
建立自訂的社交登入短代碼，要求使用者先勾選同意「網站使用條款」與「隱私權政策」；
整合 Google reCAPTCHA 驗證（V2 的「我不是機器人」核取方塊）；
註冊成功後記錄同意條款與隱私政策的時間與 IP，同時將使用者角色設定為 subscriber 並賦予 bbPress 的 Participant Role。

完整程式碼


<?php
/**
 * Plugin Name: 完整客製化社交登入 Snippet
 * Description: 整合 Super Socializer、條款同意、Google reCAPTCHA 與角色設定，確保同一人無法利用不同社交供應商重複註冊。
 */

/* ------------------------------------------
   1. 避免同一用戶使用 Google 與 Line 重複註冊
------------------------------------------ */
add_filter('the_champ_login_before_process', 'prevent_duplicate_social_login', 10, 1);
function prevent_duplicate_social_login($user_data) {
    // 取得社交登入所回傳的 email
    $email = isset($user_data['email']) ? $user_data['email'] : '';
    if (!empty($email) && email_exists($email)) {
        // 停止進行，提示錯誤訊息
        wp_die('此電子郵件已經註冊，請使用其他電子郵件或直接登入。');
    }
    return $user_data;
}

/* ------------------------------------------
   2. 自訂社交登入 Shortcode
------------------------------------------ */
add_shortcode('custom_social_login', 'custom_social_login_shortcode');
function custom_social_login_shortcode() {
    // 請務必將下列 URL 替換成您的條款與隱私權頁面連結
    $terms_url   = site_url('/terms-conditions');
    $privacy_url = site_url('/privacy-policy');
    
    ob_start();
    ?>
    <div id="custom-social-login-wrapper" style="max-width:500px; margin:0 auto;">
      <form id="custom-social-login-form" action="" method="post">
        <h4 style="color:#7FA86E;">請同意下列條款以進行社交登入</h4>
        
        <p>
          <input type="checkbox" id="terms_agree" name="terms_agree" value="1">
          <label for="terms_agree">
            我已閱讀並同意
            <span style="opacity: 0.2">網站使用條款</span>
          </label>
        </p>
        <p>
          <input type="checkbox" id="privacy_agree" name="privacy_agree" value="1">
          <label for="privacy_agree">
            我已閱讀並同意
            <span style="opacity: 0.2">隱私權政策</span>
          </label>
        </p>
        
        <!-- 顯示 Google reCAPTCHA v2 -->
        <div class="g-recaptcha" data-sitekey="<?php echo um_get_option('grecaptcha_site_key'); ?>"></div>
        <p style="margin-top:15px;">
          <button type="submit" id="submit-agreement">繼續註冊</button>
        </p>
      </form>
      
      <!-- Super Socializer 登入選項，初始隱藏 -->
      <div id="super-social-login-container" style="display:none; margin-top:20px;">
        <?php echo do_shortcode('[TheChamp-Login]'); ?>
      </div>
    </div>
    
    <script>
    jQuery(document).ready(function($) {
      // 當表單送出時進行驗證
      $('#custom-social-login-form').on('submit', function(e) {
          e.preventDefault();
          // 檢查條款與政策是否勾選
          if (!$('#terms_agree').prop('checked') || !$('#privacy_agree').prop('checked')) {
              alert('請務必勾選同意網站使用條款與隱私權政策。');
              return false;
          }
          
          // 驗證 reCAPTCHA 回應是否完成
          if (grecaptcha.getResponse() === '') {
              alert('請完成「我不是機器人」驗證。');
              return false;
          }
          
          // 當兩個條款均勾選且 reCAPTCHA 驗證通過，隱藏送出按鈕並顯示社交登入
          $('#custom-social-login-form').hide();
          $('#super-social-login-container').show();
      });
    });
    </script>
    <?php
    return ob_get_clean();
}

/* ------------------------------------------
   3. 記錄同意條款與隱私權政策的資訊（時間及 IP）
------------------------------------------ */
function record_user_agreements($user_id) {
    $current_time = current_time('mysql');
    $user_ip      = $_SERVER['REMOTE_ADDR'];
    
    // 分別記錄條款與隱私政策的同意時間及 IP，
    // 欄位名稱為：terms_agreement_time, terms_agreement_ip, privacy_agreement_time, privacy_agreement_ip
    update_user_meta($user_id, 'terms_agreement_time', $current_time);
    update_user_meta($user_id, 'terms_agreement_ip', $user_ip);
    
    update_user_meta($user_id, 'privacy_agreement_time', $current_time);
    update_user_meta($user_id, 'privacy_agreement_ip', $user_ip);
}

/* ------------------------------------------
   4. 註冊時設定使用者角色為 Subscriber 並賦予 bbPress Participant Role 
------------------------------------------ */
function set_user_role_and_bbpress($user_id) {
    // 將使用者角色設定為 subscriber
    $user = new WP_User($user_id);
    $user->set_role('subscriber');
    
    // 如果已安裝 bbPress，則賦予 Participant Role
    if (function_exists('bbp_set_user_role')) {
       bbp_set_user_role($user_id, 'bbp_participant');
    }
}

/* ------------------------------------------
   5. 連結所有相關動作至註冊事件
------------------------------------------ */
add_action('user_register', 'record_user_agreements');
add_action('user_register', 'set_user_role_and_bbpress');

?>

四、程式碼說明

1. 避免重複註冊

此段程式利用 Super Socializer 在處理社交登入資料前所觸發的勾子 (hook) 進行電子郵件檢查。當使用者透過 Google 或 Line 登入時，系統先檢查該 email 是否已存在於資料庫中，若存在則中斷註冊流程，並透過 wp_die() 提示錯誤。這可以有效避免使用者利用不同社交平台產生多個帳號。

2. 自訂社交登入 Shortcode

此段程式碼註冊了一個自訂短代碼 [custom_social_login]，在前端產生一個包含兩個勾選框的表單，分別讓使用者確認已閱讀「網站使用條款」與「隱私權政策」。此外，表單中嵌入了 Google reCAPTCHA v2 驗證區塊，當使用者按下「繼續註冊」按鈕後，系統會檢查是否已完成條款同意與 reCAPTCHA 驗證，通過驗證後隱藏表單顯示 Super Socializer 的社交登入選項。

3. 記錄用戶同意資訊

在使用者註冊成功後，系統會利用 record_user_agreements 函數，分別以 "terms_agreement_time" 與 "privacy_agreement_time" 儲存同意的時間，以 "terms_agreement_ip" 與 "privacy_agreement_ip" 儲存使用者 IP。這些資料將記錄在使用者個人設定資料中，以便後續查核會員是否確實同意相關條款。

4. 自動角色設定

使用 set_user_role_and_bbpress 函數於使用者註冊後自動將帳號的角色設定為 subscriber，並且檢測 bbPress 外掛是否啟用，如啟用則賦予該帳號 bbPress 的 Participant Role。如此不僅能夠符合網站基本使用需求，同時也能確保論壇互動功能正常運作。

五、手把手設定步驟

步驟 1：前置準備

1. 登入 WordPress 管理後台，確認下列插件均已安裝與啟用：

Ultimate Member
Super Socializer Social Login
Ultimate Member - ReCHPTCHA（設定好 Google reCAPTCHA v2）
WP Code Plugin
bbPress

2. 建立「網站使用條款」頁面 (URL：/terms-conditions) 與「隱私權政策」頁面 (URL：/privacy-policy)，內容請依照您實際需求撰寫。

步驟 2：新增程式碼至 WP Code Plugin

1. 在 WordPress 後台側邊選單找到「WP Code」並點選進入。
2. 點選「新增片段」按鈕，選擇新增 PHP 片段。
3. 將上方提供的完整程式碼複製並貼入代碼區域。
4. 請確認程式中 $terms_url 與 $privacy_url 分別引用您網站使用條款與隱私權政策頁面的正確連結。
5. 設定片段執行位置為全站運行或 functions.php (由 WP Code 處理)，最後點選「儲存並啟用」。

步驟 3：修改 reCAPTCHA 設定

檢查您的 Ultimate Member - ReCHPTCHA 插件設定是否正確：

設定項目	說明
版本選擇	請選擇 Google reCAPTCHA v2，並啟用「我不是機器人」核取框
站點金鑰	須填入您從 Google 取得的 reCAPTCHA 站點金鑰
秘密金鑰	須填入從 Google 取得的 reCAPTCHA 秘密金鑰

步驟 4：測試與上線

1. 在需要顯示社交登入功能的頁面中插入短代碼 [custom_social_login]。
2. 開啟該頁面並檢查畫面是否出現兩個勾選框、reCAPTCHA 檢查，以及「繼續註冊」按鈕。
3. 測試未勾選條款或未通過 reCAPTCHA 時是否會提示正確訊息。
4. 當資料驗證通過時，應自動切換顯示 Super Socializer 的 [TheChamp-Login] 登入按鈕，供使用者選擇 Google 或 Line 登入。
5. 完成註冊後，檢查使用者個人檔案是否具有 "terms_agreement_time"、"terms_agreement_ip"、"privacy_agreement_time" 與 "privacy_agreement_ip" 這四個欄位資料，以及使用者角色是否正確設定為 subscriber 並在 bbPress 中擁有 Participant Role。

結論

經由本篇說明，您已成功整合了客製化的社交登入系統，以解決樂齡會員重複註冊問題。新註冊會員在進行社交登入前必須先同意網站的使用條款與隱私權政策，並通過 Google reCAPTCHA v2 驗證機制，這已成為提升網站安全性與使用者體驗的重要步驟。同時，系統會自動記錄同意條款的相關資訊，並將使用者角色指派為 subscriber 與 bbPress 的 Participant Role，確保論壇功能正常運作。透過此完整解決方案，您的網站能更有效管理會員註冊並防範多帳號問題，進一步達到符合網站政策與會員信任的目標。