Build Facebook Applications with Silverlight 3 and Silverlight 4 - part 4

[Infragistics] Mihail Mateev / Sunday, April 18, 2010

Part 4 describes how to create an out-of-browser Silverlight application with the Facebook Developer Toolkit

 

To create an out-of-browser Facebook Application with Silverlight API you can follow these steps:

  1. Create a Silverlight Application with the Silverlight API from the Facebook Developer Toolkit
    1. Create a Silverlight application, hosted in an ASP.Net application.
    2. Add the Facebook Connect Components to the ASP.Net application.
    3. Set up the Silverlight project to reference the assemblies from  the Facebook Developer Toolkit.
    4.  Set the static port for our Web Application.
    5. Create a new Facebook application.
    6. Add APIKey and Secret to Web.config of your Web Application.
    7. Instantiating the Facebook Developer Toolkit BrowserSession object and Authenticating the user
    8. Use an Asynchronous API Requests with  Facebook Developer Toolkit 
      1.  Instantiating the Facebook Developer Toolkit BrowserSession object and Authenticating the user
      2.  Get user details with Silverlight API
      3.  Maintain user albums with Silverlight API
  2. Enable running application out of the browser.
  3. Enable connect in out-of browser mode
    1. Enable keep in Isolated storage SessionKey and SesionSecret:
    2. Change Silverlight application ctor to check an  IsRunningOutOfBrowser property.
    3. Changed BrowserSession_LoginCompleted method
  • Create and configure a Silverlight Application:

There are the same steps like described in the part 3 of this article

  • Enable running application out of the browser.

Enable running application out of the browser in Silverlight Application -> Properties -> Silverlight

 

There is no need to require elevated trust when running out of browser except you need to access file system or use COM interop in your  Silverlight  facebook client application:

 

 

  • Enable connect in out-of browser mode

There is a problem to open new browser window via BrowserSession.Login() from Silverlight API from Facebook Developer Toolkit.

It is possible to keep the session key and session secret in the isolated storage  and read it.
lf your out of browser application has no valid session key it is possible via HyperlinkButton in your application to open new browser with URL to log in the facebook.

More information what is a session key you can find there:

http://www.facebook.com/help/?page=887

 

Add the methods to read and save session key and session secret:

 

#region ReadCachedData

private static void ReadCachedData(out string sessionkey, out string sessionSecret)

{

    sessionkey = null;

    sessionSecret = null;

    string data = null;

 

    try

    {

        using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

        {

            using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(CacheFileName, FileMode.Open, isf))

            {

                using (StreamReader sr = new StreamReader(isfs))

                {

                    string lineOfData = String.Empty;

                    while ((lineOfData = sr.ReadLine()) != null)

                        data += lineOfData;

                }

 

                string[] tokens = data.Split('$');

                sessionkey = tokens[0];

                sessionSecret = tokens[1];

            }

        }

    }

    catch (Exception)

    {

        throw;

    }

 

}

#endregion //ReadCachedData

 

#region SaveSessionKey

private void SaveSessionKey()

{

    string data = string.Format("{0}${1}", _browserSession.SessionKey, _browserSession.SessionSecret);

 

    try

    {

        using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

        {

            using (IsolatedStorageFileStream isfs = isf.OpenFile(CacheFileName, FileMode.Create))

            {

                using (StreamWriter sw = new StreamWriter(isfs))

                {

                    sw.Write(data);

                    sw.Close();

                }

            }

        }

    }

    catch

    {

    }

}

#endregion

 

Add Install button and OOBLogin button (it is used when have no a valid session key):

<Button x:Name="Install" Click="Install_Click" Height="30" Width="100" Content="Install App" HorizontalAlignment="Right"></Button>

<HyperlinkButton x:Name="OOBLogin" Height="30" Width="100" BorderThickness="0" TargetName="_blank" NavigateUri="http://localhost:48282/SilverlightFacebookTestPage.aspx" Content="Login" Visibility="Collapsed" HorizontalAlignment="Right"></HyperlinkButton>

 

private void Install_Click(object sender, RoutedEventArgs e)

{

    SaveSessionKey();

    System.Windows.Application.Current.Install();

    Dispatcher.BeginInvoke(() =>

    {

        Install.Visibility = Visibility.Collapsed;

    });

}

 

  

 

Modify the MainPage ctor and BrowserSession_LoginCompleted method:

 

public MainPage()

{

    InitializeComponent();

 

    if (System.Windows.Application.Current.IsRunningOutOfBrowser)

    {

        string sessionKey, sessionSecret;

 

        Install.Visibility = Visibility.Collapsed;

        ReadCachedData(out sessionKey, out sessionSecret);

        if (sessionKey == null)

        {

            LoginButton.Visibility = Visibility.Collapsed;

            OOBLogin.Visibility = Visibility.Visible;

        }

        _browserSession = new CachedSession(ApplicationKey, sessionKey, sessionSecret);

    }

    else

    {

        Install.Visibility = Visibility.Collapsed;

 

 

        _browserSession = new BrowserSession(ApplicationKey, new Enums.ExtendedPermissions[] { Enums.ExtendedPermissions.offline_access });

    }

 

    _browserSession.LoginCompleted += BrowserSession_LoginCompleted;

    _browserSession.LogoutCompleted += BrowserSession_LogoutCompleted;

}

 

 

 

private void BrowserSession_LoginCompleted(object sender, AsyncCompletedEventArgs e)

{

    _fb = new Api(_browserSession);

    ToggleLoginStatus(true);

    this.RefreshInfo();

 

    #region OOB

 

    if (e.Error == null)

    {

        Deployment.Current.Dispatcher.BeginInvoke(new Action(() => LoginButton.Visibility = Visibility.Collapsed));

        Deployment.Current.Dispatcher.BeginInvoke(new Action(() => Install.Visibility = System.Windows.Application.Current.InstallState == InstallState.Installed ? Visibility.Collapsed : Visibility.Visible));

 

        Deployment.Current.Dispatcher.BeginInvoke(

            new Action(

                () =>

                OOBLogin.Content =

                System.Windows.Application.Current.InstallState == InstallState.Installed

                    ? "Launch Browser"

                    : "Login"));

 

    }

    else

    {

        Deployment.Current.Dispatcher.BeginInvoke(new Action(() => LoginButton.Visibility = System.Windows.Application.Current.InstallState == InstallState.Installed ? Visibility.Collapsed : Visibility.Visible));

        Deployment.Current.Dispatcher.BeginInvoke(new Action(() => OOBLogin.Content = System.Windows.Application.Current.InstallState == InstallState.Installed ? "Launch Browser" : "Login"));

        Deployment.Current.Dispatcher.BeginInvoke(new Action(() => OOBLogin.Visibility = System.Windows.Application.Current.InstallState == InstallState.Installed ? Visibility.Visible : Visibility.Collapsed));

    }

     #endregion //OOB

}

 

  • Run the application and install it as an out of browser Silverlight application.

Run the application and log in:

 

 

When application is authorized click the "Install App" to install the application:

 

 Confirm installation of the out of browser application:

 

 

You need to log in with installed out of browser application:

 

 

You can use the installed application as any other desktop application.

This sample application doesn't require any additional permissions to access file system or to use COM automation with other software packages like Microsoft Office. If you need this kind of interaction elevated trust permissions must be added in out of browser settings in your Silverlight application.

 

 

You can download Demo sample there:

 In the part 5 of this article I will write about the anatomy of a Facebook application.