Nextend Social Login 是什麼 ?

  • 一款容易操作免費的 plugin
  • 節省使用者寶貴的時間去填寫會員註冊資料
  • Facebook、Google、Twitter 等多種社群帳號快速登入

你會需要先瞭解 OAuth2.0

開放授權(OAuth)是一個開放標準,允許用戶讓第三方應用存取該用戶在某一網站上儲存的私密的資源(如相片,影片,聯絡人列表),而無需將用戶名稱和密碼提供給第三方應用。

若想瞭解 Google OAuth2.0,此為參考資料


當我們要使用個人網站 ( 我瘋網站 ) 存取 Google API 時

  1. 獲得使用者的同意授權,Google Server 會回傳授權碼給我瘋網站
  2. 我瘋網站將授權碼、申請的憑證與 Google Server 交換存取憑證(Token)
  3. 我瘋網站用存取憑證(Token)向 Google API 存取經過使用者授權的資訊 ( 姓名、Email、大頭照等資訊 )

由於此外掛已實作驗證方式,因此我們僅須操作以下項目 :

  1. 設定 OAuth 同意畫面
  2. 向 Google 申請一組用戶端憑證
  3. 將用戶端憑證 ID、Secret 填寫至 Nextend Social Login 外掛當中

安裝及設定方式

1. 搜尋並安裝此外掛 Nextend Social Login and Register

2. 下載完畢後,即看到所有可串接的登入方式,本篇以 Google 登入為例,點選「Getting Strated」

  • 進入後,會發現已提供相當完整的操作流程及影片,若懶得看那就跟著我瘋一起完成吧 !

3. 連結至 GoogleAPIs , 登入後並「新增專案」,填寫【專案名稱】,點選「建立」

4. 新增完成後,至 「OAuth 同意畫面」,選擇「外部」,並「建立」

5. 輸入【應用程式名稱】以及【已授權網域】,填寫完成後並「儲存」

  • 設定 OAuth 同意畫面是因為網域必須被設定到授權網域清單,才可以使用該憑證。
  • 注意 : 網域需填寫頂級網域 !
    舉例 : 本篇測試網址為子網域 blog.wowfuncode.com,頂級網域則為 wowfuncode.com。

6. 點選側欄「憑證」>「建立憑證」>「OAuth 用戶端 ID」

此 OAuth 用戶端 ID 憑證,主要是為了讓 Google 識別我瘋網站,以便取得 Token。

7. 填寫【應用程式類型】為「網頁應用程式」,以及填寫「已授權的重新導向 URI」

[已授權的重新導向 URI ] 是當使用者確定登入授權後,Google 會將用於取得 Token 的資料(授權碼、用戶端憑證) 附帶在 URL 的後面,接著將資料丟給後端程式去跟 Google 換取授權資料的 Token

  • 至 WordPress 後台,複製 URI 並貼上

8. 成功後,複製產生出來的用戶端 ID 及 密碼

9. 至 WordPress 後台點選 「I am done setting up my Google App」,並貼上剛剛複製的 ID 及密碼,儲存設定

10. 儲存後,點選 Verify Settings 進行驗證,驗證成功則會顯示「The test was successful!」,並點選「Enable」

11. 最後一步,到自己的登入頁面測試 Google 登入是否成功啦 !