Question

I been looking at nerd dinner 2.0 and I see that for their openid they like a an ajax request. I know you can’t go full ajax style(ie I can’t stick the webpage in a jquery ui dialog) but you can open another window.

After some time looking at the nerd dinner code I can’t seem to figure out how they do it. I am wondering if anyone has a step by step tutorial on how to do this ajax style openid?

Thanks

Answer 1

I don’t know how it is done in NerdDinner but here’s a step by step tutorial I wrote to illustrate how you could achieve this using jQuery and ASP.NET MVC 3 (Razor view engine):

1. Create a new ASP.NET MVC 3 Project using the Empty template.
2. Using NuGet Add Library Package Reference to the DotNetOpenAuth module (this will reference the proper assembly from the internet and add necessary configuration sections to your web.config).

3. Add a HomeController:

   public class HomeController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }
   }
   

4. and the corresponding ~/Views/Home/Index.cshtml view:

   @{
       ViewBag.Title = "Index";
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
   <script type="text/javascript">
       $(function () {
           $('a#btnlogin').click(function () {
               // Ajaxify the btnlogin action link so that
               // we popup the login form
               // In this example it is a simple HTML injection
               // but here you could get fancy with 
               // animations, CSS, jquery dialogs, 
               // whatever comes a designer's mind
               $('#login').load(this.href);
               return false;
           });
       });
   </script>
   
   <div>
       @TempData["message"]
   </div>
   
   @if (User.Identity.IsAuthenticated)
   {
       <div>
           Welcome @User.Identity.Name. 
           @using (Html.BeginForm("signout", "login", FormMethod.Post))
           {
               <input type="submit" value="SignOut" />
           }
       </div>
   }
   else
   {
       <div>
           You are not authenticated.
           @Html.ActionLink("Signin using OpenId", "index", "login", null, new { id = "btnlogin" })
       </div>
       <div id="login"></div>    
   }
   

5. Next comes the important part the LoginController which will handle the authentication:

   using System.Net;
   using System.Web.Mvc;
   using System.Web.Security;
   using DotNetOpenAuth.Messaging;
   using DotNetOpenAuth.OpenId;
   using DotNetOpenAuth.OpenId.Extensions.SimpleRegistration;
   using DotNetOpenAuth.OpenId.RelyingParty;
   
   public class LoginController : Controller
   {
       public ActionResult Index()
       {
           using (var openid = new OpenIdRelyingParty())
           {
               var response = openid.GetResponse();
               if (response != null)
               {
                   switch (response.Status)
                   {
                       case AuthenticationStatus.Authenticated:
                       {
                           var claimsResponse = response.GetExtension<ClaimsResponse>();
                           var username = response.ClaimedIdentifier;
                           if (claimsResponse != null && !string.IsNullOrEmpty(claimsResponse.Email))
                           {
                               username = claimsResponse.Email;
                           }
                           var cookie = FormsAuthentication.GetAuthCookie(username, false);
                           Response.AppendCookie(cookie);
                           break;
                       }
                       case AuthenticationStatus.Canceled:
                       {
                           TempData["message"] = "Login was cancelled at the provider";
                           break;
                       }
                       case AuthenticationStatus.Failed:
                       {
                           TempData["message"] = "Login failed using the provided OpenID identifier";
                           break;
                       }
                   }
                   return RedirectToAction("index", "home");
               }
               return View();
           }
       }
   
       [HttpPost]
       public ActionResult Index(string loginIdentifier)
       {
           if (string.IsNullOrEmpty(loginIdentifier) || !Identifier.IsValid(loginIdentifier))
           {
               ModelState.AddModelError(
                   "loginIdentifier",
                   "The specified login identifier is invalid"
               );
               // The login identifier entered by the user was incorrect
               // redisplay the partial view with error messages so that 
               // the suer can fix them:
               return View();
           }
           else
           {
               using (var openid = new OpenIdRelyingParty())
               {
                   var request = openid.CreateRequest(
                       Identifier.Parse(loginIdentifier)
                   );
                   request.AddExtension(new ClaimsRequest
                   {
                       Email = DemandLevel.Require
                   });
                   var response = request.RedirectingResponse;
                   if (response.Status == HttpStatusCode.Redirect)
                   {
                       // We need to redirect to the OpenId provider for authentication
                       // but because this action was invoked using AJAX we need
                       // to return JSON here:
                       return Json(new { redirectUrl = response.Headers[HttpResponseHeader.Location] });
                   }
                   return request.RedirectingResponse.AsActionResult();
               }
           }
       }
   
       [Authorize]        
       [HttpPost]
       public ActionResult SignOut()
       {
           FormsAuthentication.SignOut();
           return RedirectToAction("index", "home");
       }
   }
   

6. And the corresponding ~/Views/Login/Index.cshtml partial view:

   @{
       Layout = null;
   }
   <!-- Using the jquery form plugin to Ajaxify my form -->
   <!-- Get from here: http://jquery.malsup.com/form/ -->
   <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {
           $('form').ajaxForm({
               success: function (result) {
                   if (result.redirectUrl) {
                       // if the open id provider was found redirect 
                       // to it so that the user can authenticate
                       window.location.replace(result.redirectUrl);
                   } else {
                       // there was an error => redisplay form
                       $('#login').html(result);
                   }
               }
           });
       });
   </script>
   @using (Html.BeginForm())
   {
       @Html.Label("loginIdentifier", "OpenId: ")
       @Html.TextBox("loginIdentifier", "https://www.google.com/accounts/o8/id")
       @Html.ValidationMessage("loginIdentifier")
       <input type="submit" value="Login" />
   }
   

The example could be easily adapted to web forms view engine if this is what you are using. I’ve also intentionally left the fancy animations and CSS stuff in order to show the basics.