Enabling Facebook Login in Your Windows Phone Application

Introduction

With the popularity of Facebook at its utmost, it makes sense for application developers to leverage this and provide a way to enable Facebook login in their Windows Phone application.

With Facebook login enabled in a Windows Phone application, users are prompted with the familiar Facebook login button.

Enabling Facebook login in a Windows Phone application involves a number of steps, the first being registering a Facebook application by visiting the Facebook developer portal and obtaining an application ID.

Go to developers.facebook.com and sign into your developer account. Click the link to “Create a new App”.

Create a New App
Create a New App

Specify the details of your application.

Fill in the App Details
Fill in the App Details

Once the application is created, be sure to note the App ID.

App ID
App ID

Next, we create a new Windows Phone application in Visual Studio 2013 called WPFacebookLoginDemo.

New Project
New Project

Once the application is created, install the Facebook client libraries using the NUGET package manager.

Execute the following command on the NUGET console.

PM> Install-Package Facebook.Client –pre
Attempting to resolve dependency 'Facebook (≥ 6.4)'.
Attempting to resolve dependency 'Microsoft.Bcl.Async (≥ 1.0)'.
Attempting to resolve dependency 'Microsoft.Bcl (≥ 1.0.19)'.
Attempting to resolve dependency 'Microsoft.Bcl.Build (≥ 1.0.4)'.
'Facebook.Client 0.8.5-alpha' already installed.
WPFacebookLoginDemo already has a reference to 'Facebook.Client 0.8.5-alpha'.

Next, we will open up the XAML for MainPage and add a reference to the Facebook assembly namespace.

<phone:PhoneApplicationPage
    x:Class="WPFacebookLoginDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:facebookControls="clr-namespace:Facebook.Client.Controls;assembly=Facebook.Client"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.
 
            For example:
 
                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
 
            This binding points to the template's string resource named "ApplicationTitle".
 
            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->
 
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 
        </Grid>
 
        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.
 
            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
    </Grid>
 
</phone:PhoneApplicationPage>

Next, we will add the Facebook login button to the page.

Copy paste the following code within the ContentPanel grid.

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <facebookControls:LoginButton 
    x:Name="fbLoginButton" 
    Grid.Row="2" 
    Margin="50"
    HorizontalAlignment="Right" />
        </Grid>

Your complete XAML for MainPage will look as under (new code is highlighted):

<phone:PhoneApplicationPage
    x:Class="WPFacebookLoginDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:facebookControls="clr-namespace:Facebook.Client.Controls;assembly=Facebook.Client"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.
 
            For example:
 
                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
 
            This binding points to the template's string resource named "ApplicationTitle".
 
            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->
 
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <facebookControls:LoginButton 
    x:Name="fbLoginButton" 
    Grid.Row="2" 
    Margin="50"
    HorizontalAlignment="Right" />
        </Grid>
 
        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.
 
            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
    </Grid>
 
</phone:PhoneApplicationPage>

Next, we will set the application ID property on the Facebook login button to the App ID we saved earlier.

The XAML for your FB login control will be as under:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <facebookControls:LoginButton 
    x:Name="fbLoginButton" 
    Grid.Row="2" 
    Margin="50"
    HorizontalAlignment="Right" ApplicationId="1410684999176197" />
        </Grid>

When working on your application, please be sure to use the AppID of the application you created (do not copy paste the code above).

Next, we add a couple of textblocks, one of which will show the name of the logged in user.

The XAML for the textblocks is below. You can see that we have created a data binding to display the first name of the logged in user.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <facebookControls:LoginButton 
    x:Name="fbLoginButton" 
    Grid.Row="2" 
    Margin="50"
    HorizontalAlignment="Right" ApplicationId="1410684999176197" />
            <TextBlock x:Name="textBlockLoggedInUser" HorizontalAlignment="Left" Margin="282,347,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding CurrentUser.FirstName, ElementName=fbLoginButton}"/>
            <TextBlock HorizontalAlignment="Left" Margin="94,347,0,0" TextWrapping="Wrap" Text="Logged In User" VerticalAlignment="Top"/>
        </Grid>

Our application is now ready to test.

Run the application.

When the application is first run, you will notice that the familiar Facebook login button appears.

Facebook Login Button
Facebook Login Button

Click on the Facebook login button, and you are taken to the Facebook login screen.

Login Screen
Login Screen

Enter your Facebook credentials and click login. If this is the first time you are running the application, you will be prompted to consent to allow the application access to some of your information. After you consent, you will be taken back to the application.

Application
Application

You can see that the Facebook Login button has changed to Facebook Log Out button which indicates that you have logged in. But, why is the application not showing the First Name which we setup in the data binding earlier?

That is because of a bug. If you click Logout and Login again, you will notice that the first name of the logged in user appears.

Logged Out
Logged Out

Logging in again,

User Name Appears
User Name Appears

We now see that the application is displaying the name of the user.

We just finished building a very simple Windows Phone application, which enables Facebook login.

Summary

In this article, we learned about how to enable Facebook login in your Windows Phone applications. I hope you have found this information useful.

About the Author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read