Dieser Artikel wurde maschinell übersetzt.

Innovation

Grundlegende Facebook-Programmierung: Erstellen eines Windows-Clients

Dino Esposito

In meinem letzten Artikel erwähnt die Grundlagen der Programmierung von Facebook im Rahmen einer Website — speziell ein ASP.NET MVC-Website (erfahren Sie im Artikel unter msdn.microsoft.com/magazine/jj863128).Wie Sie sich vorstellen können, die Nutzung der Facebook-API ist nicht beschränkt auf Web-Anwendungen, obwohl eine der am häufigsten verwendet ist nur zum Authentifizieren von Benutzern einer neuen Website in gewissem Sinne "weicher".

In diesem Artikel werde ich eine Windows Presentation Foundation (WPF)-Clientanwendung erstellen, die die Facebook-API verwendet, um Benutzer zu authentifizieren und Aktualisierungen mit Bildern veröffentlichen.Da im Web eine andere Umgebung auf dem Desktop ist, wird diese Spalte offensichtlich anders sein aus, was ich letzten Monat schrieb.Die Facebook-API, ist jedoch identisch.Kann man das Facebook C# SDK über NuGet (siehe facebookapi.codeplex.com für weitere Details über die Facebook-API für c# / .NET Entwickler).

Integration von Apps in sozialen Netzwerken

Die meisten sozialen Netzwerke haben eine ähnliche Architektur.Interaktion zwischen Benutzer und der Motor des sozialen Netzes erfolgt in den folgenden zwei Möglichkeiten: direkt über der Haupt-Website (z. B. die Twitter oder Facebook-Website) oder durch die Vermittlung einer APP, die intern von der Sozialnetwork Site gehostet.Aus Gründen der Übersichtlichkeit werde ich diese apps als Verbinder bezeichnen.

Eine Clientanwendung (Website, WPF oder Windows Phone) kann nur mit dem Motor des sozialen Netzes durch die Vermittlung eines Verbinders interagieren.Für diesen Artikel Beispielcode verwende ich einen Facebook Connector Memento (Beachten Sie der Code, z. B. Zwecke zur Verfügung gestellt und kommt als ein einzelnes Projekt, keine vollständige Lösung, verwendet Visual Studio 2010) genannt.Der Name Memento — und das zugehörige Symbol — zeigt sich als der Fußzeile jeder Wand-stellen, die von jedem Client app mit Memento zu Facebook herstellen.Sie können einen Connector für Facebook zu erstellen developers.facebook.com/apps.

Steckverbinder zeichnen sich durch ein paar einzigartige Zeichenfolgen — app, Schlüssel und geheimen — und interessanter für unsere Zwecke kann eine Vielzahl von Clientanwendungen dienen, ob Web, mobile oder desktop.Abbildung 1 fasst die Gesamtarchitektur der sozialen Netzwerke, wenn es um Interaktion geht.

Abbildung 1 Das Interaktionsmodell von sozialen Netzwerken

Am Ende werden keine Benutzer-apps, die Integration mit den beliebtesten sozialen Netzwerken (z.B. Facebook, Twitter oder Foursquare) müssen im Wesentlichen als eines sozialen Netzwerk-spezifische Connector App-Clients erstellt.

Zugriff auf die Funktionalitäten eines sozialen Netzwerks im Auftrag eines registrierten Benutzers für eine app bedeutet im Wesentlichen mit einem sozialen Netzwerk zu integrieren.Dazu sind ein paar Aktionen: Authentifizieren von Benutzern, die gegen das soziale Netz und die Durchführung der eigentlichen Aktion, z. B. eine Check-in für einen bestimmten Ort machen, an Wand des Benutzers veröffentlichen oder zwitschern.

Dies ist die Essenz ein soziales Netzwerks API in eine benutzerdefinierte Anwendung zu integrieren, und es stellt sich heraus, es möglicherweise nicht auf Web-Anwendungen beschränkt.

Unterschiede von einem Windows-App

Im Artikel des letzten Monats ich zuerst diskutiert, wie man die Authentifizierung von Benutzern einer Website über Facebook, dann legte ich einen Code, um beide post interaktiv und programmgesteuert an Wand des Benutzers.Buchung auf der Wand eines Benutzers erfordert keinen anderen Ansatz, wenn von einem Windows-app; Authentifizierung erfordert stattdessen einige Anpassungen.

Ein soziales Netzwerk ist in erster Linie eine Web-Anwendung und macht Authentifizierungsdienste über das OAuth-Protokoll.Eine app, die seine Nutzer über Facebook-Konten authentifizieren möchte muss beispielsweise einen HTTP-Aufruf an einige Facebook-Endpunkt zu setzen.Jedoch gibt der Endpunkt eine HTML-Seite für den aktuellen Benutzer Interaktion mit Eingabe von Anmeldeinformationen und autorisieren den Connector zu ihren Gunsten zu betreiben (siehe Abbildung 2).

Abbildung 2 die Memento-Connector fragt den Benutzer explizit für Berechtigungen

Der Teil, der in einem Windows- oder mobiles Szenario im Vergleich zu einer Webanwendung unterscheidet ist wie Sie behandeln die Umleitung auf die HTML-Seite, die das soziale Netzwerk für Anmeldeinformationen und Berechtigungen bereitstellt.

Noch eine andere Facebook-Windows-Client

Wir erstellen Sie ein WPF-Projekt und fügen Sie ein wenig von XAML-Markup zum Hauptfenster.Sie müssen mindestens ein paar Tasten zum Auslösen der Anmeldename und Abmeldevorgang und eine Bezeichnung auf den Namen des aktuell angemeldeten Benutzers anzeigen haben.Darüber hinaus haben Sie ein Bildelement die Grafik des aktuellen Benutzers angezeigt.Was sonst?Betrachten Sie den Code, die Sie in den Login Click-Ereignishandler:

var loginUrl = FbHelpers.GetLoginUrl();

Der erste Schritt ist immer die Anmelde-URL von Facebook. Der Code zum Abrufen der URL ist dasselbe wie in einem Szenario, verwenden wie im Abbildung 3.

Abbildung 3 Code Login URL bekommen

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();     
}

Wie Sie bemerken können, zeigt der Parameter Redirect_uri (erforderlich) auf einen Endpunkt des Facebook-Erfolg. Das ist die Zielseite für nach der Login-Prozess beendet wurde. In einem Szenario würden Sie die aktuelle Seite verwenden, damit der Benutzer zuerst auf die Facebook-Website umgeleitet wird und dann zurück zu der ursprünglichen anfordernden Seite.

Die GetLoginUrl-Methode ruft Sie nur die URL aufrufen, einloggen. In einem Szenario, rufen Sie einfach eine Umleitung um zur neuen Seite wechseln und zeigen die typische Facebook UI für Login oder — wenn der Benutzer bereits auf dem Computer verwendet angemeldet ist — die Berechtigung Seite wie im Abbildung 2. Um das gleiche in einer Windows-Anwendung zu erreichen, benötigen Sie ein zunächst versteckte WebBrowser-Steuerelement in der Benutzeroberfläche. Hier ist der vollständige Code für die Click-Ereignishandler der Schaltfläche der app anmelden:

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

Die Beispielanwendung zum Download verwendet das Model-View-ViewModel (MVVM) Muster Weg UI-Informationen zu abstrahieren. Daher hat die ShowBrowser nur auf true festlegen den Effekt auf die Sichtbarkeit des WebBrowser-Steuerelements zu verwandeln. Schließlich weist die Navigate-Methode die Komponente mit der angegebenen URL. Abbildung 4 zeigt den Status der Beispielanwendung vor und nach die Anmeldung klicken.

Abbildung 4 erster Schritt der Anmeldung auf Facebook

Die Authentifizierung kann bis zu zwei Schritte dauern. Wenn der Benutzer bereits mit dem sozialen Netzwerk angemeldet ist, erhält der Webbrowser direkt die Zielseite. Wenn der Benutzer nicht angemeldet ist, die Seite angezeigt, die Abbildung 4 dargestellt ist. Jedoch angezeigt, wenn der Benutzer mit dem Connector wie die von der Clientanwendung, dann eine mittlere Bildschirm verwendet wird, nicht verknüpft ist Abbildung 2 fragt explizit Berechtigungen erteilen.

Wie handhaben Sie die Belastung von Seiten der WebBrowser Komponente? Sie brauchen im Grunde einen Navigated-Ereignis-Handler:

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 gibt an, ob der Login-Prozess erfolgreich abgeschlossen. Beachten Sie, dass die Anmeldung fehlschlägt, wenn der Benutzer angeforderte Berechtigungen an den Stecker einfach verweigert. Wenn die Anmeldung fehlschlägt, einfach Rücksetzen Sie die Benutzeroberfläche ausblenden Webbrowser und zeigen Sie dem Benutzer ein Feedback. Es ist viel interessanter, wenn die Anmeldung erfolgreich ist, wie in Abbildung 5.

Abbildung 5 nach einer erfolgreichen Anmeldung

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;
}

Der Code in Abbildung 5 ähnelt, was Sie brauchen, in einem Szenario zu verwenden. Beachten Sie, wenn der Benutzer erfolgreich angemeldet hat, die app noch nicht noch bereit ist, im Namen des Benutzers zu betreiben. Darüber hinaus die app noch nichts weiß alles über die — nicht einmal den Namen des Benutzers oder irgendeine Art von ID. Dies bedeutet, dass die anhaltenden Authentifizierungsdaten noch nicht möglich ist. Daher ist ein weiterer Schritt obligatorisch für Web- und Windows-Szenarien: immer das Zugriffstoken.

Das Zugriffstoken

Das Zugriffstoken ist eine Zeichenfolge, die Sie aus dem sozialen Netz als Gegenleistung für einen erfolgreichen Login-Code zu erhalten. Der Login-Code bedeutet einfach, dass der Benutzer, der ging mit Authentifizierung im Netzwerk bekannt ist. Den Zugangscode verbindet die Identität des Benutzers und den Connector. Der Zugangscode wird das soziale Netzwerk angewiesen, ob die app Benutzer genügend Berechtigungen zum Ausführen des angeforderten Vorgangs im Namen dieser Benutzer hat. Derselbe Benutzer hat ein anderes Zugriffstoken für verschiedene Anschlüsse.

Abbildung 6 zeigt den c#-Code erhalten Sie den Zugriff nach einer erfolgreichen Anmeldung OAuth token.

Abbildung 6-Code erhalten Sie Zugriff Token nach erfolgreichen OAuth-Anmeldung

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;
}

In einer Webanwendung sollten Sie zum Beibehalten des Zugangs-Tokens in einem benutzerdefinierten Cookie oder als zusätzliche Daten in einem benutzerdefinierten Authentifizierungscookie durch ein benutzerdefiniertes IPrincipal-Objekt verwaltet. In einem Szenario mit Windows sollten Sie auf lokalen Speicher zurückgreifen. Wenn der Benutzer eine Windows-Anwendung abmeldet, löschen Sie einfach alle gespeicherten Daten. Sobald Sie das Zugriffstoken für einen bestimmten Benutzer und Anschluss halten, Sie sind bereit, jeder Vorgang, der unter den erteilten Berechtigungen ausführen, wie im Abbildung 2.

Ein Typ der common Sozialnetz APP einige Feed "hört" und Bucht im Namen des gleichen Benutzers automatisch. In diesem Fall Sie das Zugriffstoken einmal greifen und halten auf die app laufen, bis der Benutzer Berechtigungen wird aufgehoben. Sobald Sie das Zugriffstoken halten, müssen Sie keine Authentifizierung behandeln, solange der Benutzer hinter das Token tatsächlich auf das soziale Netzwerk auf dem Computer angemeldet ist.

Buchungsstatus und Fotos

Abbildung 7 zeigt die Benutzeroberfläche der app WPF Beispiel, sobald der Benutzer erfolgreich auf Facebook angemeldet ist und das Zugriffstoken sicher gelagert. Die Benutzeroberfläche enthält ein Textfeld und eine Schaltfläche zur post. Wie Sie sehen können, wird die Benutzeroberfläche auch definiert eine Schaltfläche zum Durchsuchen und wählt ein JPEG-Bild von der lokalen Festplatte.

Abbildung 7 aus der Beispielclient App buchen

Der Code in Abbildung 8 zeigt, wie ein Update mit einem angehängten Bild veröffentlichen.

Abbildung 8-Code, um ein Update mit einem angehängten Bild veröffentlichen

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)
    });
  }
}

In Abbildung 7 sehen Sie das Update und das Bild in meine Timeline gebucht. Beachten Sie, dass der Name des Konnektors verwendet unter dem Namen des Autors dargestellt ist.

Ausblick: JavaScript

In diesem Artikel baute ich eine WPF-Anwendung auf Facebook im Namen eines Benutzers bereitzustellen. Um eine mobile app zu erstellen, folgen Sie dem gleichen Muster hier diskutiert. Beachten Sie, dass das Muster gültig, unabhängig von der mobilen Plattform der Wahl ist. Ich habe Windows Phone und Android apps erfolgreich auf diese gleiche Weise gebaut. Meine nächste Spalte zeigen wie JavaScript Programm Facebook nutzen.

Dino Esposito ist der Autor von „Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) sowie „Programming ASP.NET MVC 3” (Microsoft Press, 2011) und Mitverfasser von „Microsoft .NET: Architecting Applications for the Enterprise" (Microsoft Press, 2008). Esposito lebt in Italien und ist ein weltweit gefragter Referent für Branchenveranstaltungen. Sie können ihm auf Twitter unter twitter.com/despos folgen.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Scott Densmore