Question

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

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

由于

Answer 1

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

使用Empty模板创建一个新的ASP.NET MVC 3项目。
使用NuGet Add Library Package参考DotNetOpenAuth模块（这将从Internet引用正确的程序集，并在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'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>    
}

接下来是处理身份验证的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" />
}

如果您正在使用此示例，则可以轻松地将该示例调整为Web表单视图引擎。我还故意留下了精美的动画和CSS内容，以展示基础知识。

dotnetopenauth ajax post教程

1 个答案: