本文章是由機器翻譯。

技術最前線

基本的 Facebook 程式設計:建置 Windows 用戶端

Dino Esposito

下載代碼示例

Dino Esposito
在我以前的專欄中,我討論了 Facebook 網站的上下文中的程式設計的基礎知識 — — 具體 ASP.NET MVC Web 網站 (您可以閱讀在文章 msdn.microsoft.com/magazine/jj863128)。你可以想像,Facebook API 的使用並不限於 Web 應用程式,即使其最常見的使用只是為了"軟性"的方式對新的 Web 網站的使用者進行身份驗證。

此列中我會建造一個 Windows 演示文稿基金會 (WPF) 用戶端應用程式,使用 Facebook API 來驗證使用者身份併發布帶圖片的更新。因為 Web 是一個不同的環境,從桌面,此列顯然將不同于我所寫的最後一個月。Facebook API,但是,是相同的。你可以通過 NuGet Facebook C# SDK (見 facebookapi.codeplex.com 更多詳細資訊的 Facebook api 的 C# /.NET 開發人員)。

與社交網路的整合應用程式

大多數社交網路都有一個相似的結構。使用者和社會網路的引擎之間的相互作用發生在以下兩種方法之一:通過主要的 Web 網站 (例如,Twitter 或 Facebook 網站) 直接或通過內部主辦的社交網路網站 app 的調解。為清楚起見,我會把這些應用程式稱為連接器。

用戶端應用程式 (Web 網站、 WPF 或 Windows Phone) 只可以通過連接器的調解的社會網路引擎與交互。伴隨此列的示例代碼,我將使用 Facebook 連接器稱為 (注釋的代碼,例如提供的目的,是作為一個單一的專案,不是一個完整的解決方案,及使用 Visual Studio 2010),以作留念。名稱,以作留念 — — 和其相關的圖示 — — 將顯示為任何牆員額所作的任何用戶端應用程式使用,以作留念連接到 Facebook 的頁腳。您可以創建在 facebook 連接器 developers.facebook.com/apps

連接器的特點是一對唯一字串 — — 應用程式鍵和秘密 — — 並且,更有趣的是,我們的目的而言,可以為各種用戶端應用程式服務,是否 Web、 移動或桌面。圖 1 互動的時候,總結了社交網路的總體結構。

The Interaction Model of Social Networks
圖 1 社會網路的互動模型

最後,任何使用者應用程式需要與最受歡迎的社交網路 (例如,Facebook、 Twitter 或 Foursquare) 集成基本上是作為一個社會網路特定連接器應用程式的用戶端生成。

對於 app,基本上與社交網路的整合意味著訪問註冊使用者的社交網路功能。這涉及幾個操作:社會網路和執行實際的操作,例如,使簽入為一個給定的場地、 使用者的牆上張貼或網名對使用者進行身份驗證。

這是一個社交網路 API 融入一個自訂的應用程式的本質,事實證明,它可能並不局限于只是 Web 應用程式。

Windows 應用程式的差異

在上個月的專欄中,我首先討論如何通過 Facebook,Web 網站的使用者進行身份驗證,然後提出了一些代碼來張貼兩者對話模式和程式設計方式到該使用者的牆。過帳到使用者的牆不需要不同辦法如果做從 Windows 應用程式 ; 身份驗證,相反,需要作出一些調整。

社會網路是主要是 Web 應用程式,並公開通過 OAuth 協定的身份驗證服務。想要通過 Facebook 帳戶,其使用者進行身份驗證的應用程式,例如需要放置到一些 Facebook 終結點的 HTTP 調用。該終結點,但是,返回實際使用者通過輸入憑據和授權的連接器,以她的名義運作與交互的 HTML 頁 (見圖 2)。

The Memento Connector Explicitly Asks the User for Permissions
圖 2,以作留念連接器明確要求使用者的許可權

在 Windows 或移動方案相比,Web 應用程式中是不同的部分是你如何處理重定向到 HTML 頁的社會網路提供的憑據和許可權。

然而另一個 Facebook Windows 用戶端

讓我們創建一個 WPF 專案,有點 XAML 標記添加到主視窗。至少,您需要有幾個按鈕來觸發登錄和登出過程和一個標籤,以顯示當前登錄的使用者的名稱。此外,您可以有一個圖像元素,以顯示當前使用者的圖片。還有什麼事?讓我們看看你放在登錄 click 處理常式中的代碼:

var loginUrl = FbHelpers.GetLoginUrl();

第一步從 Facebook 獲取的登錄 URL。 要獲取 URL 的代碼是相同,您將在 Web 方案中,使用中所示圖 3

圖 3 代碼來獲取登錄 URL

public static String GetLoginUrl()
{
  var client = new FacebookClient();
  var fbLoginUri = client.GetLoginUrl(new
  {
    client_id = ConfigurationManager.AppSettings["fb_key"],
    redirect_uri =
    "https://www.facebook.com/connect/login_success.html", 
    response_type = "code",
    display = "popup",
    scope = "email,publish_stream"
  });
  return fbLoginUri.ToString();     
}

你可能注意到,(必需) 的 redirect_uri 參數指向一個 Facebook 成功終結點。 這是的著陸頁面後登錄進程已終止。 Web 方案中您將使用當前頁,因此在使用者第一次重定向到 Facebook 網站然後再回原始請求頁。

GetLoginUrl 方法只獲取您要調用登錄的 URL。 在 Web 方案中,您只需調用重定向切換到新的頁面並顯示典型登錄 Facebook 使用者介面或 — — 如果使用者已經登錄使用中的電腦 — — 許可權頁面中所示圖 2。 要達到相同的 Windows 應用程式,您需要在 UI 中的最初隱藏的 WebBrowser 控制項。 這裡是有關應用程式的登錄按鈕的 click 處理常式的完整代碼:

public void Login()
{
  var loginUrl = FbHelpers.GetLoginUrl();
  ShowBrowser = true;
  view.Browser.Navigate(loginUrl);
}

可供下載的應用程式範例使用模型-視圖-(MVVM) 模式來抽象掉 UI 詳細資訊。 因此,設置 ShowBrowser 為 true,只是有影響的開啟 WebBrowser 控制項的可見度。 最後,導航方法將定向到指定的 URL 的元件。 圖 4 顯示應用程式範例的狀態,之前和之後按一下登錄。

First Step of Login to Facebook
圖 4 登錄 facebook 的第一步

身份驗證過程可能會採取兩個步驟。 如果使用者已經登錄到社交網路,在 Web 瀏覽器直接接收的登錄頁。 如果使用者沒有登錄中,在所示的頁面圖 4 提交了。 但是,如果使用者沒有關聯與正在使用的用戶端應用程式,然後中間螢幕類似的連接器示圖 2 明確要求授予的許可權。

你如何處理頁 WebBrowser 元件中的負載? 基本上,您需要一個 Navigated 事件處理常式:

void facebookBrowser_Navigated(Object sender, 
  NavigationEventArgs e)
{
  var fb = new FacebookClient();
  FacebookOAuthResult oauthResult;
  if (!fb.TryParseOAuthCallbackUrl(e.Uri, out oauthResult))
    return;
  if (oauthResult.IsSuccess)           
    _viewPresenter.LoginSucceeded(oauthResult);           
  else           
    _viewPresenter.LoginFailed(oauthResult);
}

Facebook 指示成功或不是否完成登錄過程。 請注意,登錄失敗,如果使用者只需到連接器拒絕請求的許可權。 如果登錄失敗,只是重置隱藏在 Web 瀏覽器的使用者介面,並向使用者顯示一些回饋。 當登錄成功,如中所示的更有趣的是圖 5

圖 5 登錄成功時

public void LoginSucceeded(FacebookOAuthResult oauthResult)
{
  // Hide the Web browser
  ShowBrowser = false;
  // Grab the access token (necessary for further operations)
  var token = FbHelpers.GetAccessToken(oauthResult);
  Token = token;
  // Grab user information
  dynamic user = FbHelpers.GetUser(token);
  // Update the user interface
  UserName = String.Format("{0} {1}", user.first_name,
    user.last_name);
  UserPicture = user.picture;
  IsLogged = true;
}

中的代碼圖 5 類似于您需要在 Web 方案中使用。 請注意一旦使用者已成功登錄,app 是仍尚未準備代表使用者操作。 此外,該應用程式尚未不知道任何與使用者有關的 — — 甚至沒有使用者名稱或某種類型的 id。 這意味著保留身份驗證資料尚不可能。 因此,另一個步驟是強制性的 Web 和 Windows 的方案:獲取訪問權杖。

訪問權杖

訪問權杖是你從社會網路獲得成功登錄代碼的字串。 登錄代碼只是指示進行身份驗證的使用者瞭解到網路。 存取碼聯結在一起的使用者標識和連接器。 存取碼告訴社會網路引擎使用者應用程式是否具有足夠的許可權執行代表該使用者所請求的操作。 同一使用者不同連接器有一個不同的訪問權杖。

圖 6 OAuth 登錄成功後顯示的 C# 代碼來獲取訪問權杖。

圖 6 代碼來獲取成功的 OAuth 登錄後的訪問權杖

public static String GetAccessToken(FacebookOAuthResult oauthResult)
{
  var client = new FacebookClient();
  dynamic result = client.Get("/oauth/access_token",
    new
    {
      client_id = ConfigurationManager.AppSettings["fb_key"],
      client_secret =
      ConfigurationManager.AppSettings["fb_secret"],
      redirect_uri =
      "https://www.facebook.../login_success.html", 
      code = oauthResult.Code
  });
  return result.access_token;
}

在 Web 應用程式中,您可能想要堅持在自訂 cookie 或作為自訂 IPrincipal 物件所管理的自訂身份驗證 cookie 中的額外資料的訪問權杖。 在 Windows 的情況下,您可能想要訴諸本機存放區。 當該使用者登出 Windows 應用程式時,您只需清除出任何存儲的資料。 一旦你持有一個給定的使用者和連接器的訪問權杖,您已經準備好執行的任何操作都屬於授予的許可權,如中所示圖 2

常見的社交網路應用程式類型"偵聽"到一些飼料,和代表相同的使用者自動員額。 在這種情況下,你一次抓的訪問權杖並保持上運行應用程式,直到使用者撤銷的許可權。 一旦你持有的訪問權杖,您不需要處理的身份驗證,只要使用者權杖的背後其實登錄到電腦的社會網路。

過帳狀態和照片

圖 7 顯示示例 WPF 應用程式的 UI,一旦使用者成功登錄到 Facebook 和安全地存儲的訪問權杖。 使用者介面包括一個文字方塊和一個按鈕,用於發佈。 正如您所看到的 UI 還定義了一個按鈕,用於流覽和從本地磁片中選擇 JPEG 圖像。

Posting from the Sample Client App
圖 7 示例用戶端應用程式從過帳

中的代碼圖 8 演示如何發佈更新與附加的圖片。

圖 8 中的代碼以發佈與附加的圖片更新

public static void PostWithPhoto(
  String token, String status, String photoPath)
{
  var client = new FacebookClient(token);
  using (var stream = File.OpenRead(photoPath))
  {
    client.Post("me/photos",
    new
    {
      message = status,
       file = new FacebookMediaStream
  {
         ContentType = "image/jpg",
         FileName = Path.GetFileName(photoPath)
        }.SetValue(stream)
    });
  }
}

圖 7 你看到的更新和過帳到時間表的圖片。請注意使用的連接器的名稱提出根據作者的姓名。

下一步的打算:JavaScript

在這篇文章我構建了一個 WPF 應用程式發佈到 Facebook 使用者。若要生成一個手機應用程式,你遵循同一模式在這裡討論了。請注意該模式是有效選擇的移動平臺無關。我已經在這同一種方式成功地構建 Windows Phone 和 Android 應用程式。我的下一列將顯示如何使用 JavaScript 程式 Facebook。

Dino Esposito 是"構建移動解決方案的企業"(微軟出版社,2012年) 的作者和"程式設計 ASP.NET MVC 3"(微軟出版社,2011年) 和合著者的"Microsoft.NET:構建企業應用程式"(微軟出版社,2008年)。埃斯波西托在義大利的基礎,是經常在世界各地的行業活動中發表演講。跟隨他在 Twitter 上 twitter.com/despos

由於以下的技術專家對本文的審閱:斯科特 · 登斯莫爾