ASP.NET MVC 5 Authentication using twitter account

In previous tutorial, I have discussed how to create an application in ASP.NET MVC 5 that enables a user to login using Microsoft account. And now, in this tutorial, I will show you how to create an ASP.NET MVC 5 Authentication Application that enables a user to log in using OAuth 2.0 with some credentials from twitter account.

ASP.NET MVC Two Factor Authentication using Google Authenticator

ASP.NET MVC Authentication using Microsoft Account

In this tutorial, first of all, I will create a new project with MVC template, then create an account in twitter, and then create a new app in twitter account, and then get Consumer Key and Consumer Secret from the app, and then put it in our application’s Startup.Auth.cs file and then just simply run.

How to enable ASP.NET MVC 5 Authentication using twitter account?

This is very simple and easy, just follow the following steps, and get to know how to implement External Authentication provider like twitter.

Step # 1 – Create a new project.

I will implement it in a project that I have already created in the previous tutorial. If you don’t know how to create a new project then just click here to go previous tutorial and get to know how to create a new project.

Step # 2 – Open Startup.Auth.cs File.

All of the information about user Authentication Provider for your project are stored in Startup.Auth.cs file. Just go to Solution Explorer => click on App Start folder => double click on “Startup.Auth.cs” file.

Step # 3 – Enable Microsoft Account Login.

Just go to under ConfigureAuth method and locate the below line and just uncomment it with (Ctrl + K, U).

“app.UseTwitterAuthentication”

At this time you will see there is no value of Client Id and Client Secret.

Step # 4 – Get ASP.NET MVC 5 Web application URL

Go to solution explorer => right click on project name => then choose properties (It will show a new page) => Choose the web from the left pane of the page => Copy the project URL (E.g. http://localhost:49419/ ) from the project URL field.

Step # 5 – Create a new Application on twitter Account

Go to this Link (https://apps.twitter.com  ) and logged In with your Twitter account. Then it will show you a new page “Twitter Apps”. Just click on “Create New App” button. It will show a new page “Create an application”. Then enter all the details of application just as in below screenshot. Enter the name of your app in Name field and then a description of your app, and then enter URL of your ASP.NET MVC 5 app in the website field(Note: – if you are working on localhost then use 127.0.0.1 instead of localhost ). And then enter the URL of your ASP.NET MVC 5 App append with “signin-twitter” in the Callback URL field.  And then click on “Create your Twitter application” button.

Step # 6 – Get Consumer Key and Consumer Secret

After clicking on “Create your Twitter application”, you will see your application page. Just click on “Key and Access Tokens” and then copy Consumer Key and Consumer Secret under the Application Setting label.

Step # 7 – Add the references

Go to Startup.Auth.cs file and then add two libraries just as in the screenshot.

Step # 8 – Add Consumer Key and Consumer Secret into your project

Then just replace the below code with the app.UseTwitterAhthentication method, as in screenshot.

app.UseTwitterAuthentication(new TwitterAuthenticationOptions
{
ConsumerKey = “Enter Your Consumer Key”,
ConsumerSecret = “Enter Your Consumer Secret”,
BackchannelCertificateValidator = new CertificateSubjectKeyIdentifierValidator(new[] {
“A5EF0B11CEC04103A34A659048B21CE0572D7D47”, // VeriSign Class 3 Secure Server CA – G2
“0D445C165344C1827E1D20AB25F40163D8BE79A5”, // VeriSign Class 3 Secure Server CA – G3
“7FD365A7C2DDECBBF03009F34339FA02AF333133”, // VeriSign Class 3 Public Primary Certification Authority – G5
“39A55D933676616E73A761DFA16A7E59CDE66FAD”, // Symantec Class 3 Secure Server CA – G4
“5168FF90AF0207753CCCD9656462A212B859723B”, //DigiCert SHA2 High Assurance Server C‎A
“B13EC36903F8BF4701D498261A0802EF63642BC3” //DigiCert High Assurance EV Root CA
})
});

Step # 9 – Run your application

Now run your application. Go to the login page, and then press the Twitter button just right side of your page.

Then you will see a page that is asking “Authorize Project Sample 1 to use your account”. Then just click on the “Authorize App” button.

Then it will show you a new page that will say you “You’ve successfully authenticated with Twitter” and then will ask you “Please enter a username for this site below and click the register button to finish logging”.

Just enter your email in the email field and then click on register button.

And then finally you will see you are logged in with your Microsoft account.

Summary

Congratulation you have successfully authenticated in ASP.NET MVC 5 App using twitter Account. I hope this will be very helpful for you. Please like and share.