整合社交驗證及開發Facebook App – 使用ASP.NET及 Visual Studio 2013

Article
09/23/2013

整合社交驗證及開發Facebook App – 使用ASP.NET及 Visual Studio 2013

作者：陳傳興 (Bruce, 微軟最有價值專家)

註 – 本篇說明ASP.NET網站如何整合社群服務的帳號進行身份驗證，以及開發一個Facebook app的步驟，畫面及內容為使用 VS 2013 RC版本

整合社交驗證So Easy

在One ASP.NET的WebForm、MVC與Single Page Application三個範本中，除了使用內建的會員管理機制外，也可以非常方便的去啟用整合社交驗證的功能。

圖十六

我們可以點選「變更驗證」按鈕，以修改範本的驗證方式：

圖十七

預設都是使用「個別使用者帳戶」方式來進行驗證。

在新增WebForms、MVC或Single Page Application三個專案的App_Start目錄下可以找Startup.Auth.cs組態設定檔，在Startup.Auth.cs有四種社交驗證方式可選擇，分別是Microsoft Account、Twitter、Facebook與Google四種。

public partial class Startup

{

public void ConfigureAuth(IAppBuilder app)

{

app.UseSignInCookies();

//app.UseMicrosoftAccountAuthentication(

// clientId: "",

// clientSecret: "");

//app.UseTwitterAuthentication(

// consumerKey: "",

// consumerSecret: "");

//app.UseFacebookAuthentication(

// appId: "",

// appSecret: "");

//app.UseGoogleAuthentication();

}

在Visual Studio 2013的WebForms、MVC與Single Page Application三個範本的社交驗證方面統一改採用OWIN實作，所以三個範本的社交驗證設置方式是一致的，以下以MVC專案來說明。

整合Google驗證

預設社交驗證除Google之外，都必須先取得Id（或Key）與Secret，要啟用Google驗證相當簡單，只需要取消註解：

//app.UseGoogleAuthentication();

改為

app.UseGoogleAuthentication();

啟動專案，點選範本的「登入」：

圖十八

在「使用其他服務登入」區域就會出現Google按鈕。

圖十九

點擊之後會轉址至Google的登入頁面。如果使用者帳戶有啟用二次驗證，會需要進行二次驗證程序。

圖二十

確認是否可存取Google資訊。

圖二十一

將取得的資料儲存至本機資料表之中。

圖二十二

完成Google社交驗證並登入Web應用程式。

整合Microsoft Account社交驗證

要整合Microsoft Account驗證功能，必須先建立開發者帳號並取得應用程式的Id與Secret。

l 申請網址：https://account.live.com/developers/applications/index。

l 登入Windows Live。

l 輸入必填資訊。

圖二十三

l 取得Id與Secret。

圖二十四

l 將取得的識別碼輸入至組態中：

app.UseMicrosoftAccountAuthentication(

clientId: "000000004C0FFAC9",

clientSecret: "pZaXuRd3lhb1R8V9lZjb9bEiqAl35uiZ");

l 建置啟動專案，移至登入頁面，即可使用Microsoft Account進行登入。

圖二十五

細部資訊請參考Live SDK：https://msdn.microsoft.com/en-us/library/live/。

整合Twitter社交驗證

要整合Twitter驗證功能，必須先建立開發者帳號並取得應用程式的Key與Secret。

l 申請網址：https://dev.twitter.com/。

l 登入後，在帳戶下選擇「My Applications」

圖二十六

l 選擇「Create a new application」。

l 輸入必填資訊後點擊「Create your Twitter application」。

l 將取得的key與secret輸入組態檔。

圖二十七

app.UseTwitterAuthentication(

consumerKey: "zQ7OmjDN3zCLh1EyN5cuGg",

consumerSecret: "6Tg7jHSWBnOp7q78iMo3CcZASZll6ZC7eo7hp8EwWYM");

l 建置啟動專案，移至登入頁面，即可使用Twitter帳戶進行登入。

圖二十八

細部資訊請參考Twitter API。

整合Facebook社交驗證

要整合Facebook驗證功能，必須先建立開發者帳號並取得應用程式的Id與Secret。

l 申請網址：https://developers.facebook.com/apps

l 點擊「建立新的應用程式」。

l 輸入必要資訊。

l 如果要高安全性，可將專案啟用SSL，取得網址後填入「以Facebook登入網站」欄位以測試。

圖二十九

l 將取得的key與secret輸入組態檔。

app.UseFacebookAuthentication(

appId: "120391184802682",

appSecret: "b8ce4aa69e1cb76ef47fd2420f414677");

l 建置啟動專案，移至登入頁面，即可使用Facebook帳戶進行登入。

圖三十

細部資訊請參考Facebook開發者文件：https://developers.facebook.com/docs/。

開發Facebook應用程式So Easy

在Visual Studio 2013透過「ASP.NET Web應用程式」，讓開發者有一個統一入口：

圖一

進入之後快速選擇「Facebook」範本：

圖二

Facebook範本與其他範本不同，它無法直接執行，直接執行結果如圖三：

圖三

這個畫面說明有些必要資訊必須進行設置。Facebook與其他範本不同，一般One ASP.NET範本都已經進行了基本設計，讓我們利用範本就可以進行一些簡單的操作，但Facebook應用程式範本因為必須去和Facebook進行證認與溝通，所以在執行Facebook應用程式專案前，必須取得Facebook開發者相關設置。

查詢App_Start目錄下的FacebookConfig.cs：

public static void Register(FacebookConfiguration configuration)

{

// 使用下列應用程式設定索引鍵，從 web.config 載入設定:

// Facebook:AppId, Facebook:AppSecret, Facebook:AppNamespace

configuration.LoadFromAppSettings();

// 新增授權篩選以檢查 Facebook 簽署的要求和權限

GlobalFilters.Filters.Add(new FacebookAuthorizeFilter(configuration));

}

由FacebookConfig.cs組態檔的說明中可以發現必須取得三項設定值，分別是Facebook:AppId、Facebook:AppSecret與Facebook:AppNamespace，它們是設定在Web.Config的appSettings之中：