如何在 WordPress 中添加使用 Google 一鍵登錄


您想將使用 Google 的一鍵登錄功能添加到您的 WordPress 網站嗎? 當您的使用者可以使用他們的 Google 帳戶登錄時,他們將不必為了訪問您的網站而創建、記住或跟蹤其他使用者名和密碼。 這有助於節省他們的時間並提高您的轉化率。 在本文中,我們將分享如何在 WordPress 中輕鬆添加一鍵式 Google 登錄。

為什麼要在 WordPress 中添加Google一鍵登錄?

許多互聯網使用者保持登錄到他們的Google帳戶。 這使他們可以快速訪問 Gmail、Drive 和 Docs 等 Google 應用程式,而無需為每個應用程式單獨登錄。

在您的 WordPress 登錄頁面上啟動一鍵式 Google 登錄后,您的使用者可以在您的網站上執行相同的操作。 他們可以通過使用Google帳戶快速登錄來節省時間。

這使他們不必每次都輸入登錄憑據。 如果您運行一個簡單的 WordPress 博客,那麼您可能不會發現此功能有用。 但是,如果您的組織使用Google Workspace作為專業的企業電子郵件地址,那麼您的團隊成員可以使用您組織的Google應用帳戶進行登錄。

此外,一鍵登錄功能(如按兩下 Google 登錄)對於任何需要使用者登錄的網站(如多作者網站、會員網站和銷售在線課程的網站)都非常有説明。 話雖如此,讓我們來看看如何輕鬆地將Google一鍵登錄添加到您的WordPress網站。 提示:要添加一鍵式 Google 登錄,您的網站需要具有安全的 SSL 加密。

如何在 WordPress 中添加一鍵式 Google 登錄

首先,您需要安裝並啟動 Nextend Social Login and Register 外掛程式。

還有一個付費版本的 Nextend Social Login,它為許多不同的網站添加了社交登錄,包括 PayPal、Slack 和 TikTok。 啟動后,您需要轉到 WordPress 管理區域中的設置 » Nextend 社交登錄。 在此螢幕上,您會看到可用的不同社交登錄選項。

添加社交登錄到您的 WordPress 網站

要將Google登錄添加到您的 WordPress 網站,您需要按下 Google 徽標下方的「入門」按鈕。 在這裡你會看到你的第一步是創建一個谷歌應用程式。 創建Google應用程式聽起來很技術性,但別擔心。

你不需要知道任何代碼,我們將引導您完成所有步驟。

創建Google應用程式

要创建此应用程序,您需要在 WordPress 仪表板和 Google Developers Console 之间切换。最好让您的 WordPress 仪表板在当前选项卡中保持打开状态,然后打开一个新的浏览器选项卡。现在您可以访问 Google Developers Console 网站。如果您尚未登录,系统会要求您使用您的 Google 帐户登录。接下来,您需要单击顶部菜单中的“选择项目”。它将打开一个弹出窗口,您可以在其中单击“新建项目”按钮继续。

這會打開新的項目頁面。 您將需要新增項目名稱並選擇位置。 專案名稱可以是您喜歡的任何名稱,例如“Google 登錄”。 如果您使用Google Workspace 帳戶登錄,則該位置將自動填寫您的組織名稱。 如果沒有,那麼您應該將其保留為“無組織”。

為專案命名和位置

接下來,點擊「創建」按鈕繼續。 您現在將被重定向到“API 和服務”儀錶板。 在此頁面上,您需要按兩下左側選單中的“OAuth 同意螢幕”。

這裡選擇使用者類型您允許登錄。 如果只有擁有您組織的 Google 帳戶的使用者才能登錄,請選擇“內部”。 或者,如果您的使用者的電子郵件位址不在您的組織範圍內,您應該選擇“外部”。 例如,擁有@gmail.com 帳戶的任何人與@yourcompanyemail.com 位址。 當您準備好繼續時,按兩下創建按鈕。 現在您可以開始添加有關您的應用程式的資訊。

添加有關您的 Google 應用程式的資訊

首先,您應該在應用程式中輸入您的公司名稱名稱欄位。 這將在登錄時向用戶顯示,例如“Smith Training Services 想要訪問您的 Google 帳戶”。 您還需要添加用於登錄 Google 的電子郵件位址。 這將允許您的使用者詢問有關Google登錄螢幕的問題。

提示:我們建議您不要為您的應用上傳徽標。 如果您這樣做,那麼您的應用將需要通過Google信任與安全團隊的驗證流程。 這個過程很長,可能需要 4-6 周。 完成後,向下滾動到“應用程式域”部分。 在這裡您需要添加指向您網站主頁、隱私政策頁面和服務條款頁面的連結。

添加指向這些重要網站頁面的連結

然後你需要點擊「添加域」 ‘ 按鈕添加您網站的功能變數名稱,例如“example.com”。 如果您想將一鍵式 Google 登錄添加到多個網站,則可以按下「+ 新增域」按鈕添加另一個域。

最後,你需要添加一個或多個電子郵件位址,以便 Google 可以通知您專案的任何更改。

完成後,請確保按下「保存並繼續」 按鈕。

接下來,您將進入範圍和測試用戶頁面。 對於這兩個頁面,只需滾動到底部並按下「保存並繼續」按鈕即可。

此步驟的最後一頁將向您顯示 OAuth 同意螢幕設置的摘要。 下一項工作是創建您的外掛程式連接 Google Cloud 所需的密鑰。 您應該單擊左側功能表中的「憑據」,然後按下屏幕頂部的「+ 創建憑據」 按鈕。

您需要選擇“OAuth 用戶端 ID”選項。 這會帶你到 『創建 OAuth 用戶端 ID 頁面。 您應該從「應用程式類型」下拉清單中選擇「Web 應用程式」。

應用類型選擇Web應用

一些設置將添加到頁面。 您需要向下滾動到“授權重定向 URI”部分,然後按兩下“+ 添加 URI”按鈕。

現在您應該輸入此 URL:HTTP://example.com/wp-login.php?loginSocial=google 確保將 example.com 替換為您自己網站的位址。

在授權重定向 URI 下粘貼此 URL

一旦你這樣做了,你應該按兩下「創建」按鈕以存儲設置。 設置可能需要五分鐘到幾小時才能生效。 您的 OAuth 用戶端現已創建! 您將看到一個包含「您的客戶 ID」 和您的客戶密碼的彈出視窗。

您需要將這些金鑰粘貼到 WordPress 管理區域的外掛程式設定頁面中。 您只需按下右側的「複製」圖示即可一次複製一個金鑰。

將你的GOOGLE key 添加到你的外掛程式中

現在,只需切換回您網站的瀏覽器選項卡,然後按兩下設置 » 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登錄。 但是,如果他們願意,他們仍然可以使用標準的 WordPress 使用者名和密碼登錄。

請記住,使用者只能使用他們擁有的 Google 帳戶地址登錄在您的網站上使用。 此外,如果您允許使用者在您的 WordPress 網站上註冊,那麼使用者可以使用一鍵式 Google 登錄快速在您的網站上註冊。 如果您希望在網站的其他任何位置添加Google登錄按鈕,則可以使用簡碼。 您可以通過按下 Nextend 的「使用」 選項卡瞭解更多資訊。

分享你的喜愛

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *