天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

【網站第三方登入】網頁申請Facebook登入認證設定教學|天矽科技網頁設計

部落格:【網站第三方登入】網頁申請Facebook登入認證設定教學|天矽科技網頁設計

 

網站嵌入第三方登入工具,首先要先完成「驗證」,也就是要先至Facebook APP進行資料驗證與設定,完成後才能取得「應用程式編號」與「應用程式密鑰」,接著提供給工程師進行嵌入串接,如此才能確切的串接並連動到網站中。

網頁會員第三方登入

 

 在建設網站時,通常需要有會員功能的網站都會希望能夠加入「第三方登入」與「第三方加入會員」的功能,也就是希望自家網站能夠利用Facebook、LINE或Google等方式直接帶入會員資料進行申請或登入。

 這種方式對使用者來說,不用再次填寫過多的資料也能註冊會員是一件很方便的事;對企業網站來說,也能提高使用者加入會員與留下資料的意願與速度,並降低客戶流失的機會。

 那麼本篇要介紹的就是「如何申請Facebook的登入認證」?

FB第三方登入

▲CLA加入會員

 

為什麼要申請認證?

 原因是為了確保資訊上的對接是沒有問題且安全的,所以我們就需要做資訊上的驗證與設定,並取得Facebook所提供的編號密鑰,取得後再將資訊提供給工程師,才能正確地串接成功。

 

申請Facebook第三方登入

 

 要取得Facebook的串接鑰匙,首先要有一個Facebook for Developers的帳號,當帳號建立好之後,就可以開始進入第三方登入的申請。

建立FB for Developers

▲選擇Facebook登入

開始註冊FBDEVELOPERS

▲點選開始註冊

選擇你的角色

 

設定步驟流程
Step1. 進入FB APP申請
Step2. 建立應用程式
Step3. 輸入FB密碼
Step4. 選擇Facebook登入
Step5. 選擇網站
Step6. 輸入網址
Step7. 輸入FB登入
Step8. 輸入頁面資料
Step9. 應用程式模式設定成上線
Step10. 進階權限勾選
Step11. 提供天矽應用程式編號和應用程式密鑰

 

Step1. 進入FB APP申請

 首先,先到以下網址建立一個新的Facebook App,點選右上方的綠色按鈕【建立應用程式】,點選【消費者】將消費者商品和權限連結到你的應用程式。

前往建立 Facebook App:https://developers.facebook.com/apps/

選擇消費者

 

Step2. 建立應用程式

 填寫應用程式顯示名稱
 聯絡電子郵件地址系統會自動帶入,不用另外填寫;而應用程式必須連結到商業帳號,才能存取特定權限或功能,所以要記得你的FB一定要有一個商用帳號才能繼續建立喔!

建立應用程式

▲建立應用程式畫面

商業帳號

▲商業帳號

 

Step3. 輸入FB密碼

 為了帳號安全,系統會要求你【重新輸入密碼】才能繼續。

重新輸入密碼

 

Step4. 選擇Facebook登入

點選FB登入

 

Step5. 選擇網站

 因為我們現在要串接的是網站,所以請點選【網站】。

選擇網站

 

Step6. 輸入網站網址

輸入網站網址

 

Step7. 輸入FB登入

 點選右方【Facebook登入】下方的【設定】,找到【有效的 OAuth 重新導向URI】這個欄位後,將下方網址複製並貼上。

 複製此網址【https://oauth.mitbrick.com/fblogin/index.php

輸入FB登入

 

Step8. 輸入頁面資料

 貼上網址儲存變更後,回到右側選單找到【設定】中的基本資料,就會出現下方畫面,接著就請將資料輸入完畢。

輸入頁面資料

 

Step9. 應用程式模式設定成上線

 將上方的【應用程式模式】,從原本的開發中更改成【上線】。

開發中改成上線

 

Step10. 進階權限勾選

 接著再回到右方的【應用程式審查】中的【權限和功能】,在這裡要記得要將【Email】和【public_profile】勾選,也就是要記得在動作欄位中,點選【取得進階存取權限】這個按鈕。

權限功能

 

Step11. 提供天矽應用程式編號和應用程式密鑰

 上方都設定完成後,就可以回到右側選單中【設定】底下的【基本資料】,複製【應用程式編號】與【應用程式密鑰】提供給天矽工程師,由我們來完成後續的嵌入。

提供編號與密鑰

 

 更多詳細的FB Login可參考官方文件:Meta for Developers

 

Facebook第三方登入案例分享

 

愛儷爾Facebook第三方登入

愛儷爾Facebook第三方登入

 

文訊雜誌社Facebook第三方登入

文訊雜誌社Facebook第三方登入

 

響藝第三方快速註冊會員

響藝Facebook第三方快速註冊會員

 

看更多:
LINE第三方登入教學
Google第三方登入教學

 

回上一頁
信箱
客服
Line@