網站FB第三方登入
【網站第三方登入】網頁申請Facebook登入認證設定教學｜天矽科技網頁設計
網頁會員第三方登入
在建設網站時，通常需要有會員功能的網站都會希望能夠加入「第三方登入」與「第三方加入會員」的功能，也就是希望自家網站能夠利用Facebook、LINE或Google等方式直接帶入會員資料進行申請或登入。
這種方式對使用者來說，不用再次填寫過多的資料也能註冊會員是一件很方便的事；對企業網站來說，也能提高使用者加入會員與留下資料的意願與速度，並降低客戶流失的機會。
那麼本篇要介紹的就是「如何申請Facebook的登入認證」？
▲CLA加入會員
為什麼要申請認證？
原因是為了確保資訊上的對接是沒有問題且安全的，所以我們就需要做資訊上的驗證與設定，並取得Facebook所提供的編號與密鑰，取得後再將資訊提供給工程師，才能正確地串接成功。
申請Facebook第三方登入
要取得Facebook的串接鑰匙，首先要有一個Facebook for Developers的帳號，當帳號建立好之後，就可以開始進入第三方登入的申請。
▲選擇Facebook登入
▲點選開始註冊
設定步驟流程
Step1. 進入FB APP申請
Step2. 建立應用程式
Step3. 輸入FB密碼
Step4. 選擇Facebook登入
Step5. 選擇網站
Step6. 輸入網址
Step7. 輸入FB登入
Step8. 輸入頁面資料
Step9. 應用程式模式設定成上線
Step10. 進階權限勾選
Step11. 重新導向URI
Step12. 提供天矽應用程式編號和應用程式密鑰
Step1. 進入FB APP申請
首先，先到以下網址建立一個新的Facebook App，點選右上方的綠色按鈕【建立應用程式】，點選【消費者】將消費者商品和權限連結到你的應用程式。
➤ 前往建立 Facebook App：https://developers.facebook.com/apps/
Step2. 建立應用程式
填寫應用程式顯示名稱。
聯絡電子郵件地址系統會自動帶入，不用另外填寫；而應用程式必須連結到商業帳號，才能存取特定權限或功能，所以要記得你的FB一定要有一個商用帳號才能繼續建立喔！
▲建立應用程式畫面
▲商業帳號
Step3. 輸入FB密碼
為了帳號安全，系統會要求你【重新輸入密碼】才能繼續。
Step4. 選擇Facebook登入
Step5. 選擇網站
因為我們現在要串接的是網站，所以請點選【網站】。
Step6. 輸入網站網址
Step7. 輸入FB登入
點選右方【Facebook登入】下方的【設定】，找到【有效的 OAuth 重新導向URI】這個欄位後，將下方網址複製並貼上。
➤ 複製此網址【https://oauth.mitbrick.com/fblogin/index.php】
Step8. 輸入頁面資料
貼上網址儲存變更後，回到右側選單找到【設定】中的基本資料，就會出現下方畫面，接著就請將資料輸入完畢。應用程式網域請填入【自家網域】以及【oauth.mitbrick.com】
Step9. 應用程式模式設定成上線
將上方的【應用程式模式】，從原本的開發中更改成【上線】。
Step10. 進階權限勾選
接著再回到右方的【應用程式審查】中的【權限和功能】，在這裡要記得要將【Email】和【public_profile】勾選，也就是要記得在動作欄位中，點選【取得進階存取權限】這個按鈕。
Step11. 重新導向URI
請在「有效的 OAuth 重新導向 URI」輸入以下
➤【 https://oauth.mitbrick.com/fblogin/index.php 】
Step12. 提供天矽應用程式編號和應用程式密鑰
上方都設定完成後，就可以回到右側選單中【設定】底下的【基本資料】，複製【應用程式編號】與【應用程式密鑰】提供給天矽工程師，由我們來完成後續的嵌入。
➤ 更多詳細的FB Login可參考官方文件：Meta for Developers
Facebook第三方登入案例分享
▲愛儷爾Facebook第三方登入
▲文訊雜誌社Facebook第三方登入
▲響藝Facebook第三方快速註冊會員
看更多：
➤ LINE第三方登入教學
➤ Google第三方登入教學
