【WordPress教學】如何申請第三方社群登入?(google 、 FB、yahoo、Line)

【WordPress教學】如何申請第三方社群登入?(google 、 FB、yahoo、Line)

Sandra / 2021-4-24

登入功能是現在網站很常見的,因為使用者可以免去記憶各式各樣的帳號密碼,也是現代人很能接受的登入方式,一方面是記得帳密少,也可以更無痛的進入購買或結帳的步驟,增加網站黏著度!

如果你同時有登入跟分享的需求,可以使用Super Socializer,因為它包含許多功能,之前也提過外掛下載越多,只會越耗效能,所以如果一個套件可以達到你許多需求,就不用下載三個來讓你網站變慢。


外掛安裝與啟用

Social Share, Social Login and Social Comments Plugin – Super Socializer Social Share, Social Login and Social Comments Plugin – Super Socializer 通常就是使用Facebook登入或是Google登入,不過要先到自己的粉絲團或是Google帳戶做申請,在套件裡填入申請的ID就可以完成綁定了!申請的步驟比較複雜要去原網站做,所以下面有貼申請教學,大家也可以依照步驟自己試試看~(後來又增加了yahoo的教學示範,有需要的也可參考喔~)

=啟用Google登錄的步驟=

教學參考:Google Client ID and Google Client Secret

  1. 登入Google API Console
  2. 新增會員同意使用
  3. 建立新專案:填寫專案名稱,並建立
  4. 點漢堡選單,進入OAuth同意畫面
  5. 點OAuth同意畫面,進入畫面點選External,點擊建立
  6. 應用程序名稱:可以輸入所需的任何名稱,但建議在中輸入網站或公司名稱
  7. 應用程序標誌:可上傳logo。(注意:需要通過Google)
  8. 支援電子郵件:輸入電子郵件
  9. 授權域:指定您的網站域。例如:您的網站主頁URL是www.mywebsite.com或mywebsite.com,則必須保存mywebsite.com。
  10. 進入憑證按「建立憑證」,並點擊「OAuth客戶端ID」
  11. 接著進入畫面填資料(以下內容我沒截圖到直接引用官方說明,照著做就沒問題了!):
  • 應用程序類型: 選擇Web應用程序
  • 名稱: 指定應用程序的名稱(網站或公司名稱或其他)
  • 授權的JavaScript來源:留空
  • 授權的重定向URI:在瀏覽器中打開您的網站主頁(已安裝插件),單擊地址欄,以使網站URL突出顯示,複製此URL並將其貼到此選項中。請確保該URL包含 http://https:// (例如: http : //mywebsite.comhttp://www.mywebsite.com)。此網址中不應包含斜線。輸入網址後,按Enter鍵,否則將不會保存。
  1. 複製Client ID 和 Client Secret,將它們分別貼到套件的 Google Client ID 和 Google Client Secret 中,就大功告成了!!!!

=啟用Facebook登錄的步驟=

Facebook App ID 和 Facebook App Secret 教學參考:http://support.heateor.com/how-to-get-facebook-app-id/

  1. 登入:如果您尚未登錄,請至「 https://developers.facebook.com/ 」並登錄到您的Facebook帳戶。
  2. 點擊 My Apps,建立應用程式,然後設定ID並創建
  3. Facebook 登入設定
  4. 點擊設定平台,複製URL並將其貼到選項中
  5. 複製App IDApp Secret ,並將它們貼到外掛設置的Facebook App IDFacebook App Secret中,就大功告成了~

=啟用Yahook登錄的步驟=

  1. 註冊一個 Yahoo 帳戶
  2. 使用 Yahoo 帳戶, 建立一個應用程序
  3. 填寫資料,如下圖,填寫完成後即可
  4. 將資料複製下來後貼上後台

其實還有許多不同的第三方登入,各位朋友都可以去申請玩看看,這樣可以讓你的網站使用黏著度提升喔~

=啟用Line登錄的步驟=

  1. 先到Line Developer Portal,並通過 Line 帳戶登錄。如果您沒有 Line 帳戶,需要先註冊一個。
  2. 單擊Providers 部分前面的Create按鈕 。

3.在Provider name 中設定網站的名稱。

  1. 建立 LINE Login Channel
  2. 開始資料設定:
  • 設定名稱
  • 選擇區域
  • 上傳圖片
  • 設定公司/網站的名稱
  • 設定公司/網站的描述
  • 應用程序類型中選擇Web
  • 電子郵件地址
  • 同意 Line 開發者協議。

  1. 點擊開發 ,然後發布

  1. 如果你的網站首頁的 URL 是https://mywebsite.com,你需要填上https://mywebsite.com/SuperSocializerAuth/Line作為callback URL ,點擊更新
  2. 複製ID密碼,並將它們分別貼到外掛中社交登錄部分的LINE ID密碼選項中。

小結

申請第三方登入的過程可能稍微繁瑣,但完成後能顯著提升網站使用體驗。若你有多種登入需求,推薦選擇功能整合性高的外掛如 Super Socializer,一次滿足網站需求!

如需更詳細的說明,請參考官方教學:Super Socializer 文件

sandra avatarSandra