[技術探討]網站的會員資料結合Facebook帳號之實作練習

網站的會員資料結合Facebook帳號之實作練習

如果一個網站想要吸引使用者註冊使用時,若無足夠的吸引力,很難說服使用者填了一堆個人資料,還要經過重重驗證才能啟用網站的功能,怕麻煩的使用者可能就這樣放棄此網站;又或者是密碼太多難以記憶,久未使用的網站可能偶爾想起來,卻因為忘記密碼甚至連帳號都忘記,也無法再繼續使用。

但一般人幾乎都在社交網站上擁有註冊帳號,而且天天使用,如果網站的會員資料可以與社交網站的帳號結合,可以大幅提高網站會員的註冊數量與使用頻率。社交網站如Facebook、Google、Twitter等均有使用OAuth2的協定提供App與網站可以使用其帳號驗證,甚至進一步存取個人的授權資料,ASP.NET Identity則有實作OAuth2,讓開發者可以方便的完成與社交網站結合的工作。網路上已有許多相關的文章進行介紹,但已有一段時日,與現況有所出入,故有此篇文章的產生。

首先網站管理者得到https://developers.facebook.com/apps註冊網站的Url,取得一組專屬的AppId與AppSecret。

接著使用Vistual Studio 2013新增ASP.NET Web應用程式的專案,如下圖

接著使用Vistual Studio 2013新增ASP.NET Web應用程式的專案

按下「變更驗證」的按鈕,選擇「個別使用者帳戶」以及「網站」

按下「變更驗證」的按鈕,選擇「個別使用者帳戶」以及「網站」

按下「變更驗證」的按鈕,選擇「個別使用者帳戶」以及「網站」

完成新增專案後,可看到一個有基本登入登出功能的網站已完成,此時尚未完成與Facebook結合的功能。接著開啟App_Start\Startup.Auth.cs,編輯ConfigureAuth Method如下圖,並將申請到的AppId與AppSecret填入。

完成新增專案後,可看到一個有基本登入登出功能的網站已完成

編譯後執行,即可看到Facebook的登入按鈕了

編譯後執行

 

但僅是如此,只抓的到在Facebook的顯示名稱。故還需要調整程式,才能讀取到在Facebook登記的Email。一樣是修改ConfigureAuth Method,將剛剛調整的程式碼註解掉,換成下列程式。

將剛剛調整的程式碼註解掉,換成下列程式

重點在此段程式的Scope.Add(“email”),重新執行網站後,即可看到註冊資料自動帶出Facebook登記的Email,讓使用者能快速方便的完成註冊程序。

重新執行網站後

接下來原本要實作帶出使用者在Facebook的好友清單,讓使用者可挑選好友並邀請他一起使用此網站,但發現怎麼抓到的好友資料都是空的,於是在https://developers.facebook.com/docs/apps/faq找到了解答:新的API只允許取出使用相同App的好友名單,不允許取出完整的好友名單。

新的API說明

那要怎麼邀請好友呢?

新的API說明

依據官方文件,使用Send Dialog的方式,也就是在網站上放一個連結讓使用者導頁至下列路徑:http://www.facebook.com/dialog/send?app_id=[AppId]&link=http://[您的網站]&redirect_uri=http://[完成要求後要回到哪個Url] ,使用者即可看到類似下列的畫面來邀請好友。

依據官方文件,使用Send Dialog的方式

好友收到的訊息內容如下

好友收到的訊息內容如下

但App似乎要通過某個設定,好友收到的訊息內容才能正常顯示,目前自行申請的App得到的畫面如下,故還要再找解決方式。

但App似乎要通過某個設定,好友收到的訊息內容才能正常顯示

補充說明:

開發期需要進行重複的測試,故除了將網站註冊的使用者刪除外,還須至Facebook的應用程式區將App移除,步驟如下:登入Facebook,右上角的下拉箭頭有個設定。

補充說明

進入設定頁面後,點選應用程式,再選擇註冊的App做移除即可。

補充說明

參考文章:

1.http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

2.http://blogs.msdn.com/b/webdev/archive/2013/10/16/get-more-information-from-social-providers-used-in-the-vs-2013-project-templates.aspx

 


發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料