When Written: Oct 2011
Whilst at the Bridge Championships I get some spare time in between meetings and as I don’t play Bridge so I use the time to try out some new ideas. One such idea came from a client who would like to offer extended services on their website to users who registered with them. Now the problem with suggesting that your users register is that they are often resistant to registering with yet another web site. The exception to this is the case where they absolutely have to – for example, an ecommerce site where it is accepted that at least you will have to enter your details if you what to get the items. With other sites it is much more difficult to get people to register and even more difficult for these people to remember their login details if they only visit occasionally. The desire to make people register is for the collection of real people’s details rather than the anonymous data that web stats gives you. After all, that this data is much more valuable to companies who want to market to these people. So how do you make it easier for them to register on your site? One way would be to allow them to log in to your site with the details from an existing site that they may already be logged into. A system such as this we worked on back in the early days at Infernet but the time was too soon. Microsoft tried it with their ‘Passport’ offering which was one of the few parts from their failed, misguided ‘Hailstorm’ vision of a connected world. Passport went on to become ‘Live login’ which you can use with your own web site if you wish.
The rise of social networks and in particular Facebook with its API meant that offering a method of logging into your web site by inviting a user to enter their Facebook log in would mean that if the user is currently logged into Facebook and then subsequently visit your site then they will not have to log in separately. Facebook offers quite a bit of advice on how to do this in their developer area (https://developers.facebook.com/ ). However, if your site uses Microsoft technologies then there is now a very easy route to building the code necessary. First if you don’t already have it, download the free web development tool called ‘Web Matrix’ from (http://www.microsoft.com/web/webmatrix). Next you need to create a sample site using the ‘simple site’ template. Most of the code for membership services will be automatically created. We just now need to implement the standard .Net membership login.
Now create a new cshtml page and call it SecuredPage.cshtml and add the following code to it:
@if (!WebSecurity.IsAuthenticated) {
Response.Redirect("~/Account/Login");
}
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "About My Site";
}
This code will check to see if the user has been authenticated by the web site: if not the user will be redirected to the login page. If all you want to do is to use .Net membership services then your work is done. A quick test will bring up a login page and if you fill this in a new user is created in the project’s database. If, however, you want the user to be able to log in with their Facebook account we need to do a bit more work, and as that is the point of this bit of the article we shall continue. Rather than write a whole pile of supporting code to enable Facebook integration, WebMatrix comes with a number of ‘Helper’ packages.
Microsoft’s Web Matrix is starting to become a useful development tool with the NuGet helper packages
These packages called NuGet provide a great deal of extra functionality including connection to Twitter and Flickr feeds. To access the one we want you need to click on the “ASP .NET Web Pages Administration” and then do a search for ‘Facebook’ as there are so many to scroll through otherwise. When you have found the correct package click on the install button and you will see a series of folders added to your project.
For the next stage you need to visit the Facebook site and register as a developer by going to https://developers.facebook.com and once this is done you can create an app, and after asking for a name for your app there will be a short delay and the App ID and the App Secret number are generated and displayed. You will need these two references for the web site you are building. The final part of the Facebook side of building your app is for you to select how your app will integrate with Facebook. For this example you need to click on ‘website’ and enter the site URL of the web site that you are building which will probably be something like ‘http://localhost:51023’ if you are testing locally. If not, then a full URL will be required.
Now head back to Web Matrix and open the file _AppStart.cshtml file, you should see a line of code like:
@{
Facebook.Initialize("Facebook app Id here", "app secret here","StarterSite");
}
Replace the entries with your Facebook App ID and the app secret key; these codes make sure that only your application will talk to Facebook in this way.
All this code is very well but we now need a button for users to click on to log into your site via Facebook. The best place for this code is on the Master Page that provides the template for all the other pages of the site, as that way the button should appear on all pages. So open up _SiteLayout.cshtml, this is the equivalent to a ‘Master Page’ on ASP .NET. Underneath the existing login buttons place the code :
@Facebook.GetInitializationScripts()
@Facebook.LoginButton("~/Account/Register")
The first line of this code initializes the Facebook JavaScript SDK whilst the second line actually renders the button. This code will redirect the user after logging in via Facebook to a form on your web site so that you can capture extra information about the user.
The final job to do is to associate the user’s Facebook account with your website user account and for that all that is required is to add a query to insert the Facebook account details into the local database’s UserProfile table. So on the Register.cshtml page you need to add the following bit of code after the piece of code that checks if the user exists.:
db.Execute("INSERT INTO UserProfile (Email) VALUES (@0)", email);
Facebook.AssociateMembershipAccount(email);
The ‘AssociateMembershipAccount()’ method takes the user name that is to be associated with the Facebook account and adds this to the webpages_FacebookCredentials table that was created when you installed the Facebook package. You now have the ability for users to log into to your web site with their Facebook account, hopefully making the process for your users to register a little less onerous and hence – also hopefully – more of them will register with your site. There are many other ways of achieving this result and the Facebook developers’ area has many suggestions, however I thought it would be good to show some of the capabilities of an often under-used tool such as Web Matrix which, incidentally, is due for a new version soon.
Article by: Mark Newton
Published in: Mark Newton