Integrate OpenAuth/OpenID with your existing ASP.NET MVC4 application

//Integrate OpenAuth/OpenID with your existing ASP.NET MVC4 application

Integrate OpenAuth/OpenID with your existing ASP.NET MVC4 application

By |2012-12-24T15:26:30+00:00December 24th, 2012|Categories: Programming|9 Comments

In this blog I am going to talk about how to integrate OpenAuth/OpenId with your existing asp.net mvc4 application in Visual studio 2012

Step 1: Create a new project

Go to File –> New Project –> Web –> Empty Asp.Net MVC 4 Application

Step 2: Add the following libraries

  • Use Nuget to get the following packages
    • DotNetOpenAuth.AspNet
      • This package is the core package for OAuth/OpenID protocol communication
    • Microsoft.AspNet.Providers.Core
      • This package brings in Universal Providers
    • Microsoft.AspNet.Providers.LocalDb
      • This package sets the connectionstring for the Universal Providers
    • Microsoft.AspNet.Membership.OpenAuth
      • This package provides the extension to integrate OAuth/OpenID with Membership providers

Step 3: Change web.config to use formsauthentication

<authentication mode="Forms">
   <forms loginUrl="~/Auth/Logon" timeout="2880" />
</authentication>

Step 4: Adding AuthConfig

Add a new class called AuthConfig.cs to folder App_Start that class will contains the register functions for all services that we will integrate

Add the following code to AuthConfig.cs and don’t forget to get services Api keys from each service website

public static void RegisterAuth()
        {
            // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
            // you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166

            OAuthWebSecurity.RegisterMicrosoftClient(
                clientId: "",
                clientSecret: "");

            OAuthWebSecurity.RegisterTwitterClient(
                consumerKey: "",
                consumerSecret: "");

            OAuthWebSecurity.RegisterFacebookClient(
                appId: "",
                appSecret: "");

            OAuthWebSecurity.RegisterGoogleClient();

            OAuthWebSecurity.RegisterLinkedInClient(
                consumerKey: "",
                consumerSecret: "");

      OAuthWebSecurity.RegisterYahooClient();
}

Register AuthConfig to application start Go to Global.asax and add the following line to Application_Start function

AuthConfig.RegisterAuth();

Step 5: Adding Login functionality

Add a new controller for Authentication functionality called it AuthController.cs
add Logon Action for login page

public ActionResult Logon()
        {
            return View(OAuthWebSecurity.RegisteredClientData);
        }

as you can notice that we user OAuthWebSecurity.RegisteredClientData as a model that object will contain all registered services that we put at AuthConfig class. Add a markup for login page

@using Microsoft.Web.WebPages.OAuth;
@model ICollection<AuthenticationClientData>

//Add this inside body
<div>
        @using (Html.BeginForm("ExternalLogin", "Auth", new { ReturnUrl = ViewBag.ReturnUrl }))
        {
            @Html.AntiForgeryToken()
            <p>
                @foreach (AuthenticationClientData p in Model)
                {
                    <button type="submit" name="provider" value="@p.AuthenticationClient.ProviderName" title="Log in using your @p.DisplayName account">@p.DisplayName</button>
                }
            </p>
        }
    </div>

as you can notice that we are looping against the services that we already registered in a previous step each AuthenticationClientData represent a service so we create a button to call that service we are adding all the buttons inside single form that calling ExternalLogin action method

add ActionMethod ExternalLogin

 [HttpPost]
 [AllowAnonymous]
 [ValidateAntiForgeryToken]
 public void ExternalLogin(string provider, string returnUrl)
 {
   OAuthWebSecurity.RequestAuthentication(provider, Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
 }

as you can notice its a void action. we are using OAuthWebSecurity.RequestAuthentication this function is requesting the authentication from the requested provider service “Facebook – Twitter – etc.” then it returned to The URL to return to when authentication is successful. we are mentioned “ExternalLoginCallback” as a returned back action

  [AllowAnonymous]
        public ActionResult ExternalLoginCallback(string returnUrl = "")
        {
            AuthenticationResult result = OAuthWebSecurity.VerifyAuthentication(Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));
            if (!result.IsSuccessful)
            {
                return RedirectToAction("ExternalLoginFailure");
            }

            //if (OAuthWebSecurity.Login(result.Provider, result.ProviderUserId, createPersistentCookie: false))
            //{
            //    return RedirectToLocal(returnUrl);
            //}

            if (User.Identity.IsAuthenticated)
            {
                // If the current user is logged in add the new account
                OAuthWebSecurity.CreateOrUpdateAccount(result.Provider, result.ProviderUserId, User.Identity.Name);
                return RedirectToLocal(returnUrl);
            }
            else
            {
                // User is new, ask for their desired membership name
                string loginData = OAuthWebSecurity.SerializeProviderUserId(result.Provider, result.ProviderUserId);
                ViewBag.ProviderDisplayName = OAuthWebSecurity.GetOAuthClientData(result.Provider).DisplayName;
                ViewBag.ReturnUrl = returnUrl;
                OAuthAccount oAuthAccount = new OAuthAccount(result.Provider, result.ProviderUserId);

                return View("ExternalLoginConfirmation", new RegisterExternalLoginModel { UserName = result.UserName, ExternalLoginData = loginData });
            }
        }
 private ActionResult RedirectToLocal(string returnUrl)
        {
            if (Url.IsLocalUrl(returnUrl))
            {
                return Redirect(returnUrl);
            }
            else
            {
                return RedirectToAction("Index", "Home");
            }
        }

First: we have to verify authentication to ensure that the account is successfully authenticated if not redirect users to ExternalLoginFailure action if user is authenticated then we are going to login user to the system using simple membership we are going to talk about that in later posts then check if the current user is logged in add the new account else user is new, ask for their desired membership name then redirect to ExternalLoginConfirmation action with user information at RegisterExternalLoginModel class

 public ActionResult ExternalLoginConfirmation(RegisterExternalLoginModel model)
        {
            return View(model);
        }

RegisterExternalLoginModel

public class RegisterExternalLoginModel
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }

        public string ExternalLoginData { get; set; }
    }

Finally: your application is ready to give it a test

You can download a sample from here

About the Author:

9 Comments

  1. Garth Sebastian 28th January 2013 at 2:33 pm - Reply

    Hi!
    You article is really good for starting, however, I’m not sure if you are willing to help, I’m looking for more detailed version.
    Like I’ve a website and I’m using MySQL database to authenticate users.
    Now what I need is to integrate this OpenAuth with all Four (i.e. FB, Twitter, Google, etc) to register users, but, need to capture their information to be saved in this MySQL database. As of now, I’m using Email address as primary username.

    Hope you will reply about this.

    Thanks
    Garth Sebastian

  2. AnonymousUser 24th April 2013 at 11:21 pm - Reply

    Regarding Step 4: When I generated a new .cs file to go in the App_Start folder, its Build Action was set to “Content” instead of “Compile”. This will not allow you to add the new static class in the Global.asax, but also will not throw an error.

  3. Steve 19th June 2013 at 6:57 pm - Reply

    One of the clearest tutorials there is. Nice one!

  4. Michael 27th June 2013 at 1:20 pm - Reply

    Thanks, that was very clear. I like that you started with an empty project to make us do the code.

  5. Amey 5th July 2013 at 9:09 am - Reply

    Can you please tell me how can i fetch the connections of the logged in profile?

  6. Amr ElGarhy 5th July 2013 at 9:44 am - Reply
    • Amey 5th July 2013 at 12:26 pm - Reply

      thanx but i wanted linkedin specific example..that too in mvc 4
      c#

  7. raj 23rd July 2013 at 2:59 pm - Reply

    i followed all the steps very clearly but find a lot of errors. I have added all the namespaces required but still i find many errors., one of them goes like this
    (Could not load file or assembly ‘DotNetOpenAuth.Core, Version=4.0.0.0, Culture=neutral, PublicKeyToken=2780ccd10d57b246’ or one of its dependencies. The located assembly’s manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)). I am a complete newbie to MVC .

    • raj 25th July 2013 at 8:50 am - Reply

      i got it working Thanks alot

Leave A Comment Cancel reply