asp.net-mvc-2 - dotnetopenauth ajax 后期教程

Question

我一直在看书呆子晚餐 2.0，我看到他们的 openid 喜欢一个 ajax 请求。我知道你不能采用完整的 ajax 风格（即我不能将网页粘贴在 jquery ui 对话框中），但你可以打开另一个窗口。

看了一段时间的书呆子晚餐代码后，我似乎无法弄清楚他们是如何做到的。我想知道是否有人有关于如何做这个 ajax 风格的 openid 的分步教程？

谢谢

Answer 1

我不知道它是如何在 NerdDinner 中完成的，但这是我编写的分步教程，以说明如何使用 jQuery 和 ASP.NET MVC 3（Razor 视图引擎）实现这一目标：

1. 使用 Empty 模板创建一个新的 ASP.NET MVC 3 项目。
2. 使用 NuGet 将库包引用添加到DotNetOpenAuth模块（这将引用来自 Internet 的正确程序集并将必要的配置部分添加到您的 web.config）。

3. 添加一个 HomeController：

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

4. 和相应的~/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'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. 接下来是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");
       }
   }
   

6. 以及相应的~/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" />
   }
   

如果您正在使用该示例，则该示例可以很容易地适应 Web 表单视图引擎。我还故意留下了花哨的动画和 CSS 东西，以展示基础知识。