In this article I will explain with an example, how to integrate and implement Twitter Authentication in ASP.Net MVC Razor i.e. Login with Twitter account in ASP.Net MVC Razor.
The Twitter Authentication in ASP.Net MVC Razor will allow users to fetch the Twitter User Account and Profile details like Profile image, Screen Name, Email Address, Twitter Id, Name, Description, Tweets Count, Friends Count and Followers Count using the Free ASPSnippets Twitter API and Twitter OAUTH API.
Note: You can download the latest ASPSnippets.TwitterAPI.dll clicking the download link below.
Download DLL file
Create Twitter Application and get API Key and API Secret
You will need to create an application on Twitter Apps and get an API Key and API Secret.
Namespaces
You will need to import the following namespaces.
using System.Data;
using ASPSnippets.TwitterAPI;
Model
The following is the Model class which will be used to populate the details of the Twitter user.
public class TwitterModel
{
public string ProfileImageUrl { get; set; }
public string Name { get; set; }
public string Id { get; set; }
public string ScreenName { get; set; }
public string Description { get; set; }
public string StatusesCount { get; set; }
public string FollowersCount { get; set; }
public string FriendsCount { get; set; }
public string FavouritesCount { get; set; }
public string Location { get; set; }
public string Email { get; set; }
}
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, the API Key and Secret is set for the ASPSnippets Twitter API. Then a check is made to detect error from Twitter API which occurs when the Twitter user denies access permission to the Twitter App. If the error is found then a message is set into the ViewBag object which is later displayed using JavaScript Alert Message Box.
And if no error found and the user is successfully authorized then the Twitter User Account and Profile details like Profile image, Screen Name, Email Address, etc. are fetched and are returned to the View.
Action method for handling POST operation for Authentication using Twitter Account
This Action method gets called when the Login Button is clicked. The user is redirected to Twitter Authentication page where he is asked to grant the permission to access his details.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
TwitterConnect.API_Key = "<Twitter API Key>";
TwitterConnect.API_Secret = "<Twitter API Secret>";
TwitterModel model = new TwitterModel();
if (TwitterConnect.IsAuthorized)
{
TwitterConnect twitter = new TwitterConnect();
DataTable dt = twitter.FetchProfile();
model.ProfileImageUrl = dt.Rows[0]["profile_image_url"].ToString();
model.Name = dt.Rows[0]["name"].ToString();
model.Id = dt.Rows[0]["Id"].ToString();
model.ScreenName = dt.Rows[0]["screen_name"].ToString();
model.Description = dt.Rows[0]["description"].ToString();
model.StatusesCount = dt.Rows[0]["statuses_count"].ToString();
model.FollowersCount = dt.Rows[0]["followers_count"].ToString();
model.FriendsCount = dt.Rows[0]["friends_count"].ToString();
model.FavouritesCount = dt.Rows[0]["favourites_count"].ToString();
model.Location = dt.Rows[0]["location"].ToString();
model.Email = dt.Rows[0]["email"].ToString();
}
if (TwitterConnect.IsDenied)
{
ViewBag.Message = "User has denied access.";
}
return View(model);
}
[HttpPost]
public EmptyResult Login()
{
if (!TwitterConnect.IsAuthorized)
{
TwitterConnect twitter = new TwitterConnect();
twitter.Authorize(string.Format("{0}://{1}/{2}", Request.Url.Scheme, Request.Url.Authority, "Home/Index/"));
}
return new EmptyResult();
}
}
View
Inside the View, in the very first line the TwitterModel class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The View consists of an HTML Submit Button which when clicked will POST the data to the Login Action method.
There is an HTML Table which is used for displaying the details of the logged in Twitter User.
@model Twitter_Login_MVC.Models.TwitterModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
@using (Html.BeginForm("Login", "Home", FormMethod.Post))
{
<input type="submit" value="Login with Twitter"/>
}
@if(!string.IsNullOrEmpty(Model.Id))
{
<hr/>
<table border="0">
<tr>
<td colspan="2"><u>Logged in Twitter User's Profile</u></td>
</tr>
<tr>
<td style="width: 100px">Profile Image</td>
<td><img src="@Model.ProfileImageUrl"/></td>
</tr>
<tr>
<td>Name</td>
<td>@Model.Name</td>
</tr>
<tr>
<td>Twitter Id</td>
<td>@Model.Id</td>
</tr>
<tr>
<td>Screen Name</td>
<td>@Model.ScreenName</td>
</tr>
<tr>
<td>Description</td>
<td>@Model.Description</td>
</tr>
<tr>
<td>Tweets</td>
<td>@Model.StatusesCount</td>
</tr>
<tr>
<td>Followers</td>
<td>@Model.FollowersCount</td>
</tr>
<tr>
<td>Friends</td>
<td>@Model.FriendsCount</td>
</tr>
<tr>
<td>Favorites</td>
<td>@Model.FavouritesCount</td>
</tr>
<tr>
<td>Location</td>
<td>@Model.Location</td>
</tr>
<tr>
<td>Email</td>
<td>@Model.Email</td>
</tr>
</table>
}
@if (ViewBag.Message != null)
{
<script type="text/javascript">
window.onload = function () {
alert('@ViewBag.Message');
}
</script>
}
</body>
</html>
Screenshots
Twitter App Permission page
![Twitter Authentication MVC: Login with Twitter account in ASP.Net MVC]()
Message displayed when User denies permission
![Twitter Authentication MVC: Login with Twitter account in ASP.Net MVC]()
Successful Twitter Login
![Twitter Authentication MVC: Login with Twitter account in ASP.Net MVC]()
Downloads
