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攻略嗎??來 鵠學院 就對了!我們下次的教學見~

架站相關文章:

網站架設知識推薦閱讀:

WordPress 介紹 – 全球市佔率達三成,遠超其他CMS管理系統
免費網頁空間 架站平台比較 – WordPress,Wix,Weebly,Blogger
WordPress 市佔率再創新高,2019 年成長至 33.4%!

Share
Published by
鵠學苑