Windows Phone Ansluta med Facebook

I denna handledning kommer vi att prata om hur man interagerar med Facebook API, och alla verktyg du behöver för att kunna ansluta till det. Specifikt kommer den app som vi ska göra att kunna ansluta till användarens Facebook-konto och uppdatera sin status. Låt oss börja!


Steg 1: Visual Studio Project Creation

Först och främst måste vi skapa ett nytt projekt med Visual Studio. Vi bygger bara en enkel app, så välj alternativet "Windows Phone App":


Om du använder Visual Studio 2012 med den nya WP8 SDK-filen, kommer du att bli uppmanad till Target Windows Phone OS Version. Om så är fallet, välj bara 7.1 OS.


Steg 2: Lägg till användargränssnittet

Med det redan skapade projektet öppnar du filen "MainPage.xaml" om den inte redan är öppen och ändrar standardprogrammets och sidnamnens textruta:

    

Nu i vårt ContentPanel Grid lägger vi till två rader, en för en textbox där användaren matar in den nya statusen och den andra för knappen för att skicka statusen:

      

Och lägg sedan till en textbox på den första raden med namnet "Meddelande" och en knapp på den andra:

       

I slutet borde du ha det här:


Steg 3: Skapa utvecklarkonton

Facebook har ett mycket omfattande API för att möjliggöra interaktion mellan appar och webbplatsen. API: n tillåter din app att ansluta och interagera med användarens FB-konto.

För att ansluta vår app till facebook måste vi registrera oss som en Facebook-utvecklare. För att skapa ett Facebook-utvecklare konto, gå till Facebook Developer Site,
Logga sedan in med ditt Facebook-konto eller skapa ett om du inte redan har ett. När du redan har loggat in, klicka på "Registrera knappen" och följ instruktionerna.


Steg 4: Registrera en ny app

Skapa nu en ny app genom att gå till din Apps-meny och välj sedan knappen "Skapa ny app".

När du har skapat din app ser du din appinställningar-sida och därpå ett app-ID / API-nyckelnummer.

Kopiera detta nummer, återvänd till projektet, och inuti filen "MainPage.xaml.cs", skapa en ny global konstant sträng ovanpå din konstruktör:

 privat const sträng FBApi = "DIN API KEY GOES HERE"; // Constructor public MainPage () InitializeComponent (); 

Steg 5: Välja Facebook C # SDK

Facebook har några bra SDK för iOS och Android, men tyvärr ingen för WP7, för att kunna ansluta till Facebook från en WP7 App har vi två alternativ: (1) skapa alla samtal manuellt eller (2) använda Facebook C # SDK, en icke-officiell SDK gjord speciellt för C # apps.

För denna handledning använder vi C # SDK. Den har alla metoder från Facebook API redan integrerad, så det kommer att göra vår uppgift mycket enklare!


Steg 6: Hämta SDK

Denna SDK är endast tillgänglig via NuGet, så om din Visual Studio inte innehåller NugGet Package Manager,
Du måste ladda ner den från NuGet-kompaniet.
För att ladda ner paketet öppnar du pakethanterarkonsolen på Visual Studio (Verktyg> Bibliotekspakethanterare> Pakethanterarkonsol) och anger följande kommando:Installera-paket Facebook . Om du har problem med den nedladdade versionen, försök med att använda det här kommandot: Install-Package Facebook-version 6.0.24


Steg 7: Lägg till FB SDK till din app

Nu när vi har SDK, lägger vi till det i vårt projekt. Lägg till en ny import i filen "MainPage.xaml.cs":

 använder Facebook

Steg 8: Lägga till en webbläsare

För att en användare ska kunna ansluta till Facebook måste han först ge oss tillgång till och tillåtelse till hans FB-konto. Detta görs via Facebook-hemsidan, och vi måste därför lägga till en webbläsare i vår ansökan. Webbläsaren bör täcka det mesta av sidan, så det kommer först att vara kollapsat och då ändras det för att vara synligt precis när användaren behöver logga in. I filen "MainPage.xaml" lägger du till en ny Webbrowser precis under ContentPanel:

       

Steg 9: Ansluta med Facebook

Med allt rätt inställt kan vi nu börja koda vår ansökan. Skapa en ny variabel för FacebookClient, och namnge den bara klienten. Det här är där alla anslutningar kommer att göras. Initiera också variabeln inuti konstruktören:

 privat FacebookClient-klient // Constructor public MainPage () InitializeComponent (); klient = ny FacebookClient (); 

Steg 10: Lägga till Click Event

För att faktiskt posta något måste användaren klicka på "Post" -knappen. Låt oss gå och lägga till en klickhändelse till den knappen:

 

På kodesidan, när användaren klickar på knappen, måste han logga in med Facebook och godkänna acceptera vår App. För denna process måste vi göra webbläsaren synlig och navigera till en webbadress som klienten ger oss, men innan vi behöver skicka några initialparametrar:

 privat tomt PostClicked (objekt avsändare, RoutedEventArgs e) // Klientparametrar var parametrar = nytt ordbok(); parametrar ["client_id"] = FBApi; parametrar ["redirect_uri"] = "https://www.facebook.com/connect/login_success.html"; parametrar ["response_type"] = "token"; parametrar ["display"] = "touch"; // Området är det som ger oss tillgång till användardata, i det här fallet // vi vill bara publicera på sina väggparametrar ["scope"] = "publish_stream"; Browser.Visibility = System.Windows.Visibility.Visible; Browser.Navigate (client.GetLoginUrl (parametrar)); 

Om du kör din kod just nu och klickar på knappen Post, ska webbläsaren visas, som visar Facebook-inloggningssidan:


Steg 11: Lägga till en navigeringshändelse

När användaren har loggat in på Facebook, navigeras webbläsaren till en URL som innehåller vår access token för API-samtal. När vi hämtar det måste vi bara tilldela det till vår klient. En sak att ta hänsyn till är att det finns många sidor som webbläsaren kan navigera i (fel lösenord, användare avvisade vår app etc.), så vi måste försöka få token när vi är säkra på att vi är på rätt sida.

Lägg till den navigerade händelsen i webbläsaren:

 

Lägg sedan till följande rader i händelsehanteraren:

 privat tomgång BrowserNavitaged (objekt avsändare, System.Windows.Navigation.NavigationEventArgs e) FacebookOAuthResult oauthResult; // Säkerställ att webbadressen faktiskt har åtkomsttoken om (! Client.TryParseOAuthCallbackUrl (e.Uri, out oauthResult)) return;  // Kontrollera att användaren framgångsrikt godkänt vår app, annars visas bara felet om (oauthResult.IsSuccess) // Process result client.AccessToken = oauthResult.AccessToken; // Dölj webbläsaren Browser.Visibility = System.Windows.Visibility.Collapsed; PostToWall ();  else // Process Error MessageBox.Show (oauthResultErrorDescription); Browser.Visibility = System.Windows.Visibility.Collapsed; 

Steg 12: Lägga till en postmetod

Nu när vi har tillgång kan vi fortsätta och faktiskt posta till användarens vägg. Skapa en ny privat tomgångsmetod som heter postToWall och lägg till följande rader:

 privat tomt PostToWall () var parametrar = ny ordbok(); parametrar ["message"] = Message.Text; client.PostAsync ("me / feed", parametrar); 

Den enda parameter som vi behöver skicka till detta samtal är det meddelande som vi ska skicka på användarens vägg. Meddelandet som vi skickar kommer att vara texten från vår textbox kallad "meddelande". Meddelandet läggs ut asynkront, så PostCompleted-händelsen kommer att ringas när uppgiften är klar, därför behöver vi inte lägga till en händelsehanterare för det.


Steg 13: PostCompleted Event Handler

Eftersom vi bara vill lägga till händelsehanteraren en gång lägger vi till den på konstruktören, precis efter att vår kund initialiserats. Inne i handlaren, kontrollera om posten var avslutad eller om det fanns fel under operationerna, varna sedan användaren:

 // Constructor public MainPage () InitializeComponent (); klient = ny FacebookClient (); client.PostCompleted + = (o, args) => // Kontrollerar fel om (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message));  else Dispatcher.BeginInvoke (() => MessageBox.Show ("Meddelande publicerat framgångsrikt")); ; 

Steg 14: Testa koden

Med den här koden bör vår app redan kunna skicka ett meddelande via användarens Facebook-konto.

Kör appen i emulatorn, försök att skicka ett testmeddelande som du vill ha, och i slutet ska du få ett meddelande som säger: "Meddelandet har lagts upp".

Öppna nu Facebook-kontot i en webbläsare, och du ska se det meddelande du just skrivit:

grattis! Du har nu en app som kan ansluta till Facebook, men det finns fortfarande några saker som vi kan förbättra. Vi kan till exempel försöka spara åtkomsttoken, så användarna behöver inte logga in varje gång de öppnar appen.


Steg 15: Spara åtkomsttoken

Vi ska spara token för applikationsinställningarna, men för att kunna göra detta måste vi först importera IsolatedStorage-biblioteket:

 Använda System.IO.IsolatedStorage;

Med det här biblioteket kan vi nu bara fortsätta och skapa metoden:

 privat tomt SparaToken (String token) // Om det är den första spara, skapa nyckeln på ApplicationSettings och spara token, annars bara ändra nyckeln om!! Lägg till ("token", token); annars IsolatedStorageSettings.ApplicationSettings ["token"] = token; IsolatedStorageSettings.ApplicationSettings.Save (); 

Steg 16: Hämtar med den sparade token

Nu behöver vi få token från IsolatedStorage:

 privat sträng GetToken () // Om det inte finns någon Token på minnet, returnera bara null, annars returnera token som sträng om (! IsolatedStorageSettings.ApplicationSettings.Contains ("token")) returnerar null; returnera annars IsolatedStorageSettings.ApplicationSettings ["token"] som sträng; 

Steg 17: Logga in med den sparade token

Med dessa två metoder kan vi nu hämta token och tilldela den till vår klient varje gång appen öppnas:

 // Constructor public MainPage () InitializeComponent (); klient = ny FacebookClient (); client.PostCompleted + = (o, args) => // Kontrollerar fel om (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message));  else Dispatcher.BeginInvoke (() => MessageBox.Show ("Meddelande publicerat framgångsrikt")); ; // Kontrollera för sparade token om (GetToken ()! = Null) client.AccessToken = GetToken (); 

Steg 18: Kontrollera utgått Tokens

En annan sak att ta hänsyn till är att användaren kan avvisa behörigheterna för vår app, så vi måste upptäcka detta och begära behörigheter igen. Denna detektion bör göras på vår PostCompleted handler, eftersom det är där Facebook kommer att meddela oss om ett problem med vårt inlägg. Lägg till följande rader i vår PostCompleted handler:

 client.PostCompleted + = (o, args) => // Kontrollerar fel om (args.Error! = null) // Autoriseringsfel om (args.Error är FacebookOAuthException) Dispatcher.BeginInvoke (() => MessageBox .Show ("Authorization Error")); // Ta bort den faktiska token eftersom det inte fungerar längre. SaveToken (null); client.AccessToken = null;  else Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message));  else Dispatcher.BeginInvoke (() => MessageBox.Show ("Meddelande publicerat framgångsrikt")); ;

Steg 19: Ändra bakåtknappen

Precis som ett sista steg måste vi ge användaren möjlighet att stänga webbläsaren när så önskas.
Denna åtgärd bör ges till bakåtknappen, så vi behöver bara ändra händelsehanteraren för att uppnå det.

Lägg till följande metod i din kod:

 skyddad åsidosätt annullera OnBackKeyPress (System.ComponentModel.CancelEventArgs e) // Om webbläsaren är synlig, göm den och avbryt navigeringshändelsen om (Browser.Visibility == System.Windows.Visibility.Visible) Browser.Visibility = System.Windows .Visibility.Collapsed; e.Cancel = true;  base.OnBackKeyPress (e); 

Steg 20: Slutprodukten

Testa din app igen, nu har du en helt fungerande Facebook-app!


Vart ska man åka ifrån här

Facebook handlar inte bara om att uppdatera din status. Det finns många andra saker som du kan lägga till i din App, som att dela foton, skicka apprekommendationer till vänner etc. Facebook C # SDK erbjuder många möjligheter för Facebook-integration. För att lära dig mer om det, gå och kolla in deras webbsida och börja jobba med att göra din app mer social!