Google Now Direct Facebook Login Support available With Windows Phone 8 C# | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Tuesday, 4 March 2014

Now Direct Facebook Login Support available With Windows Phone 8 C#

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
Intall Nuget





Install-Package Facebook.Client -pre
Intall Nuget

These will download the nuget packages and install the SDK into your project and add it to the references.
Facebook Reference
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:

1)http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/11/14/sign-into-windows-phone-8-apps-with-facebook-login.aspx

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:
  1. WindowsPhone Store 8.1 : FaceBook Integration Sample (C#-Xaml)
  2. WindowsPhone Facebook Integration:How to post message/image to FaceBook Fan Page(C#-XAML)
  3. Latest Twitter integration in windows phone 8 c#


Have a nice day by 

10 comments:

  1. Hi Raju!!
    I 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

    ReplyDelete
    Replies
    1. Hi Juan,
      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 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

      Delete
  2. Hi Raju, great work!

    Just 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

    ReplyDelete
    Replies
    1. 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.

      Delete
  3. Hi ,

    I 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.

    ReplyDelete
    Replies
    1. Are you done your app in windows phone 8.0 OS?

      Delete
  4. Hi raju
    When 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..

    ReplyDelete
    Replies
    1. Hi Vinod,

      Now 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?

      Delete
  5. 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

    ReplyDelete
  6. I 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.
    Facebook app development companies

    ReplyDelete

Search Engine Submission - AddMe