1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. PHP
  6. »
  7. [教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)

[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)

2019/11/29

梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
  最近有朋友問到怎麼利用Facebook的帳號,作為網站的會員登入系統,但說真的為了個資問題,因此即便使用Facebook作為網站的登入系統時,只能抓到姓名、Email,剩下資訊還是得手動補上,而唯一最大的好處就是,使用者不用再註冊一組新的帳密。

  因此梅干就花了點時間研究一下,上網爬了一下文,沒想到竟然已有熱心的網友,已將Facebook串接完畢,因此只需去申請Facebook的開發程式,再輸入程式ID與金鑰後,立即就能使用,因此有需要的朋友,現在也一塊來看看。


Facebook登入申請
Facebook開發平台:https://developers.facebook.com/apps/
Facebook PHP SDK:GitHub網友串接好的

Step1
在進入Facebook應用程式開發平台後,點右上的「我的應用程式」再點下方的「建立應用程式」。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step2
接著輸入應用程式的名稱與Email。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step3
再選擇「Facebook登入」選項。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step4
接著選擇「網站」。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step5
再到產品設定的地方,輸入「有效的 OAuth 重新導向 URI」這邊得輸入真實環境,要執行Facebook登入的位置。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step6
完成後,再到「基本資料」的地方,輸入「隱私政策網址」,一樣的這頁面也需真實存在。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step7
都設定好後,再按右上的開關鈕。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step8
再選擇「切換模式」。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step9
當看到綠色燈號,表示該應用程式,已可正常運作。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step10
接著再到由網友已寫好的程式,進行下載。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step11
在下載完畢後,只需修改initialization.php中的24、25行,而這二個值,在步驟七的畫面中可取得。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step12
修改完畢後,再上傳到真實環境中,並開啟網頁,就會出現Facebook登入的畫面。
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)
Step13
點一下再允許授權後,就會可抓到基本的資訊,至於後續要如何再作運用,就看各位的設計囉!
梅問題-[教學] 網站整合Facebook帳號登入,設定與串接教學(PHP SDK)