WordPress相關工具

FaceBook 登入 / 註冊網站會員功能 – 詳細設定步驟教學

內容目錄

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – FaceBook 登入 / 註冊 網站會員功能 – 詳細設定步驟教學，在這個網路科技發達的年代，筆者相信你與我都一樣擁有非常多組登入帳號密碼，先不談購物網站所申請的會員，光是社群軟體的登入帳號密碼就非常之多，很多時候我們實在很難確實記得每一組帳號密碼設定的數值，尤其是有些網站會對密碼的格式有所要求，比如必須包含大寫字母，要有特殊符號，或者必須達到多少字數，而帳號更是每一家做法都不同，身分證、手機號碼、ID、電子信箱…這些帳號搭配密碼的組合光是想起來就頭大，更遑論每一組都能清楚記得。
既然身為消費者的我們在這一部分會感到麻煩，那麼身為網站管理者或電商站長的你，有什麽辦法可以加快會員註冊/登入流程呢？在這篇教學中就是要教大家如何透過在 FaceBook 申請應用程式為網站加入快速 FaceBook 註冊及登入網站的方法，如果說網站已經有 FaceBook 快速登入的功能，請回到網站測試登入功能是否正常，因為 FaceBook 在 2018 年 3 月19 日針對登入安全性做了重大更新，內容可以參考這一篇：https://developers.facebook.com/blog/post/2017/12/18/strict-uri-matching/，如果說網站中控制社交登入帳號的外掛沒有更新，也沒有提供 OAuth重新轉址的網址，那麼使用者在社交帳號登入網站時就會被轉到以下畫面：

因此無論是新申請或者已有 FaceBook 帳號，都必須要重新檢視 FaceBook 社交登入功能，接下來進入正題，開始 FaceBook 的申請流程。
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統做步驟示範！)

FaceBook 開發者應用程式網站 ( facebook for developers )
https://developers.facebook.com/
WooCommerce Social Login
外掛介紹與購買
https://woocommerce.com/products/woocommerce-social-login/

如何在FaceBook申請應用程式

第一步：透過上方提供的網址入到 FaceBook 開發人員網站，進入後點選右上角我的應用程式，並在下拉選單中點擊查看全部應用程式。

第二步：進入後在下圖標示 1 的位置點擊新增應用程式，會跳出 2 的視窗，顯示名稱可以定義為網站或公司的名稱，聯絡電子郵件填入網站管理員的即可，接者點選標示 3 的建立應用程式編號。期間會有安全驗證的部分，直接點選並提交即可。

第三步：建立應用程式編號後會跳轉到以下畫面，在 FaceBook 登入 的產品中點選設定。

不要點選快速入門項目，請在左方選單部分直接點擊基本資料。

第四步：進入後會看到下圖中的欄位，基本上就是網站要設定的資料，以下介紹：

1. 應用程式網域：如果你的網址是 www.abc.com，那麼這個欄位就是輸入 abc.com，abc的部分要替換成你網址的名稱，如果說網址是 www.abc.def.com (具有子網域名稱)，則是要輸入 abc.def.com ，比如說鵠學苑的網址是 https://www.design-hu.com.tw/，就是輸入 blog.design-hu.com ，鵠崙設計的網址是 https://www.design-hu.com/，應用程式網域就是輸入 design-hu.com。( 網址規則詳細介紹：什麼是 URL 網址 IP ？網域 Domain 中文意思是什麼？ )
2. 隱私政策網址：貼上隱私政策頁面網址( 此欄位為必填，如果不知道如何建立，請參考這篇文章：WordPress更新網站隱私權政策 – 快速了解隱私政策升級內容 )。
3. 服務條款網址：貼上服務條款頁面網址。
4. 應用程式圖示：在帳戶應用程式清單中作為快速識別使用，可不上傳不會影響 FaceBook 登入功能。
5. 選擇類別：在該項目的下拉選單中選擇符合網站內容的類別，可見圖二。
6. 商業用途：如果適用於自己網站，請選擇支持我自己的企業商家，如果是代為申請則選擇為其他企業商提供服務。

下圖就是筆者示範資料填寫完畢的畫面，可作參考。

第五步：資料保護長這一塊的欄位如果說貴公司有設置，就可以填寫，如果說沒有，就填入公司負責人資料即可，此一欄位是因應今年歐盟 GDRP 法規正式發布執行所設置的，想了解什麽是資料保護長，可以參考這篇文章：GDPR 歐盟個人資料保護法規發佈，網站必須建立隱私政策！。

在資料保護長表格的下方有新增平台的按鈕。

點選後再跳出的提示框中選擇網站。

接者在下圖的欄位中輸入要使用應用程式的網站網址，不要忘記將畫面滾動到最下方點擊儲存變更的藍色按鈕，這些設定才會生效。

第六步：基本資料設定完成後，同樣在左方選單中找到產品的項目，選擇 Facebook → 設定。

其他設定無需變更，只要在下圖紅色方框標示的 有效的 OAuth 重新導向 URI 這個欄位做設定。

這個欄位的資料必須要注意了，使用不同的外掛有不一樣的網址寫法，筆者以比較常用於電商網站設定社交登入的外掛 — WooCommerce Social Login 來做示範，其規則是 ” https://網站網址?wc-api=auth&done=facebook”，將你的網站網址帶入後貼上欄位，點選儲存變更即可。

第七步：回到基本資料的頁面，還記得上方有應用程式編號及應用程式密鑰這兩個欄位嗎？裡面的數值是要輸入到網站控制社交登入的外掛中以啟用並驗證 FaceBook 登入註冊功能。為防止遭旁人盜用竊取應用程式使用，在應用程式密鑰的部分預設是隱藏的，如下圖中點選顯示按鈕，會要求再次輸入 FaceBook 的登入密碼，輸入完成後就會完整顯示應用程式密鑰的內容。

在取得完整的驗證資料後，不要忘記在右上角的狀態開關要打開，再打開後會跳出視窗詢問是否公開應用程式，點選是即可。開啟後按鈕會顯示為綠色，如此到這一步驟就完成 FaceBook 登入網站會員的設定。

在網站內啟用FaceBook快速登入會員( 使用 WooCommerce Social Login 作為網站社群登入外掛者適用於本小節教學)

第一步：進入到網站控制台，左方功能列點選 Woocommerce 中子選單的設定項目。

第二步：在設定畫面上方的頁籤選擇社群登入。

第三步：在供應商的區塊找到 FaceBook 項目，點選設定。

第四步：進入後分別在 App ID 欄位填入應用程式編號數值，App Secret 欄位填入應用程式密鑰，點擊儲存修改就完成設定了。

第五步：下圖就是筆者設定完成後的畫面，點選 Login with FaceBook 按鈕就會指向到 FaceBook 登入畫面，表示設定成功。

結語：

OAuth 這個欄位所填入的網址是 FaceBook 登入是否能正常運作的重點，具體來說就是 FaceBook 因為資訊安全問題，在 2018年 3月改版後，透過 FaceBook 登入的網址設定重新定向模式有所改變，從以往只要在 OAuth 欄位中輸入網站首頁網址，就可以啟用 FaceBook 登入的功能，而現在必須要先行檢視網站使用的社群登入外掛其重新導向 FaceBook 登入應用程式時，使用的語法及網址結構，才能夠在進入 FaceBook 登入網站時符合 FaceBook 對網址及網域的最新安全性規範，看起來有點饒舌，簡單來說就是要根據不同的 WordPress 社群登入外掛，來填入 OAuth 的重定向網址。在之後的教學文章鵠學苑會陸續推出有關社群登入的 WordPress 外掛教學，屆時會將詳細的設定方法跟大家分享，因此請不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來鵠學院就對了！我們下次的教學見～