如何將社交登錄添加到您的 WordPress 企業目錄網站

已發表: 2021-09-02

具有前瞻性的企業一直在尋找提高轉化率的方法，因此他們關心網站上的用戶體驗。 這就是為什麼許多公司在其網站上使用社交登錄（也稱為社交登錄功能）的原因。

對於網站訪問者來說，社交登錄意味著他們可以跳過創建新帳戶所需的註冊程序，只需單擊一下即可登錄。 它是改善用戶體驗的傳統註冊表單的真正便捷替代方案。

同時，對於網站所有者來說，社交登錄是一項有用的功能，它可以幫助簡化用戶驗證，同時還可以更可靠地訪問用戶數據以實現個性化。

在這個簡短的教程中，我們將向您展示如何設置 HivePress 身份驗證擴展，以便您可以允許您的網站訪問者通過 Facebook 和 Google 登錄。 我們將逐步解釋如何獲取 Facebook App ID 和 Google Client ID 並將它們正確地與您的網站集成。

在我們開始之前，重要的是要注意身份驗證擴展基於 HivePress，一個免費的 WordPress 目錄插件，並且只能在 HivePress 支持的網站上使用。 因此，在本演練中，我們將使用 HivePress 插件及其默認的 WordPress 目錄主題 ListingHive。

讓我們開始吧！

安裝身份驗證插件

首先，您需要通過轉到HivePress > 擴展部分來安裝身份驗證擴展。 然後選擇必要的附加組件，安裝它並通過激活擴展程序繼續。

安裝插件後，您需要為您的網站選擇身份驗證方法。 為此，請轉到HivePress > 設置 > 用戶部分並選擇一種可用方法。 如果您想允許用戶通過 Facebook 和 Google 登錄，則需要選擇這兩種方法並保存更改，如下面的屏幕截圖所示。

向 WordPress 業務目錄網站添加身份驗證方法。

為您的網站選擇身份驗證方法後，您可以繼續下一步。

添加 Facebook 登錄按鈕

為了將“使用 Facebook 登錄”按鈕添加到您的網站，您需要先從 Facebook 獲取唯一的 App ID。 此 ID 將您的網站與 Facebook 鏈接，並允許您請求登錄用戶所需的 Facebook 個人資料詳細信息（例如，電子郵件地址） 。

那麼，讓我們進入第一步。

在 Facebook 上註冊

在創建 Facebook 應用程序之前，您必須註冊一個 Facebook 開發者帳戶。 為此，請導航到 Facebook for Developers 頁面，然後單擊登錄或開始按鈕。 然後，您需要使用您的 FB 帳戶登錄才能繼續。 驗證帳戶後，您可以進入下一步。

創建應用程序

完成註冊後，您可以前往 App Dashboard 創建您的第一個應用程序。 只需單擊創建應用程序按鈕。

創建一個新的 Facebook 應用程序。

然後你必須選擇你的應用類型。 應用類型決定了您的應用可以使用哪些 Facebook API。 簡單地說，它定義了您可以在 App Dashboard 中添加的功能。 由於您要在手頭的案例中啟用“社交登錄”功能，因此您需要使用“消費者”應用類型。

選擇 Facebook 應用程序類型。

接下來，您需要設置應用名稱（例如，您的網站名稱）並輸入您的有效電子郵件，因為所有開發者通知都將發送到那裡。 如果您沒有商務管理平台帳戶，則無需提及。 最後，單擊創建應用程序按鈕。

創建一個 FB 應用程序。

創建應用程序後，您將被重定向到應用程序儀表板。 在這裡，您需要選擇要添加到應用程序的功能。 只需單擊Facebook 登錄部分中的設置按鈕，然後在下一頁上選擇“Web”平台。

將產品添加到 Facebook 應用程序。

然後，您將看到設置表單，您可以在其中輸入您的網站詳細信息。 為了允許用戶通過 Facebook 登錄您的網​​站，只需填寫站點 URL 字段即可。 但如果您是更有經驗的用戶，您也可以填寫其他字段。

在創建 FB 應用程序期間輸入網站的 URL。

下一步是導航到左側邊欄中的“設置”>“基本”部分。

Facebook 應用程序的基本設置。

在設置頁面上，您必須：

  • 輸入您的網站域。
  • 指明隱私政策 URL，以便用戶在登錄前閱讀它們。
  • 指定數據刪除說明（包含有關您的網站訪問者如何刪除其數據的信息的頁面） 。
  • 最後，選​​擇您的網站所屬的類別。

添加所有必需的詳細信息後，保存更改。

在 Facebook for Developers 頁面上填寫有關我的網站的詳細信息。

啟用社交登錄

好的，您剛剛創建了一個應用程序。 現在您需要將您的 App 模式切換為“Live”並複制 App ID。

切換到 Facebook 應用程序的實時模式。

最後，轉到您的網站，導航到WP 儀表板 > HivePress > 設置 > 集成部分，將您的 Facebook 應用 ID 粘貼到應用 ID字段中，然後保存更改。

將 Facebook 應用 ID 添加到 WordPress 業務目錄。

而已！ 現在，您的登錄表單中應該有一個 Facebook 按鈕，允許用戶通過他們的 Facebook 帳戶登錄您的網​​站。 但是，您可能需要等待幾分鐘才能進行更改。

現在讓我們轉到本教程的下一部分來創建和添加 Google 登錄按鈕。

添加谷歌登錄按鈕

如果您想將“使用 Google 登錄”按鈕添加到您的 HivePress 支持的網站，您需要從 Google 獲取一個唯一的客戶端 ID，它將您的網站與 Google 身份驗證 API 鏈接。 所以，讓我們去做吧！

創建新項目

第一步是創建一個新的 Google API 項目（如果您已經有一個項目，您可以使用現有項目）。 為此，請轉到 Google API 控制台並單擊“創建項目”按鈕。 然後您需要輸入項目的名稱並單擊“創建”按鈕。

創建一個新的 Google API 項目。

現在您必須轉到OAuth 同意屏幕部分並根據您的網站要求選擇 OAuth 同意屏幕選項（內部或外部） 。 在本教程中，我們將選擇External選項。

然後您將被重定向到應用程序註冊表單。 在此表格中，您需要：

  • 設置應用名稱（例如，您的網站名稱） 。
  • 指示用戶支持電子郵件和開發人員的電子郵件 以便 Google 可以通知您有關您的項目的任何更改。
  • 指定指向您的主頁、隱私政策頁面和服務條款頁面的鏈接。
  • 最後，添加您的網站域。

完成後，單擊“保存”按鈕。 您可以跳過註冊表中的其他步驟並返回您的儀表板。

在 Google OAuth 同意屏幕頁面中填寫詳細信息。

下一步是創建 API 憑據，即 – OAuth Client ID。 您可以通過轉到Credentials > Create Credentials > OAuth Client ID部分來執行此操作。

創建 Google API 憑據。

在此部分中，您需要填寫名稱字段並在“授權的 JavaScript 來源”字段中輸入您網站的 URL。 或者，如果您想指定用戶在使用 Google 登錄後將被重定向到的路徑，您可以填寫“授權的重定向 URL”字段。

完成後，單擊“保存”按鈕。

填寫創建新憑據所需的詳細信息。

啟用社交登錄

最後，您獲得了一個唯一的客戶端 ID。 現在您需要將其複制並粘貼到WP Dashboard > HivePress > Settings > Integrations > Client ID部分。 不要忘記保存更改。

將 Google 客戶端 ID 添加到 WordPress 業務目錄網站。

結論

而已！ 按照上述步驟，您可以輕鬆設置身份驗證擴展並允許您的用戶通過 Facebook 和 Google 等第三方服務登錄。 完成所有步驟後，您將在登錄表單中擁有相同的 Facebook 和 Google 按鈕，如下面的屏幕截圖所示。

網站註冊表單上的社交登錄按鈕示例。

如果您在添加社交登錄按鈕時遇到任何問題，請嘗試禁用第三方插件（可能存在緩存問題或與第三方插件衝突） 。 此外，請確保您在HivePress > 設置 > 用戶部分中啟用了身份驗證方法並保存了更改。

此外，如果您想優化您的網站，我們建議您查看我們的教程，了解如何加速 HivePress 構建的網站。