登入功能是現在網站很常見的,因為使用者可以免去記憶各式各樣的帳號密碼,也是現代人很能接受的登入方式,一方面是記得帳密少,也可以更無痛的進入購買或結帳的步驟,增加網站黏著度!
如果你同時有登入跟分享的需求,可以使用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
- 登入Google API Console
- 新增會員同意使用
- 建立新專案:填寫專案名稱,並建立
- 點漢堡選單,進入OAuth同意畫面
- 點OAuth同意畫面,進入畫面點選External,點擊建立
- 應用程序名稱:可以輸入所需的任何名稱,但建議在中輸入網站或公司名稱
- 應用程序標誌:可上傳logo。(注意:需要通過Google)
- 支援電子郵件:輸入電子郵件
- 授權域:指定您的網站域。例如:您的網站主頁URL是www.mywebsite.com或mywebsite.com,則必須保存mywebsite.com。
- 進入憑證按「建立憑證」,並點擊「OAuth客戶端ID」
- 接著進入畫面填資料(以下內容我沒截圖到直接引用官方說明,照著做就沒問題了!):
- 應用程序類型: 選擇Web應用程序
- 名稱: 指定應用程序的名稱(網站或公司名稱或其他)
- 授權的JavaScript來源:留空
- 授權的重定向URI:在瀏覽器中打開您的網站主頁(已安裝插件),單擊地址欄,以使網站URL突出顯示,複製此URL並將其貼到此選項中。請確保該URL包含
http://
或https://
(例如:http : //mywebsite.com
或http://www.mywebsite.com
)。此網址中不應包含斜線。輸入網址後,按Enter鍵,否則將不會保存。
- 複製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/
- 登入:如果您尚未登錄,請至「 https://developers.facebook.com/ 」並登錄到您的Facebook帳戶。
- 點擊 My Apps,建立應用程式,然後設定ID並創建
- Facebook 登入設定
- 點擊設定平台,複製URL並將其貼到選項中
- 複製App ID和App Secret ,並將它們貼到外掛設置的Facebook App ID和Facebook App Secret中,就大功告成了~
=啟用Yahook登錄的步驟=
- 註冊一個 Yahoo 帳戶
- 使用 Yahoo 帳戶, 建立一個應用程序。
- 填寫資料,如下圖,填寫完成後即可
- 將資料複製下來後貼上後台
其實還有許多不同的第三方登入,各位朋友都可以去申請玩看看,這樣可以讓你的網站使用黏著度提升喔~
=啟用Line登錄的步驟=
- 先到Line Developer Portal,並通過 Line 帳戶登錄。如果您沒有 Line 帳戶,需要先註冊一個。
- 單擊Providers 部分前面的Create按鈕 。
3.在Provider name 中設定網站的名稱。
- 建立 LINE Login Channel
- 開始資料設定:
- 設定名稱
- 選擇區域
- 上傳圖片
- 設定公司/網站的名稱
- 設定公司/網站的描述
- 應用程序類型中選擇Web
- 電子郵件地址
- 同意 Line 開發者協議。
- 點擊
開發
,然後發布
- 如果你的網站首頁的 URL 是
https://mywebsite.com
,你需要填上https://mywebsite.com/SuperSocializerAuth/Line作為callback URL ,點擊更新 - 複製
ID
和密碼
,並將它們分別貼到外掛中社交登錄部分的LINEID
和密碼
選項中。
小結
申請第三方登入的過程可能稍微繁瑣,但完成後能顯著提升網站使用體驗。若你有多種登入需求,推薦選擇功能整合性高的外掛如 Super Socializer,一次滿足網站需求!
如需更詳細的說明,請參考官方教學:Super Socializer 文件。