With ASP.NET 4.5 it is very easy to enable users to login to your site with their accounts from Facebook, Google, LinkedIn, Twitter, Yahoo, and Windows Live. In this 7 part series I’ll show you how for each of the identity providers.
- Part 1: Setting up your development environment
- Part 2: Logging in with Google
- Part 3: Logging in with Facebook
- Part 4: Logging in with LinkedIn
- Part 5: Logging in with Twitter
- Part 6: Logging in with Yahoo
- Part 7 : Logging in with Windows Live
Note: Out-of-the-box this only works with WebForms and MVC4. MVC3 is not supported by default.
Part 1: Setting up your development environment
Create a website project in Visual Studio
You’re going to need a website project for any of this to work, and you may have to configure some of it later. So first, let’s create a project.
- Fire up Visual Studio (Express will work just fine).
- From the menu select FILE > New Project…
- Select one of the Web Application projects. In this example I’ll use ASP.NET MVC 4 Web Application.
- Click OK.
- Select Internet Application. This is the only template that includes the OpenID/OAuth stuff by default.
- Click OK.
- The project is ready. You may want to run it once just to make sure everything works. Be sure to click Register and then register for an account to see if the database is working.
Setting up your development environment
In most cases you need to register you website with the identity provider to be able to authenticate users with that identity provider. The provider will ask for several pieces of information, most notably a URL. The problem is that this can’t be an IP-address, and can’t be localhost. Most identity providers also don’t allow a port number, so you will have to ensure that your development website can be reached at port 80 (or port 443) and on a valid URL.
Getting a valid URL
Getting a valid URL is mainly about using a domain that an identity provider will recognize as valid and public. You can get one setup for your application in three ways:
- Modify your hosts-file to contain the desired URL.
- Open notepad as Administrator.
- Click File > Open and navigate to the
- Select All Files (*.*) as filter so the files with no extension show up, as shown below.
- Open the hosts file.
- Add a line for IP-address 127.0.0.1 with the domain you want to use with your application, as highlighted below.
- Save the file.
- Use a public domain of your own and modify add a DNS entry for your application. How this works depends on your hosting provider, so I won’t elaborate in this.
- Use the
localtest.medomain. This is a very neat trick by some clever guys. They’ve setup a DNS that will route any
localtest.merequest to 127.0.0.1, your local computer. That includes the root domain itself, but any subdomain or sub-sub domain (or sub-sub-sub domain… you get the idea), will work. The only domain that doesn’t work is http://readme.localtest.me, because that’s where you can find the documentation and background. The great thing is that this works without registering or anything. For my demo’s I will use
Setting up IIS
Besides having a public domain, your application needs to run on port 80. Although this is possible with IIS Express, it is much easier using IIS (if you want to tinker with IIS Express, check Scott Hanselman’s post Working with SSL at Development Time is easier with IISExpress). The one proviso is that IIS can’t work with LocalDB, so you will have to use SQL Server (Express) instead. For the description below I will assume you have SQL Server Express installed. The best way to go about this is creating a new Web Site in IIS with a custom host header. The steps are easy:
- Start the IIS Manager.
- In the Connections pane navigate the tree to the Sites folder.
- Right click Sites and select Add Website…
- Set the Site name and under Physical path browse for the application folder created by Visual Studio.
- Under Host name set the host header, in my case michiel-security-demo.localtest.me.
- Click OK.
Now you need to point Visual Studio to use IIS, instead of IIS Express when you debug.
- Open your project in Visual Studio (if not already open).
- Right click the project and select Properties.
- Select the Web tab, and scroll down to where it says Use Local IIS Web server.
- Uncheck Use IIS Express.
- You will be warned that you can’t use LocalDB with IIS with the dialog below. Click Yes.
- Enter the Project Url, in my case http://michiel-security-demo.localtest.me/. The settings now should look like the image below.
- Click Save.
- Start the project in debug mode to verify that everything is working under the specified URL.
Although IIS points to the right folder, it needs permissions to read the folder. If that is not the case, you will get a HTTP 500.19 error when you run the application. You can solve this as follows:
- Open Windows Explorer.
- Navigate to the application folder.
- Right click on the application folder and select Properties.
- Go to the Security tab and ensure IIS_IUSRS has read permissions. If so, skip the next steps.
- Click Edit…
- Click Add…
- Enter IIS_IUSRS and click OK.
- Click OK twice.