跳到主要內容

[Facebook][Javascript SDK] 整合Facebook登入

現今許多網站除了自身的登入機制外,也會整合第三方登入,例如:Google+、LinkedIn、QQ等等,增加使用者的便利性,同時也能省去註冊繁雜手續,大幅提升會員數量。今天我們要介紹的就是如何利用Facebook登入。


Step 1 建立應用程式

首先要到Facebook建立應用程式,這個應用程式要做甚麼呢?有了這個才能得到API Key跟Secret Key,是呼叫Facebook API的必要資訊。到 應用程式主控板 ,登入你的FB帳號並且註冊成開發人員。
註冊成為開發人員後,選擇要新增哪個平台的應用程式,我們選網站。
接著要求你輸入你網站的網址
輸入網址後,就會進入快速起步,簡單幾個步驟就能讓你體驗功能。
或者你要先略過也可以,就直接建立應用程式的名稱。類別為必填,否則無法進行下一步。








恭喜你,已經建好自己的應用程式囉! 主控版中能看到應用程式編號及程式密鑰,還能看到FB用戶在你網站的登入統計。

最後到 設定 > 基本資料中,設定你要連接的網址,如果只是本機測試,輸入你網站執行起來後的專案URL即可,例如:https://localhost:44302/。
*設定網址的步驟非常重要,如果沒有設定正確的網址,你的網站呼叫API會發生無法載入網址的錯誤,如下圖。*

 


Step 2 初始化 JavaScript SDK

Facebook 有不同的登入流程,此篇要介紹JavaScript SDK的方式,詳見:搭配 JavaScript SDK 的網頁版「Facebook 登入」,不管你是ASP.NET、PHP還是Java都適用。Facebook非常貼心,在文件當中就已經有完整的程式碼,基本上你把下面這段程式複製貼到你的Login.html的body中,並且將 {your-app-id} 修改成你應用程式中得到的應用程式編號,就能夠執行囉。

執行之後就能夠看到一顆FB的登入按鈕,按下去後就會開啟視窗請求你登入FB帳號並給予授權。
 

Step 3 取得用戶的基本資料、電子郵件或其他資訊

當你執行完上面那段範例程式,你會發現你只能得到用戶的ID跟姓名,那如何得到更多資訊呢? 非常簡單,只要在呼叫API那段程式碼中加上你想得到的欄位即可。
原本:
加上想要的資訊欄位:
而你又可以得到哪些資訊呢,可以參考:權限參考資料 – Facebook 登入

Step 4 將得到的用戶資訊存入資料庫

經過前三個步驟,你已經可以得到用戶給的授權以及用戶在FB的資料,就能夠好好利用並整合進網站本身的登入機制中了。

留言

這個網誌中的熱門文章

[Xamarin] Xamarin for Visual Studio 安裝

愛好C#,又想學APP,那你絕對不能錯過Xamarin,最熱門的跨平台裝置開發軟體,不管是Android、iOS、Windows Phone,通通只要用C#撰寫,可謂write once, run everywhere。 入門前當然要先安裝啦,2個步驟,輕鬆安裝。 Step 1  下載安裝檔 請到Xamarin官方網站下載:https://www.xamarin.com/download。根據「I already have Visual Studio installed」選擇的項目不同,會得到不同的安裝檔,若選擇「Yes」,會得到 Visual Studio Community 2015的安裝檔,若選擇「No」,則會得到XamarinInstaller Step 2 執行安裝檔—Visual Studio Community 2015的安裝檔 點按安裝檔執行,就會開始裝Android SDK、iOS SDK、Xamarin、Visual Studio等等,經過幾小時的漫長等待後,就能安裝成功。 Step 2 執行安裝檔—XamarinInstaller 你已經有Visual Studio,所以只需要安裝Android SDK、iOS SDK、Xamarin即可。但為了讓Xamarin可以裝在Visual Studio上,所以必須下載兩個工具: Microsoft Build Tools 2013 、 Microsoft Build Tools 2015 , 若缺少這兩個工具,Xamarin就無法安裝,接著跟安裝精靈一直Next,就能安裝成功。