Dotnetopenauth ajax post tutorial

Question

I looked at a botanical dinner 2.0, and I see that for their openid they like the ajax request. I know that you cannot go through the full ajax style (i.e. I cannot insert a web page into the jquery ui dialog), but you can open another window.

After some time, looking at the nerd's dinner code, I cannot understand how they do it. I am wondering if everyone has a step-by-step guide on how to make this ajax openid style?

thank

Answer 1

I don’t know how to do this in NerdDinner, but here is a walkthrough that I wrote to illustrate how you could achieve this using jQuery and ASP.NET MVC 3 (Razor viewer):

• ASP.NET MVC 3 .
• NuGet DotNetOpenAuth ( web.config).

• HomeController:

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

• ~/Views/Home/Index.cshtml :

  @{
      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 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>    
  }
  

• LoginController, :

  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");
      }
  }
  

• ~/Views/Login/Index.cshtml :

  @{
      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" />
  }
  

-, , . CSS, .