Monthly Archives: December 2012

ASP.NET OpenID/OAuth Login With ASP.NET 4.5 – Part 3

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.

Note: Out-of-the-box this only works with WebForms and MVC4. MVC3 is not supported by default.

Part 3: Logging in with Facebook

  1. Login to Facebook.
  2. Go to https://developers.facebook.com/apps.
  3. Click the Create New App button.
  4. Go through the Captcha (if shown).
  5. In the dialog enter the App Name, in my case Michiel’s Security Demo, and a unique namespace. Then click Next (Doorgaan in Dutch).
  6. Next you need to fill out some information about your application. If all is well the Display Name, Namespace, and Contact Email are already prefilled. The only other thing really needed is a Site URL, which appears when you click the top check-icon.
  7. Save the settings to finish up on Facebook.
  8. Open Visual Studio (if you don’t have already).
  9. Open the project created in Part 1 (or quickly create a project in the same manner).
  10. Find the App_Start folder and open AuthConfig.cs.
  11. Register the identity provider:
    1. In MVC go to the bottom of the RegisterAuth method and uncomment the following line of code:
      OAuthWebSecurity.RegisterFacebookClient(
        appId: "",
        appSecret: "");
    2. In WebForms go to the bottom of the RegisterOpenAuth method and uncomment the following line of code:
      OpenAuth.AuthenticationClients.AddFacebook(
        appId: "your Facebook app id",
        appSecret: "your Facebook app secret");
  12. Set the appId and appSecret values in the code with the App ID and App Secret shown on the settings page of your application in Facebook (see image under step 6).
  13. Save the file.
  14. Run the project.
  15. Click the Log in link. You will notice Facebook has automatically been added next to Google (from Part 2) under Use another service to log in.
  16. Clicking the Facebook button will send you to Facebook to log in.
  17. Login with a Facebook account. You will then see a page like the one below. Notice that it is telling the user which application wants you to log in with your Facebook account. Facebook recognizes this from the App ID, and provides the user with the information you entered earlier.
  18. If you click Go To App (Naar app gaan) you’re sent to your website again. This also registers the App with the user, so he/she will not see the second screen again. The App will show up in the user’s account under My Apps, where the user can remove the App if he/she no longer wants to allow logging in through Facebook. This has to do with the fact that by accepting the App, the user also accepts that the App can read some information.
  19. If this is the first login with Facebook, you can create a registration for the Facebook account. Note: if you’re already logged in through the local database or another identity provider, you will be asked to add the Facebook account to your existing account.

ASP.NET OpenID/OAuth Login With ASP.NET 4.5 – Part 2

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.

Note: Out-of-the-box this only works with WebForms and MVC4. MVC3 is not supported by default.

Part 2: Logging in with Google

Enabling your site for users to login with Google is extremely easy. It just requires you to uncomment a single line of code. There is no need for registration with Google or setting up some share secret, as is the case with the other identity providers.

  1. Open Visual Studio (if you don’t have already).
  2. Open the project created in Part 1 (or quickly create a project in the same manner).
  3. Find the App_Start folder and open AuthConfig.cs.
  4. Register the identity provider:
    1. In MVC go to the bottom of the RegisterAuth method and uncomment the following line of code:
      OAuthWebSecurity.RegisterGoogleClient();
    2. In WebForms go to the bottom of the RegisterOpenAuth method and uncomment the following line of code:
      OpenAuth.AuthenticationClients.AddGoogle();
  5. Save the file.
  6. Run the project.
  7. Click the Log in link. You will notice Google has automatically been added under Use another service to log in.
  8. Clicking the Google button will send you to Google to log in, which will show a page like the one below. Notice that it is telling the user which application (gained from URL) wants you to log in with your Google account.
  9. On the next page the user gets to see which information the application will get, in this case only the email address (and in Dutch in my case). The user can also indicate if this permission should be remembered next time.
  10. After clicking the approval button, you’re sent back to the application, where you can create a registration for the Google account. Note: if you’re already logged in through the local database or another identity provider, you will be asked to add the Google account to your existing account.

ASP.NET OpenID/OAuth Login With ASP.NET 4.5 – Part 1

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.

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.

  1. Fire up Visual Studio (Express will work just fine).
  2. From the menu select FILE > New Project…
  3. Select one of the Web Application projects. In this example I’ll use ASP.NET MVC 4 Web Application.
  4. Click OK.
  5. Select Internet Application. This is the only template that includes the OpenID/OAuth stuff by default.
  6. Click OK.
  7. 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:

  1. Modify your hosts-file to contain the desired URL.
  2. Open notepad as Administrator.
  3. Click File > Open and navigate to the C:\Windows\System32\drivers\etc folder.
  4. Select All Files (*.*) as filter so the files with no extension show up, as shown below.
  5. Open the hosts file.
  6. Add a line for IP-address 127.0.0.1 with the domain you want to use with your application, as highlighted below.
  7. Save the file.
  8. 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.
  9. Use the localtest.me domain. This is a very neat trick by some clever guys. They’ve setup a DNS that will route any localtest.me request 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 http://michiel-security-demo.localtest.me.

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:

  1. Start the IIS Manager.
  2. In the Connections pane navigate the tree to the Sites folder.
  3. Right click Sites and select Add Website…
  4. Set the Site name and under Physical path browse for the application folder created by Visual Studio.
  5. Under Host name set the host header, in my case michiel-security-demo.localtest.me.
  6. Click OK.

Now you need to point Visual Studio to use IIS, instead of IIS Express when you debug.

  1. Open your project in Visual Studio (if not already open).
  2. Right click the project and select Properties.
  3. Select the Web tab, and scroll down to where it says Use Local IIS Web server.
  4. Uncheck Use IIS Express.
  5. You will be warned that you can’t use LocalDB with IIS with the dialog below. Click Yes.
  6. Enter the Project Url, in my case http://michiel-security-demo.localtest.me/. The settings now should look like the image below.
  7. Click Save.
  8. 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:

  1. Open Windows Explorer.
  2. Navigate to the application folder.
  3. Right click on the application folder and select Properties.
  4. Go to the Security tab and ensure IIS_IUSRS has read permissions. If so, skip the next steps.
  5. Click Edit…
  6. Click Add…
  7. Enter IIS_IUSRS and click OK.
  8. Click OK twice.