如何在 WordPress 中啟用一鍵式 Google 登錄

當您的用戶可以使用他們的 Google 帳戶登錄時，他們無需建立、記住或監控其他用戶名和密碼即可訪問您的網站。 他們的時間得以節省，您的轉化率也會提高。 在本教程中，我們將向您展示如何將一鍵式 Google 登錄集成到 WordPress。

為什麼在 WordPress 中包含 Google 登錄？

許多在線用戶繼續使用他們的 Google 帳戶。 這使他們能夠快速訪問 Gmail、Drive 和 Documents 等 Google 產品，而無需為每個產品單獨登錄。

當您在您的 WordPress 登錄頁面上啟用一鍵式 Google 登錄時，您的用戶將能夠在您的網站上執行相同的操作。 用戶可以通過使用他們的 Google 帳戶快速登錄來節省時間。 這消除了用戶每次都輸入其登錄詳細信息的需要。

如果您只有一個基本的 WordPress 博客，您可能會發現此功能沒有用。 但是，如果您的公司使用 Google Workspace 作為專業的企業電子郵件地址，您的團隊成員可以使用您公司的 Google 應用程序帳戶登錄。

單點登錄選項，例如一鍵式 Google 登錄，對於任何需要用戶登錄的網站也非常有用，例如多作者網站、會員網站和銷售在線課程的網站。 話雖如此，讓我們來看看如何簡單地將谷歌的一鍵登錄集成到您的 WordPress 網站。

如何在 WordPress 中啟用一鍵式 Google 登錄？

首先，下載並安裝 Nextend Social Login and Registration 插件。 請訪問我們的 WordPress 插件安裝初學者指南以獲取更多信息。

在本課中，我們將使用允許 Google、Twitter 和 Facebook 登錄的免費插件。 Nextend Social Login 也有一個商業版本，可以為各種網站添加社交登錄，包括 PayPal、Slack 和 TikTok。

激活後轉到 WordPress 管理區域中的設置 » Nextend 社交登錄。 此屏幕顯示許多可用的社交登錄選項。

單擊 Google 徽標下方的“入門”按鈕，將 Google 登錄名添加到您的 WordPress 網站。 如您所見，第一步是開發 Google 應用程序。 不要被創建 Google 應用程序的前景嚇倒。

您無需了解任何代碼，我們將引導您完成整個過程。

開發谷歌應用程序

您需要在 WordPress 儀表板和 Google Developers Console 之間轉換才能構建此應用程序。 最好在當前瀏覽器選項卡中打開 WordPress 儀表板，同時打開一個新選項卡。

您現在可以訪問 Google Developers Console 頁面。 如果您尚未登錄，系統將提示您使用 Google 帳戶登錄。

下一步是從頂部菜單中選擇一個項目。 要繼續，將出現一個彈出窗口，您需要單擊“創建項目”按鈕。

這將引導您進入新項目頁面。 您必須輸入項目名稱並選擇位置。 項目名稱可以是您喜歡的任何名稱，例如“Google 登錄”。

如果您使用 Google Workspace 帳戶登錄，該位置將自動填寫您所在組織的名稱。 如果沒有，只需將其保留為“無組織”。

要繼續，請單擊“創建”按鈕。 您現在將被帶到“API 和服務”儀表板。 在此頁面上，從左側選項中選擇“OAuth 同意屏幕”。

您可以在此處選擇要允許登錄的人員類型。

如果只有擁有貴公司 Google 帳戶的人才能登錄，請選擇“內部”。如果您的用戶的電子郵件地址不在您的組織內，則應選擇“外部”。 例如，某人擁有 @gmail.com 帳戶，而不是 @yourcompanyemail.com 地址。

當您準備好繼續時，單擊“創建”按鈕。 您現在可以開始添加有關您的應用程序的信息。

首先，在應用名稱區域輸入您的公司名稱。 登錄時，用戶會看到類似“Smith Training Services 請求訪問您的 Google 帳戶”的內容。

您還必須輸入用於登錄 Google 的電子郵件地址。 這允許您的用戶查詢有關 Google 登錄屏幕的信息。

之後，向下滾動到“應用程序域”區域。 在此處添加指向您網站主頁、隱私政策頁面和服務條款頁面的鏈接。

然後，單擊“添加域”選項以輸入您網站的域名，例如“example.com”。 如果您希望將一鍵式 Google 登錄添加到多個網站，您可以通過單擊“+ 添加域”選項來實現。

最後，您必須輸入一個或多個電子郵件地址，以便 Google 可以讓您了解項目的任何更改。 完成後，單擊“保存並繼續”選項。

然後您將被帶到範圍和測試用戶頁面。 只需滾動到這兩個頁面的底部，然後單擊“保存並繼續”選項。

此步驟的最後一頁將為您提供 OAuth 同意屏幕設置的摘要。 下一步是生成您的插件連接到 Google Cloud 所需的密鑰。 從左側菜單中選擇“憑據”，然後單擊屏幕頂部的“+ 生成憑據”選項。 您必須選擇“OAuth 客戶端 ID”選項。

這會將您重定向到“創建 OAuth 客戶端 ID”頁面。 從“應用程序類型”下拉菜單中選擇“Web 應用程序”。

該網站將更新一些設置。 向下轉到標題為“授權重定向 URI”的區域，然後單擊“+ 添加 URI”按鈕。

現在輸入以下網址：

http://example.com/wp-login.php?loginSocial=google

請注意將 example.com 更改為您自己網站的地址。

之後，您應該單擊“創建”按鈕以保存該選項。 調整生效可能需要五分鐘到數小時不等。

您的 OAuth 客戶端已成功生成！

將出現一個窗口，其中包含“您的客戶 ID”和“您的客戶密碼”。 必須將這些密鑰複製並粘貼到 WordPress 管理區域中的插件設置頁面。

只需單擊右側的“複製”圖標即可一次復制一個密鑰。

在您的插件中包含 Google 密鑰

現在返回您網站的瀏覽器選項卡，然後從設置» Nextend 社交登錄菜單中選擇“設置”選項卡。 這裡有 Client ID 和 Client Secret 字段。

您必須將密鑰從 Google Cloud Console 複製並粘貼到這些區域。

之後，請確保單擊“保存更改”按鈕以保存您的設置。

您現在必須驗證設置是否正確。 這很重要，因為您不希望真正的用戶在嘗試登錄您的網​​站時遇到困難。

只需點擊“驗證設置”按鈕，該插件將確保您創建的 Google 應用程序可以運行。

如果您正確執行了前面的說明，您應該會看到一條消息“工作正常 - 已禁用”。

您現在可以放心地單擊“啟用”按鈕，以允許人們使用他們的 Google ID 簽到。

將出現一條通知，確認現在已啟用 Google 登錄。

選擇按鈕樣式和標籤

Nextend 中的默認按鈕樣式和標籤非常傳統，適用於大多數網站。 但是，您可以通過轉到屏幕頂部的“按鈕”選項來更改它們。

您現在將看到社交登錄按鈕的所有可用樣式。 要使用不同的樣式，只需選擇其單選按鈕。

之後，您可以通過更改“登錄標籤”字段中的內容來修改按鈕措辭。

如果您願意，您可以使用 HTML 向登錄標籤添加一些基本格式。 例如，<b> 和 </b> 標籤可用於使文本加粗。

您還可以更改“連接標籤”和“取消鏈接標籤”選項，這些選項允許人們將他們的 Google 帳戶與您的網站連接和斷開連接。 技術用戶可以使用按鈕的 HTML 代碼構建自己的 Google 登錄按鈕。

要保存設置，請確保單擊“保存更改”選項。

從測試模式中刪除您的 Google 應用程序

返回 Google Cloud 瀏覽器選項卡，您還必須做一件事。 包含您的客戶端 ID 和客戶端密碼的彈出窗口應該仍然可見。 您可以通過單擊底部的“確定”按鈕關閉彈出窗口。

您現在必須從左側菜單中選擇“OAuth 同意屏幕”。

如您所見，您的 Google 應用程序處於“測試”模式。 這使您能夠與一小群人一起測試您的應用程序。 在使用插件驗證設置後收到“工作正常”信號後，您現在可以將其移至“生產”模式。

您可以通過單擊“發布應用程序”按鈕來完成此操作。 之後，您將收到一個標題為“Push to production?”的彈出窗口。

只需單擊“確認”即可允許所有人在您的網站上使用一步 Google 登錄。

如果您仔細按照此說明操作，驗證狀態現在應該是“不需要驗證”。

您的應用現在可供所有 Google 用戶訪問。

當用戶加入您的網站時，他們現在可以選擇使用 Google。

但是，如果願意，他們可以繼續使用常用的 WordPress 用戶名和密碼登錄。

請記住，人們只能使用他們在您網站上使用的 Google 帳戶地址登錄。 此外，如果您在 WordPress 網站上啟用了用戶註冊，人們可以使用一鍵式 Google 登錄立即註冊。

如果您想將 Google 登錄按鈕放在您網站的其他位置，您可以使用簡碼。 您可以前往 Nextend 的“使用”選項卡了解更多信息。

包起來

將一鍵式 Google 登錄集成到您的 WordPress 網站可以節省用戶的時間並提高轉化率。 這對於需要用戶登錄的網站特別有用，例如多作者網站、會員網站和銷售在線課程的網站。 要啟用此功能，您需要下載並安裝 Nextend Social Login and Registration 插件，並按照本教程中概述的步驟創建 Google 應用程序。 借助一鍵式 Google 登錄功能，用戶可以使用其 Google 帳戶快速登錄，而無需每次都輸入登錄詳細信息。