App1 - 客户端Web应用程序

Question

我正在尝试在我的asp.net mvc 4应用程序中访问配置文件数据中的Linked。我已经创建了一个链接，用于将数据发布到像这样链接的

获取LinkedIn个人资料

然后在这个动作方法中，我正在创建要发布到链接的url，传递return url

 [AllowAnonymous]
        public ActionResult LinkedIn()
        {
            string APIKey = ConfigurationManager.AppSettings["LiApiKey"];
            string SecretKey = ConfigurationManager.AppSettings["LiSecretKey"];

            _oathClient.RegisterClient(APIKey, SecretKey);


            string redirectURL = _oathClient.Authenticate(new Uri("http://127.0.0.1:81/Account/LinkedInAuthorized"));
            return Redirect(redirectURL);

}

当用户返回此回调函数时，我进行API调用以获取访问令牌：

  [AllowAnonymous]
        public ActionResult LinkedInAuthorized(string code, string state)
        {          
            string returnVal = _oathClient.LinkedInShare(new Uri("http://127.0.0.1:81/Account/LinkedInAuthorized"), code);

 return PartialView("LinkedInProfileInfo", returnVal);
}


 public string LinkedInShare(Uri redirectUri, string authorizationCode)
        {
            var accessCodeUri =
                string.Format(
                    "https://www.linkedin.com/uas/oauth2/accessToken?grant_type=authorization_code&code={0}&redirect_uri={1}&client_id={2}&client_secret={3}",
                    authorizationCode,
                    redirectUri.AbsoluteUri,
                    linkedInApiKey,
                    linkedInSecretKey);

            return LinkedInWebRequest(accessCodeUri);
        }

其中LinkedInWebRequest进行另一个API调用以获取数据等链接。

我的问题是我想从LinkedInAuthorized返回部分视图，但是当LinkedInProfileInfo加载时，它会在整页中打开，替换主视图的内容。

我尝试使用仅限子属性，但这不能作为回调函数使用。我尝试使用renderpartial和render动作html.partial，但所有这些都替换了主视图的内容。

如何将Oauth 2.0 CallBack函数的结果作为局部视图返回？

Answer 1

我找不到您用来验证linkedin的库。所以我继续自己做了一些事情。同样的原则适用于您的情况。当然，您可能需要根据自己的想法调整设计。

出于演示的目的，我以某种方式绕过了传统的登录过程（检查数据库等）; oauth页面是一个简单的表单，接受一个回调网址;它有一个文本框（用于收集键入的用户名）和一个提交按钮，该按钮重定向到calle（App1）中的页面。

请注意“客户端”Web应用程序中的javascript。

App1 - 客户端Web应用程序

WebForm1.aspx的

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.App1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>OAuth</title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div style="margin-left: 15px">
        <h2>Mock Oauth with ASP.NET Webforms</h2>
        <p>Although this example is based on ASP.NET Webforms the principle is the same for an ASP.NET MVC web application</p>
        <p>Button <strong>Authenticate Me</strong> will pop up an iframe in this page which navigates to your authentication provider</p>
        <p>Right click and view the page source to understand the javascript required for the authentication to happen</p>
        <form id="form1" runat="server">
            <div>
                <input id="btnauth" type="button" value="Authenticate Me" class="btn btn-default" />
            </div>
        </form>
        <div id="result" class="well">
            Hello Guest!
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Authenticating...</h4>
                </div>
                <div class="modal-body">
                    <iframe id="auth-iframe" style="width:100%; border:none" src="about:blank"></iframe>
                </div>
                <div class="modal-footer">
                    &nbsp;                    
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="Scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <script>
        var auth_service = 'http://localhost:36535/authenticate.aspx';
        var call_back = '<%= new System.Uri(Page.Request.Url, "/OauthCallback.aspx").AbsoluteUri %>';
        function oAuthBegin() {
            $('#myModal').modal('show');
            $('#auth-iframe').attr('src',
                auth_service + '?callback=' + encodeURI(call_back));
        }

        function oAuthEnd(username) {
            $('#myModal').modal('hide');
            $('#btnauth').attr('disabled', 'disabled');
            $('#result').html("Hello " + username);
        }

        $(function () {
            $('#btnauth').click(function () {
                oAuthBegin();
            });
        });
    </script>
</body>
</html>

请注意，有一个iframe。 iframe将重定向到oauth服务。 oauth服务将重定向到提供的回调网址。这种连线是用javascript本身完成的。

OAuthCallback.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OauthCallback.aspx.cs" Inherits="WebApp.App1.OauthCallback" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>OAuth Callback</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>Patience, you are authenticated as of now...redirecting...</p>
    </div>
    </form>
    <script type="text/javascript" src="Scripts/jquery-2.0.3.min.js"></script>
    <script>
        $(function () {
            var username = '<%= Request.QueryString["username"] %>';
            setTimeout(function () {
                parent.window.oAuthEnd(username);
            }, 5000);
        });
    </script>
</body>
</html>

请注意上面的页面中我称之为oAuthEnd js函数;这在我们的父页面上执行。

App2 - oauth服务模拟

authenticate.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="authenticate.aspx.cs" Inherits="WebApp.App2.authenticate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Enter User Name: <asp:TextBox ID="tbxUserName" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnauth" runat="server" Text="Authenticate" OnClick="btnauth_Click" />
    </div>
    </form>
</body>
</html>

authenticate.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApp.App2
{
    public partial class authenticate : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnauth_Click(object sender, EventArgs e)
        {
            var url = string.Format("{0}?username={1}", Request.QueryString[0], Server.UrlEncode(tbxUserName.Text));
            Response.Redirect(url);
        }
    }
}

一旦我将其上传到某处，就会使用指向可下载解决方案的链接更新此答案...

希望这有帮助。

从asp.net MVC 4控制器返回结果作为局部视图

1 个答案:

App1 - 客户端Web应用程序

WebForm1.aspx的

OAuthCallback.aspx

App2 - oauth服务模拟

authenticate.aspx

authenticate.aspx.cs