This is the second part of this . This part will now demonstrate how to integrate the facebook connect to our existing website. Be sure to read the Part 1 of this article as we will be using the website that we have created on that part. We will be integrating Facebook Connect on that website.
Prerequisites for Facebook Connect
First and foremost before we can use the Faceboook’s services we need to sign up and setup a Developer application on Facebook. This is the link for . In case you are wondering what is Facebook, Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet. *
* Excerpt from Facebook
After signing up in Facebook read this on how to set up a Facebook Developer Application. These are the minimum fields that we need to fill out in order to use the Facebook connect to our website.
On the Basic Tab fill in the Application Name
On the Authentication Tab fill in the Post-Authorize Callback URL
And the last one, on the Connect Tab fill in the Connect URL
Be sure to take note of the API key and the Application Secret key that the Facebook generated for you as we will be using this later.
After setting up your Facebook Developer Application we need to download the Facebook Developer Toolkit. This is the link to its . There are five files that we need to reference and these are facebook.dll, facebook.web.dll, facebook.web.xml, facebook.xml, and Microsoft.Xml.Schema.Linq.dll
All of the prerequisites are now set up and downloaded.
The Idea
The idea of this is that when a user logins to our website the system should know if that user is logging in using a normal authentication or a facebook authentication. So on this scenario we have two types of user, a normal user and a facebook user. We need a mechanism for both users to login and logout based on what type uf user are they. Once the user has login to the system, our system must also know what type of user it is.
Base on the given idea or logic rules that we give we can code this up now.
Integrating Facebook Connect
Let us open the website that we have just created on the of this article. Then reference the binaries and files that would be: facebook.dll, facebook.web.dll, facebook.web.xml, facebook.xml, and Microsoft.Xml.Schema.Linq.dll from the Facebook Developer Toolkit that we have just downloaded.
We need a mechanism so that our facebook users can login to our website, so open up the Login.aspx page and inside the body tag make the code looked like this.
01. <%--facebook connect js file--%> 02. <script src=""type="text/javascript"></script> 03. <form id="form1" runat="server"> 04. <div> 05. <asp:Login ID="Login1" runat="server"> 06. </asp:Login> 07. or 08. <br /> 09. <%--facebook connect login--%> 10. <fb:login-button length="long"onlogin="window.location='Default.aspx'"> 11. </fb:login-button> 12. </div> 13. </form> 14. <script type="text/javascript"> 15. FB.init("YOUR_API_KEY", "xd_receiver.htm"); 16. </script> Then on your root directory of your website create "xd_receiver.htm". Then copy and paste the code below to it.
01. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"""> 02. <html xmlns=""> 03. <head> 04. <title></title> 05. </head> 06. <body> 07. <!--Do not delete this file. Required by facebook connect.--> 08. <script src="" 09. type="text/javascript"></script> 10. </body> 11. </html> We go to our web.config and add this appSettings.
1. <appSettings> 2. <add key="APIKey" value="YOUR_API_KEY"></add> 3. <add key="Secret" value="YOUR_SECRET_KEY"></add> 4. </appSettings> The next step is that we need to capture the Facebook Connect authentication when the user logins using the Facebook connect. So we need to create a class for this and I just found this where I have copied and pasted the code below.
01. public class ConnectAuthentication { 02. public ConnectAuthentication() { 03. } 04. 05. public static bool isConnected() { 06. return (SessionKey != null && UserID != -1); 07. } 08. 09. public static string ApiKey { 10. get { 11. return ConfigurationManager.AppSettings["APIKey"]; 12. } 13. } 14. 15. public static string SecretKey { 16. get { 17. return ConfigurationManager.AppSettings["Secret"]; 18. } 19. } 20. 21. public static string SessionKey { 22. get { 23. return GetFacebookCookie("session_key"); 24. } 25. } 26. 27. public static int UserID { 28. get { 29. int userID = -1; 30. int.TryParse(GetFacebookCookie("user"), outuserID); 31. return userID; 32. } 33. } 34. 35. private static string GetFacebookCookie(string cookieName) { 36. string retString = null; 37. string fullCookie = ApiKey + "_" + cookieName; 38. 39. if (HttpContext.Current.Request.Cookies[fullCookie] !=null) 40. retString = HttpContext.Current.Request.Cookies[fullCookie].Value; 41. 42. return retString; 43. } 44. } Now we will create a class that will handle what type of user has login, is it a Facebook user or a normal user. Just create a User class and use the code below. You can always extend this one, but I think the properties that are present on our class are the essential ones for now. Feel free to do some modifications to it.
01. public class User { 02. public bool IsFacebookUser { get; set; } 03. public MembershipUser MembershipUser { get; set; } 04. public facebook.Schema.user FacebookUser { get; set; } 05. public string UserName { 06. get { 07. if (IsFacebookUser) { 08. if (FacebookUser != null) returnFacebookUser.name; 09. else return null; 10. } 11. else { 12. if (MembershipUser != null) returnMembershipUser.UserName; 13. else return null; 14. } 15. } 16. } 17. 18. public string FacebookId { 19. get { 20. if (IsFacebookUser) { 21. if (FacebookUser != null) { 22. if (FacebookUser.uid.HasValue) returnFacebookUser.uid.Value.ToString(); 23. else return null; 24. } 25. else return null; 26. } 27. else { 28. return null; 29. } 30. } 31. } 32. 33. public string Email { 34. get { 35. if (IsFacebookUser) { 36. return null; 37. } 38. else { 39. if (MembershipUser != null) returnMembershipUser.Email; 40. else return null; 41. } 42. } 43. } 44. 45. public Guid? UserId { 46. get { 47. if (IsFacebookUser) { 48. return null; 49. } 50. else { 51. if (MembershipUser != null) return newGuid(MembershipUser.ProviderUserKey.ToString()); 52. else return null; 53. } 54. } 55. } 56. 57. } Open up the code behind Default.aspx.cs and paste/create the code below.
01. public partial class _Default : System.Web.UI.Page { 02. protected void Page_Load(object sender, EventArgs e) { 03. if (GetLoggedInUser() == null) { 04. Response.Redirect("~/Login.aspx"); 05. } 06. } 07. 08. public User GetLoggedInUser() { 09. if (Membership.GetUser() != null) { 10. User user = new User(); 11. user.MembershipUser = Membership.GetUser(); 12. user.IsFacebookUser = false; 13. 14. return user; 15. } 16. else if (ConnectAuthentication.isConnected()) { 17. API api = new API(); 18. 19. api.ApplicationKey = ConnectAuthentication.ApiKey; 20. api.SessionKey = ConnectAuthentication.SessionKey; 21. api.Secret = ConnectAuthentication.SecretKey; 22. api.uid = ConnectAuthentication.UserID; 23. 24. //Display user data captured from the Facebook API. 25. facebook.Schema.user facebookUser = null; 26. try { 27. facebookUser = api.users.getInfo(); 28. 29. User user = new User(); 30. user.FacebookUser = facebookUser; 31. user.IsFacebookUser = true; 32. 33. return user; 34. 35. } 36. catch { return null; } 37. } 38. else { 39. return null; 40. } 41. } 42. } The GetLoggedInUser method will be now responsible of returning the currently logon user. Since this returns a "User" object, we can now tell if the logon user is a normal user or a facebook user. We can also get some basic information regarding the logon user like the UserId, Email, UserName and so on.
Then we need to create a logout method. Open Default.aspx and copy/create the code below.
01. <body> 02. <script src="" 03. type="text/javascript"></script> 04. <form id="form1" runat="server"> 05. <div> 06. <% if (GetLoggedInUser().IsFacebookUser) { %> 07. <a href="#"onclick='FB.Connect.logoutAndRedirect("Default.aspx")'>Logout</a> 08. <% } %> 09. <% else { %> 10. <asp:LoginStatus ID="UserLoginStatus" runat="server"LogoutText="Logout" /> 11. <% } %> 12. </div> 13. </form> 14. <script type="text/javascript"> 15. FB.init("YOUR_API_KEY", "xd_receiver.htm"); 16. </script> 17. </body> As you can see we have created a two types of logout button, one is for the facebook users and the other is for the normal users.
That's it! This is the end of the two part article.
Summary
Step 1: Create a website that uses Role and Membership Provider of ASP.Net.
Step 2: Register to facebook. Create a Facebook Developer Application. Download and reference required DLL's.
Step 3: Create a login page that will also enable Facebook users to login, this is by providing a Facebook Connect login button.
Step 4: The system must know what type of user is the current logon user.
Step 5: Create a logout method suitable to the current logon user.
AttachmentSize282.98 KB