整合社交驗證及開發Facebook App – 使用ASP.NET及 Visual Studio 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:http://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之中:

 

 

圖四

 

這些設定值必須透過Facebook開發者平台取得。

 

註冊成為Facebook開發者

首先,連線至 https://developers.facebook.com/apps 進行開發者的註冊動作。

 

步驟一:註冊為Facebook開發者。

 

 

圖五

 

步驟二:透過手機進行身份驗證。

 

 

圖六

 

手機認證這部分,如果各位一直無法收取認證簡訊,請連絡你的手機電信商以解決這個問題。

 

步驟三~四:可任意選擇與輸入。(故省略)

 

在Facebook建立新的應用程式

 

圖七

 

完成Facebook開發者註冊動作之後,就可以看到畫面上出現「建立新的應用程式」。

 

圖八

 

點擊「建立新的應用程式」,輸入必要資訊點擊「繼續」並輸入驗證資訊後即進入應用程式設計定畫面。

 

設定Facebook應用程式之前先修改Visual Studio Facebook專案的設置。首先啟用專案的SSL,將「SSL 已啟用」修改為「True」:

 

 

圖九

 

然後到專案的屬性頁面的「Web」修改「專案URL」,輸入SSL URL並點擊「建立虛擬目錄」。

 

 

圖十

 

在Facebook應用程式設定頁面將SSL URL資訊輸入第二項的「Canvas 網址」與「加密Canvas網域」,並且將「Canvas寬度」改選擇為「浮動」:

 

圖十一

 

完成設定之後按下「儲存」。

 

AppID、App Secret與Namespace三項是我們要設置到web.config裡的資訊。如果已經將網站佈置到公開網站上,例如,Windows Azure,記得要回到Facebook應用程式設置畫面,重新設置【Canvas網址】,將你Facebook應用程式的公開網址重新輸入與更新。

 

 

圖十二

 

設置好之後,重新建置與啟動【Facebook應用程式】專案。

 

 

圖十三

 

正常會出現憑證有問題的畫面,請按「繼續瀏覽此網站(不建議)」。

 

 

圖十四

 

會在Facebook的畫面裡出現應用程式存取的請求,按「確定」。

 

 

圖十五

 

一個Facebook應用程式就出現在你的瀏覽器之中。

 

參考資料

 

  1. http://blog.kkbruce.net/2013/02/web-tools-20122-for-facebook-application-template.html
  2. http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-facebook-birthday-app
  3. http://www.asp.net/visual-studio/overview/2013/creating-web-projects-in-visual-studio#auth
  4. http://blogs.msdn.com/b/webdev/archive/2013/06/27/adding-external-logins-to-your-asp-net-application-in-visual-studio-2013.aspx
  5. http://books.gotop.com.tw/v_ACL036500 (第8.6節)
  6. http://www.asp.net/web-api/overview/security/external-authentication-services
  7. http://www.asp.net/mvc/tutorials/mvc-5/create-an-aspnet-mvc-5-app-with-facebook-and-google-oauth2-and-openid-sign-on
  8. http://blogs.msdn.com/b/webdev/archive/2012/08/15/oauth-openid-support-for-webforms-mvc-and-webpages.aspx

     

Comments (0)

Skip to main content