Search This Blog

Tuesday, September 13, 2011

Facebook OAuth authentication for WPF application in C#

Facebook uses OAuth 2.0 for authentication and authorization.This authentication is used to access Facebook data using their Graph API. To access data from Facebook, 3 steps - user authentication, app authorization and app authentication are involved. At the end of the third step, user access token is issued. This is explained in detail here.

The prerequisite from Facebook, for fetching the data using Facebook graph API is, getting the client id. Go to https://developers.facebook.com/apps and click on Create New App button. Just walk through the next button clicks and complete it. Once it is completed, make a note of the App ID.

Next step is to decide what set of permissions are required for the app. http://developers.facebook.com/docs/reference/api/permissions/ link explains in detail about the set of available permissions. They accept comma delimited permissions.

For desktop applications "http://www.facebook.com/connect/login_success.html" is the redirect uri. For web apps, redirect uri has to be mentioned in the Facebook app.

Navigate the browser control to this url - https://graph.facebook.com/oauth/authorize?client_id=<<App Id>>&redirect_uri=<<redirect uri>>&scope=<<comma delimited permissions>>&type=user_agent&display=popup.

The browser control gets navigated to http://www.facebook.com/connect/login_success.html#access_token=<<Access token>>&expires_in=<<Expires in>>&code=<<code>>.

In WPF, there is problem with the System.Windows.Controls.WebBrowser. In the url, the characters after # is ignored. System.Windows.Forms.WebBrowser can capture it. So host it under System.Windows.Forms.Integration.WindowsFormsHost. This comes as handy workaround for it. The complete code looks like this

xmlns:my="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
xmlns:win="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

    <my:WindowsFormsHost>
            <win:WebBrowser x:Name="browser" Navigated="browser_Navigated"></win:WebBrowser>
        </my:WindowsFormsHost>

I have created a sample WPF application which takes the App Id & comma delimited scope as the input and returns Access token & Expiration time in seconds.The Sample project can be downloaded from the link - http://aravindks.codeplex.com/