Introduction
Facebook Login provides a fast and secure sign up experience across web, iOS, and Android apps. However, Microsoft is adding official support for Facebook Login in Windows 8 and Windows Phone 8 appsin partnership with Facebook. Facebook Login for Windows 8 is ready to use in production apps, while Windows Phone 8 support is being launched in beta.
So that as a developer part,Not only does Facebook Login reduce the amount of code you need to write for your app to log in to Facebook, it also improves the user experience by not requiring the user to log in again if they are already logged in to the Facebook app.
Source File at :WindowsPhoneFaceBookSample
Building the Sample
Important note1: Facebook Login is initially being released as part of the Facebook Beta app (version 5.2.2.1). Please read the description below carefully to get up and running.so that If developing and testing on a Windows Phone, make sure you have the latest Facebook Beta app installed (version 5.2.2.1 or higher).
note2: If developing and testing on an emulator, make sure that the Facebook Login Simulator project included in this sample is set to deploy and run.And you cannot install the Facebook app from the Store on an emulator.so that please run this sample in physical device
Description
How ever ,as a windows phone developer we need to follow some few steps for facebook login support
1. Install NuGet packages
Install the latest NuGet packages for the Facebook SDK for .NET.
(or)
Install the Facebook nuget package into the solution by starting the Package Manager powershell by following:
Tools->Library Package Manager->Package Manager console
Once the powershell command prompt is running, type the following two commands
Install-Package Facebook
Install-Package Facebook.Client -pre
These will download the nuget packages and install the SDK into your project and add it to the references.
Note: The -pre flag is applied to the Facebook.Client NuGet package because it is still in preview mode owing to currently being in active development. Once this package is stable, you will not need the -pre flag.
Make sure the latest nuget packages for the Facebook SDK for .NET are installed. See here for more information: http://facebooksdk.net/docs/phone/tutorial/
(or)
Currently you may add facebook dll's by Unzip to a local folder of this sample.
2.Update your app on the Facebook Developers site for APP ID
You also need to enter some information about your app in the Facebook Developers site, for example, identify your application ID in the Windows Phone Store so Facebook can ensure only your app gets access tokens granted by users to your Facebook app.
1. Go to http://developers.facebook.com and log in.
2. Click Apps in the top navigation bar.
3. Select your Facebook app in the left pane (or create a new one if you are starting from scratch).
4. Click edit settings.
5. Under select how your application integrates with Facebook, find the section for Windows App and expand it.
6. Enter exactly the same product ID you entered in your WMAppManifest.xml file, the {ProductID} portion (without dashes) of your msft-{ProductID} custom URI scheme.
Important note: See earlier note on how the product ID is different during development and after submission. This is crucial if you have not yet been assigned a product ID.
Here’s an example of how the Facebook Developers site looks when set up.
3) Configuring your app for Facebook Login
App manifest
Configure your app’s manifest file (WMAppManifest.xml) to register a custom uri scheme that is of the form msft-{ProductID}, where {ProductID} is your app’s product ID (without dashes). It should look like this:
XAML
<Extensions> <Protocol Name="msft-4ce6ab44b7f9442482de17535b713cde" NavUriFragment="encodedLaunchUri=%s" TaskID="_default" /> </Extensions>
Important note: If you have not yet submitted your app to the Windows Phone Store, be aware that the product ID used during development is a randomly assigned placeholder. After your app has been certified, it has a different product ID. In this case, submit your app first to get a product ID assigned, but select the Manual publish option to ensure that you don’t release an app that is not set up correctly on the Facebook Developers site. Once you have your final product ID, make sure you update your WMAppManifest.xml to Use the final product ID rather than the randomly assigned placeholder. See here for more information about the submission process.
4) Lets start with Facebook Login
The facebook app id (this is the ID given by facebook in the developer portal for your app)
C#
privateconststring AppId = "Enter Your APP ID here";
After
Using the Facebook.Client package, make a call toFacebook.Client.FacebookSessionClient.LoginWithApp(). This method has different overloads, which require the following parameters:
- The set of permissions your app is requesting
- A custom state parameter, which is echoed back to your application upon login completion. This can be used to redirect the user back to the original page within your application that initiated login, or any other app specific logic.
So after tap on login button Intially screens appeared like this
After login with facebook beta app,you may see this error ,beacuse your app id is not match with appmanifest product id
After successfully login with facebook beta app,you may redirect to your app.and screen appeareded like
5) How to Share Status Message on faceBook
C#
private async void UpdateStatusButton_OnClick(object sender, RoutedEventArgs e) { var session = SessionStorage.Load(); if (null == session) { return; } this.ProgressText = "Updating status..."; this.ProgressIsVisible = true; this.UpdateStatusButton.IsEnabled = false; try { var fb = new FacebookClient(session.AccessToken); await fb.PostTaskAsync(string.Format("me/feed?message={0}", this.UpdateStatusBox.Text), null); await this.GetUserStatus(fb); this.UpdateStatusBox.Text = string.Empty; } catch (FacebookOAuthException exception) { MessageBox.Show("Error fetching user data: " + exception.Message); } this.ProgressText = string.Empty; this.ProgressIsVisible = false; this.UpdateStatusButton.IsEnabled = true; }
6) How to Handle faceBook Login page launch
C#
public override Uri MapUri(Uri uri) { // if URI is a facebook login response, handle the deep link (once per invocation) if (AppAuthenticationHelper.IsFacebookLoginResponse(uri)) { FacebookSession session = new FacebookSession(); try { session.ParseQueryString(HttpUtility.UrlDecode(uri.ToString())); // Handle success case // do something with the custom state parameter if (session.State != "custom_state_string") { MessageBox.Show("Unexpected state: " + session.State); } else { // save the token and continue (token is retrieved and used when the app // is launched) SessionStorage.Save(session); } } catch (Facebook.FacebookOAuthException exc) { if (!this.facebookLoginHandled) { // Handle error case MessageBox.Show("Not signed in: " + exc.Message); this.facebookLoginHandled = true; } } return new Uri("/MainPage.xaml", UriKind.Relative); } // by default, navigate to the requested uri return uri; }
References:
2)http://facebooksdk.net/docs/phone/tutorial/
3)https://developers.facebook.com/blog/post/2013/11/14/microsoft-adds-facebook-login-support-to-windows-8-and-windows-phone-8/
Related posts:
- WindowsPhone Store 8.1 : FaceBook Integration Sample (C#-Xaml)
- WindowsPhone Facebook Integration:How to post message/image to FaceBook Fan Page(C#-XAML)
- Latest Twitter integration in windows phone 8 c#
Have a nice day by Subramanyam Raju
Hi Raju!!
ReplyDeleteI think your post is awesome and your sample work just fine, but when I try to replicate it following your steps a face one problem. When I try to log to FB a pop-up message pops-out saying: Error Invalid redirect URI, please refer to Facebook login documentation.
I have been looking for some answers of why is happening that with no luck, do you know why could that happen if I am falling your steps rigorously?
Thanks
Hi Juan,
DeleteThanks for your comment,Generally this kind of error is occurred,when we are failure of Step 2,please check it again,make sure your face book app account permissions should be public to visibile. And make sure check once, Enter exactly the same product ID you entered in your WMAppManifest.xml file, the {ProductID} portion (without dashes) of your msft-{ProductID} custom URI scheme.,
(or) i hope if you are fine with above steps.may be problem with your downloaded sample ,so that you may directly download sample from onedrive https://onedrive.live.com/?cid=5f04a15546a742bc&id=5F04A15546A742BC%21136
Hi Raju, great work!
ReplyDeleteJust have one question (edge case).. what if (because I don't know if Facebook app is installed) I want to first try out a scenario of attempted loginWithApp, and in case it isn't installed, move to the loginAsync (through browser). Is this possible..?
Thanks
Joao Cruz
I think its not good to loginAsync though browser.Because here sceneria is different and we need to supply appid to facebook login for app authentication.
DeleteHi ,
ReplyDeleteI didnt understand one part. i.e adding the extension to the appmanifest I am getting an error telling that "Element app has invalid child element"
And without that if I try the login with passing the appid, I get this error message "Invalid redirect URL. Please refer to facebook login documentation".
I wanted to know where I have missed the redirect URL
We can discuss the issue over hangout. My ID is "krarjun90@gmail.com"
Thanks in advance.
Are you done your app in windows phone 8.0 OS?
DeleteHi raju
ReplyDeleteWhen I configure with my app Id it shows developer of this app not set up properly..Any details on how to setup app in fb ...product Id is perfect..
Hi Vinod,
DeleteNow creating new app in facebook having lot of changes.In previously it is having very simple steps.Have you sure about your facebook app approved from fb developer site?
Thanks for your comment,Generally this kind of error is occurred,when we are failure of Step 2,please check it again,make sure your face book app account permissions should be public to visibilefacebook
ReplyDeleteI am very much pleased with the contents you have mentioned. I wanted to thank you for this great article. I enjoyed every little bit part of it and I will be waiting for the new updates.
ReplyDeleteFacebook app development companies