[MVC4] 整合Facebook驗證

  • 3746
  • 0
  • MVC
  • 2015-03-13

[MVC4] 整合Facebook驗證

這邊要來使用MVC網站整合Facebook的驗證,主要進行的步驟如下:

1. 要把一個Facebook帳號註冊成為開發者帳號。

2. 在Facebook裡面建立一個新的應用程式。

3. 在Windows Azure上面建立一個Web Site,並且把Windows Azure網址複製到Facebook 應用程式。

4. 新建一個MVC的網際網路應用程式,設定它支援Facebook驗證後,發佈上Windows Azure。

 

1. 註冊一個FB帳號為開發者

1.1 首先當然必須先要有一個Facebook帳號。

接著就是去把原本的Facebook帳號註冊成一個開發者帳號,可以到下列此網站去註冊成為開發者。

https://developers.facebook.com/

clip_image001

 

1.2 填寫完相關的資料,就可以註冊成為開發者。

clip_image002

clip_image003

clip_image004

 

2. 建立一個新的應用程式

2.1建立一個新的應用程式。

clip_image005

 

2.2填寫這個應用程式(Display)名稱。

clip_image007

 

2.3 建立完畢,可以看到應用程式編號以及應用程式密鑰,這兩個資訊先Copy起來,待會在MVC專案裡面會使用到。

clip_image009

 

3. Windows Azure上面建立一個Web Site

3.1 建立Windows Azure站台,因為稍後要建立的MVC專案會用到登入驗證的動作,所以稍後Windows Azure站台建立的時候會用到資料庫建立。

clip_image011

 

3.2 Url的部分,我把站台命名為AuthFB,接著建立一個免費的20MB的資料庫。

在資料庫的連線字串部分,就使用預設的字串。

clip_image012

 

3.3站台建立完成後,把發佈設定下載回來。

clip_image014

 

 

3.4 接著在把Windows Azure 網址Copy到Facebook應用程式。

在Facebook應用程式的[設定]區域去新增一個平台。

clip_image016

 

接著新增一個網站,把網址複製貼到[網站URL]區域。

clip_image018

clip_image020

 

4. 建立支援Facebook驗證的MVC專案

4.1建立.Net MVC 專案,這邊選擇[網際網路應用程式]。

clip_image021

 

4.2 在專案路徑下的App_Start資料夾下的AuthConfig.cs檔案下。

取消下方程式的註解,然後把Facebook應用程式ID與應用程式密鑰輸入到下方程式去。

OAuthWebSecurity.RegisterFacebookClient(

appId: "",

appSecret: "");

 

4.3接著發行這一個專案到Windows Azure上面去。

選擇專案[發行]。

clip_image022

 

在發行頁面把剛剛從Windows Azure下載下來的發行設定檔匯入。

clip_image023

 

4.4 最後就把這個MVC網站發佈到Windows Azure。 到登入頁面的時候,會看到多了一個Facebook登入選項。

clip_image025

 

按下登入鈕,會被導向到Facebook登入頁面。這時登入了FacebooK,也就會順便登入MVC網站。

clip_image027

 

5. Facebook應用程式的沙箱模式(Sandbox)

在這個MVC網站只能使用開發者帳號才可以登入,如果要使用其他的Facebook帳號登入的時候會發現無法登入到MVC網站。

5.1 如果要使用其他的Facebook帳號去登入,必須要關閉沙盒模式(Sandbox)。在來到Facebook的應用程式設定網頁,選Status & Review。把[Do you want to make this app all its live features available to the generl public?] 開啟。

clip_image029

clip_image030

 

5.2 接下來就可以嘗試用不一樣的Facebook帳號去登入了。

clip_image031

 

登入Facebook時,會連帶把你註冊到這個MVC網站的資料庫,你可以在這邊修改使用者顯示名稱。

clip_image033

 

登入完成可以看到左上角,登入使用者顯示為班浩呆。

clip_image035

 

 

5.3 使用SQL Server管理介面來連到剛剛在Windows Azure上面建立的資料庫,可以看到除了管理者帳號外,也多了一筆班浩呆的註冊帳號。

clip_image036

 

參考網站資訊:

http://blogs.msdn.com/b/webdev/archive/2012/08/15/oauth-openid-support-for-webforms-mvc-and-webpages.aspx