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.

Leave a Reply

Your email address will not be published. Required fields are marked *