Login with Twitter account in Asp.net MVC

Introduction:

In this article, I will explain how to login with the Twitter account in Asp.net MVC Web Application.

In My previous Article, I have explained fallowing Authentication methods in MVC

How to login with Google account API in Asp.net MVC – 5

How to login with Facebook in Asp.net MVC

Here I will use Visual Studio 2013 and MVC 5 in my Asp.net Web Application.

Enable an Authentication or sign in with their Twitter account, you will need to register an application in Twitter Application Management. After you have register the application you can use the Consumer Key (API Key) and Consumer Secret (API Secret) supplied by Twitter.

Ok, let’s start Asp.net MVC Twitter authentication

Follow these steps in order to implement “Twitter Sign-in for your Asp.net MVC application”

Step1:  Create API Key and API Secret

In the first step Create New App in Twitter Application Management for use Twitter authentication service. Make sure you must have to login with your account.

Firstly click on ‘Create New App’

In the ‘New App’ dialog, write you project Name, Description, and Website.

Click on to ‘Create your Twitter Application’ button to create your Application.

In next step, we find API key and API Secret.

Now we go to our Web Application project.

Step2: Create New Project.

 Go to File > New > Project > Web > Asp.net MVC web project > Enter Application Name > Select your project location > click to add button > It will show new dialog window for select template > here we will select empty project > then click to ok

Step3: Create a Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Template "empty MVC Controller"> Add.

Here I have created a controller "HomeController"

Now we will add a view for Index action (which is already added in the home controller) where we will implement Twitter account authentication.

Step4: Add view for Index action.

Right Click on Action Method (here right click on Index action) > Add View > Enter View Name > Select "Empty" under Template dropdown > Check use a layout page > Add.

Step5: Install TweetSharp Library.

Go to ‘Package Manager Console’, Type ‘Install-Package TweetSharp-Unofficial’ and hit Enter.

Step6: Add a method for Twitter Authentication in HomeController

Add a GET method ‘TwitterAuth’ in the HomeController

[HttpGet]
        public ActionResult TwitterAuth()
        {
            string Key = "Twitter API Key";
            string Secret = "Twitter API Secret";

            TwitterService service = new TwitterService(Key, Secret);

            OAuthRequestToken requestToken = service.GetRequestToken("http://localhost:33916/Home/TwitterCallback");

            Uri uri = service.GetAuthenticationUrl(requestToken);

            return Redirect(uri.ToString());
        }

Step7: Add method for fetch User profile data in Home Controller

Now we create a method in HomeController for fetching User’s data.

public ActionResult TwitterCallback(string oauth_token, string oauth_verifier)
        {
            var requestToken = new OAuthRequestToken { Token = oauth_token };

                        string Key = "Twitter API Key";
            string Secret = "Twitter API Secret";

            try
            {
                TwitterService service = new TwitterService(Key, Secret);

                OAuthAccessToken accessToken = service.GetAccessToken(requestToken, oauth_verifier);

                service.AuthenticateWith(accessToken.Token, accessToken.TokenSecret);

                VerifyCredentialsOptions option = new VerifyCredentialsOptions();

                TwitterUser user = service.VerifyCredentials(option);
                TempData["Name"] = user.Name;
                TempData["Userpic"] = user.ProfileImageUrl;
               
                return View();
            }
            catch
            {
                throw;
            }

        }

Now entire HomeController file will be as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TweetSharp;

namespace Twitter_Login.Controllers
{
    public class HomeController : Controller
    {
     
       
        [HttpGet]
        public ActionResult TwitterAuth()
        {
            string Key = "Twitter API Key";
            string Secret = "Twitter API Secret";

            TwitterService service = new TwitterService(Key, Secret);

            OAuthRequestToken requestToken = service.GetRequestToken("http://localhost:33916/Home/TwitterCallback");

            Uri uri = service.GetAuthenticationUrl(requestToken);

            return Redirect(uri.ToString());
        }

        public ActionResult TwitterCallback(string oauth_token, string oauth_verifier)
        {
            var requestToken = new OAuthRequestToken { Token = oauth_token };

            string Key = "Twitter API Key";
            string Secret = "Twitter API Secret";

            try
            {
                TwitterService service = new TwitterService(Key, Secret);

                OAuthAccessToken accessToken = service.GetAccessToken(requestToken, oauth_verifier);

                service.AuthenticateWith(accessToken.Token, accessToken.TokenSecret);

                VerifyCredentialsOptions option = new VerifyCredentialsOptions();

                TwitterUser user = service.VerifyCredentials(option);
                TempData["Name"] = user.Name;
                TempData["Userpic"] = user.ProfileImageUrl;
               
                return View();
            }
            catch
            {
                throw;
            }

        }
        public ActionResult Index()
        {
            return View();
        }
      

    }
}

Step8: Create View for TwitterCallback method

Now we need to add View for  ‘TwitterCallback’ method and add fallowing html

@{

    Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>TwitterCallback</title>

</head>

<body>

    <div>

        <h1>Welcome @TempData["Name"]</h1>

        <br />

        <img src="@TempData["Userpic"]" style="width:100px;height:100px;" />

       

    </div>

</body>

</html>

Step9: Call TwitterAuth from Index View

Now I will call ‘TwitterAuth’ method from Index View

Add following HTML in your Index View

 @using (Html.BeginForm("TwitterAuth", "Home", FormMethod.Get))

        {

            <br />

            <button  type="submit" id="twitter">Login with Twitter</button>

        }  

Step6: Run Application

We have done all steps. Now it’s time to run the application.