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

如何申請第三方社群登入

【WordPress教學】如何申請第三方社群登入?(google & FB)登入功能是現在網站很常見的,因為使用者可以免去記憶各式各樣的帳號密碼,也是現代人很能接受的登入方式,一方面是記得帳密少,也可以更無痛的進入購買或結帳的步驟,增加網站黏著度!

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

1-安裝並啟用

Social Share, Social Login and Social Comments Plugin – Super Socializer

Image for post

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

=啟用Google登錄的步驟=

Google Client ID and Google Client Secret
教學參考:http://support.heateor.com/how-to-get-google-plus-client-id/

1.登入 Google API Console
2.新增會員同意使用

Image for post

3.建立新專案:填寫專案名稱,並建立

Image for post

4.點漢堡選單,進入OAuth同意畫面

Image for post

5.點OAuth同意畫面,進入畫面點選External,點擊建立

Image for post

6.應用程序名稱:可以輸入所需的任何名稱,但建議在中輸入網站或公司名稱
7. 應用程序標誌:可上傳logo。(注意:需要通過Google)
8. 支援電子郵件:輸入電子郵件

Image for post

9. 授權域:指定您的網站域。例如:您的網站主頁URL是www.mywebsite.com或mywebsite.com,則必須保存mywebsite.com。

Image for post

10. 進入憑證按「建立憑證」,並點擊「OAuth客戶端ID」

Image for post

11.接著進入畫面填資料(以下內容我沒截圖到直接引用官方說明,照著做就沒問題了!):
* 應用程序類型: 選擇Web應用程序
* 名稱: 指定應用程序的名稱(網站或公司名稱或其他)
* 授權的JavaScript來源:留空
* 授權的重定向URI:在瀏覽器中打開您的網站主頁(已安裝插件),單擊地址欄,以使網站URL突出顯示,複製此URL並將其貼到此選項中。請確保該URL包含 http:// 或https:// (例如: http : //mywebsite.com 或 
http://www.mywebsite.com)。此網址中不應包含斜線。輸入網址後,按Enter鍵,否則將不會保存。

12.複製Client ID 和 Client Secret,將它們分別貼到套件的 Google Client ID 和 Google Client Secret 中,就大功告成了!!!!

Image for post

=啟用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並創建

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2020 12 16 %E4%B8%8B%E5%8D%884.20.58

3.Facebook 登入設定

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2020 12 16 %E4%B8%8B%E5%8D%884.22.07

4. 點擊設定平台,複製URL並將其貼到選項中

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2020 12 16 %E4%B8%8B%E5%8D%884.22.14

5. 複製App IDApp Secret ,並將它們貼到外掛設置的Facebook App IDFacebook App Secret中,就大功告成了~

 

=啟用Yahook登錄的步驟=

1.  註冊一個 Yahoo 帳戶 

2.使用 Yahoo 帳戶, 建立一個應用程序

3.填寫資料,如下圖,填寫完成後即可

 

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 02 %E4%B8%8B%E5%8D%883.02.41 %E6%8B%B7%E8%B2%9D

4. 將資料複製下來後貼上後台

 

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

=啟用Line登錄的步驟=

1. 先到Line Developer Portal,並通過 Line 帳戶登錄。如果您沒有 Line 帳戶,需要先註冊一個。

2.單擊Providers 部分前面的Create按鈕 。

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.26.29

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

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.26.37

4.建立 LINE Login Channel

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.26.58 1

5. 開始資料設定:

  • 設定名稱
  • 選擇區域
  • 上傳圖片
  • 設定公司/網站的名稱
  • 設定公司/網站的描述
  • 應用程序類型中選擇Web
  • 電子郵件地址
  • 同意 Line 開發者協議。
%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.29.28
%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.29.35

6.點擊“開發” ,然後發布

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.30.29
%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.43.20

7.如果你的網站首頁的 URL 是https://mywebsite.com,你需要填上https://mywebsite.com/SuperSocializerAuth/Line作為callback URL ,點擊更新

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.31.44

8.複製ID密碼,並將它們分別貼到外掛中社交登錄部分的LINE ID密碼選項中。

%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7 2021 07 07 %E4%B8%8A%E5%8D%8811.32.23

You Might Also Like