In Internet Explorer, navigate to https://manage.dev.live.com/Applications/Index

Complete the form to create your application. You can name the application whatever you like.

Note:: If you already have existing Live apps you will need to click to create a new application.

Once your application is create you need to set the redirect domain to the url of the Windows Azure Web SIte you created at the beginning of this demo.

Save the settings and copy the Client ID and Client secret values to the code in the AuthConfig.cs file as shown below.

Next, you will deploy your application to Windows Azure. Right click on the project and click Publish.

Import the publish profile you downloaded ealier and click Publish.

Once the site is published it will open in the browser. Click Log In* and then click Microsoft.

Sign in with your Microsoft Account.

Allow access to the applicatoin by clicking Yes.

Register your account by clicking Register.

You are now logged in with your Microsoft Account.

In Visual Studio, create a new ASP.NET MVC 4 application and select Facebook App.

Select Facebook Application.

Open your web browser and go to https://developers.facebook.com/apps.

Click "Create New App" and enter your app name and namespace.

This name must be unique across Facebook. Also, add an App Namespace. This is the unique part of the URL that people will use to access your Facebook App (e.g. https://apps.facebook.com/{App Namespace}). Click continue.

Next, edit your new Facebook app's canvas settings. Set the Canvas Url to http://localhost:54950/ and set the Secure Canvas Url to http://localhost:54950/.

Now copy the App ID and App Secret values (pictured below).

Close your the Facebook Application you created in the previous steps and open the source\SampleFacebookCanvasApplication.sln solution from this demo.

NOTE: This is a temporary step until the Facebook Applicatoin Template ships in RC form.

Paste the above values into the Web.config in the root of your new Facebook app template as show below.

<appSettings>
  <add key="webpages:Version" value="2.0.0.0" />
  <add key="webpages:Enabled" value="false" />
  <add key="PreserveLoginUrl" value="true" />
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  <add key="Facebook:AppId" value="your_app_id_here" />
  <add key="Facebook:AppSecret" value="your_app_secret_here" />
  <add key="Facebook:AppNamespace" value="your_app_namespace_here" />
  <add key="Facebook:AuthorizationRedirectPath" value="Home/Permissions" />
  <add key="Facebook:VerifyToken:User" value="" />
</appSettings>

Run the application (Ctrl+F5). When the applicatoin first loads you will be prompted to authorize the application. Click Go to App

When you are redirected to the app, you will see a dialog notifying you the the content was blocked due to an invalid certificate. Click Show Content.

This dialog is show because we are using a self-signed SSL certificate for the application. In production you would great a SLL certificate from a trusted authority and your users would not see this issue.

Next you will see a page that informs you that you must grant permissions to the application. Click Grant permissions on Facebook

Click Allow to continue.

You will now see a page that shows your name, profile picture, email, birthday, and a list of 5 friends.

In Visual Studio, open the HomeController.cs.

Talk about the FacebookAuthorize attribute and the FacebookContext. Discuss how the FacebookContext object gives you access to the current user's information such as their user Id and access token. The FacebookContext also gives you access to an instance of FacebookClient that can be used to query Facebook's Graph API.

[FacebookAuthorize("email", "user_birthday")]
public async Task<ActionResult> Index(FacebookContext context)
{
	 if (ModelState.IsValid)
	 {
		  var user = await context.Client.GetCurrentUserAsync<MyAppUser>();
		  return View(user);
	 }

	 return View("Error");
}

Discuss the extention methods that exist in the Microsoft.AspNet.Mvc.Facebook library that enhance the Facebook C# SDK.

This extension menthod allows you to easily query information about the current user. The extension method automatically builds the Graph API query based on the model provided and returns a strongly-typed object.

		  var user = await context.Client.GetCurrentUserAsync<MyAppUser>();
		  return View(user);

Open the MyAppUser.cs object in the Models folder.

Discuss how the properties are automatically mapped and how the attributes provide for filtering of the Graph API. For example, in the object below the FacebookFieldModifier attribute sets the picture to be of type(large) so the url is of the larger size profile picture rather than the default.

public class MyAppUser
{
	 public string Id { get; set; }
	 public string Name { get; set; }
	 public string Email { get; set; }
	 public string Birthday { get; set; }

	 [FacebookFieldModifier("type(large)")] // This help you specify the picture size to large.
	 public FacebookConnection<FacebookPicture> Picture { get; set; }

	 [FacebookFieldModifier("limit(5)")] // This help you limit the friend list to 5, remove it to get all friends.
	 public FacebookGroupConnection<MyAppUserFriend> Friends { get; set; }
}