dotnetopenauth ajax投稿チュートリアル

Question

私はオタクの夕食2.0を見ていました。彼らのopenidのために、彼らはアヤックスのリクエストが好きです。私はあなたが完全なajaxスタイルに行くことができないことを知っています（つまり、jquery UIダイアログにWebページを貼り付けることはできません）が、別のウィンドウを開くことができます。

オタクの夕食のコードを見て、私は彼らのやり方を理解できないようです。私は誰かがこのajaxスタイルのopenidを行う方法についてのステップ・チュートリアルのステップがあるのだろうかと思っていますか？

おかげ

Answer 1

私はそれがNerdDinnerで行われている方法を知っているが、ここで私はあなたがこの使用してjQueryとASP.NET MVC 3（レイザー・ビュー・エンジン）を達成できる方法を示すために書いたステップのチュートリアルバイステップだありません。

1. 空のテンプレートを使用して新しいASP.NET MVC 3プロジェクトを作成します。
2. DotNetOpenAuthモジュールへのNuGetライブラリパッケージの参照の使用（これはインターネットから適切なアセンブリを参照し、web.configに必要な構成セクションを追加します）。

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

3. と対応~/Views/Home/Index.cshtmlビュー：

4. にHomeControllerを追加

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

5. ：

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

6. 次の重要な部分が来るの認証を処理しますLoginController

   と、対応する~/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を残しました。