Video Tutorial:
Download Full Source Code:
Download here
Introduction:
In this article, I will explain how to Implement Twitter Authentication in Asp.net MVC Web Application.
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.
Fallow these steps in order to implement “Twitter Sign-in for
your Asp.net MVC application”
Step1: Create API Key and API Secret
In 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 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 = "4xKCmlg4miT3SkO44ND5CSO6e";
string Secret = "Zq41BHnQ1dvlWBmklWCGVmtWUT5M4qwddxBHdxr1CNVQE3DC57";
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 = "4xKCmlg4miT3SkO44ND5CSO6e";
string Secret = "Zq41BHnQ1dvlWBmklWCGVmtWUT5M4qwddxBHdxr1CNVQE3DC57";
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 fallowing 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.
