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

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 5: Logging in with Twitter

As is the case with Facebook and LinkedIn discussed in previous posts, you need to register with Twitter. This means you have to get a Twitter account. With that account you have to register your application.

  1. Go to https://dev.twitter.com/apps and login with your Twitter account.
  2. Click the Create new application button.
  3. Fill out the form below. To avoid problems later, it makes sense to provide a Callback URL, even though it is not required.

  4. Accept the terms of use (Developer Rules of the Road), enter the Captcha and click the Create your Twitter application button. This will show the Details page shown below.

  5. In the page above notice that Sign in with Twitter has the value No. If you would now try to login users into your application, your server would get a 401 Unauthorized exception. To change this, go to the Settings tab and scroll down to the Application Type section. There you can check the highlighted checkbox in the image below.

  6. Click the Update this Twitter application’s settings button.
  7. Open Visual Studio (if you don’t have already).
  8. Open the project created in Part 1 (or quickly create a project in the same manner).
  9. Find the App_Start folder and open AuthConfig.cs.
  10. Register the identity provider:
    1. In MVC go to the RegisterAuth method and uncomment the following line of code:
      OAuthWebSecurity.RegisterTwitterClient( consumerKey: "", consumerSecret: "");
    2. In WebForms go to the RegisterOpenAuth method and uncomment the following line of code:
      OpenAuth.AuthenticationClients.AddTwitter(
          consumerKey: "your Twitter consumer key",
          consumerSecret: "your Twitter consumer secret");
  11. Replace the place holder text with the Consumer key and Consumer secret shown on the Details page of your application in Twitter (see image under step 4).
  12. Save the file.
  13. Run the project.
  14. Click the Log in link. You will notice Twitter has automatically been added next to the other providers you added under Use another service to log in.
  15. Clicking the Twitter button will send you to Twitter to log in.
  16. Login with a Twitter account on the page shown below. Notice that it is telling the user which application wants you to log in with your Twitter account, and what the application can do once you logged in. Twitter recognizes the application from the Consumer key, and provides the user with the information you entered earlier.

  17. When you sign in you are automatically redirected to the application.

Leave a Reply

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