51cto docer 架构图 51cto登录

      最近在做一个项目，要求集成到第三方系统中，由于先前没有做过类似的活，所以折腾了几天，蹭着有闲情的时候记录一下。

以下实例，都是我用Asp.net语言进行开发的，关于HTML元素的获取，使用的是Google浏览器。

1. 非Asp.net开发的网站

      我们拿www.51cto.com来做实例，首先进入www.51cto.com，点击登录，就进入到该博客的登录页面。使用Google浏览器，按下F12，找到其表单的action值，可以发现其action值为 http://home.51cto.com/index.php?s=/Index/doLogin，然后点击账号和密码的文本框，右击鼠标，审查元素，分别找到其对应的name值。

下面的代码是账号文本框的html代码，我们要的是其name属性，发现只为email，同样的方法我们可以得到密码的name属性。

<input name="email" type="text" class="login_shuru1" onfocus="this.className='login_shuru2';if (this.value=='用户名/注册邮箱') {this.value=''}" onblur="this.className='login_shuru1';if (this.value=='') {this.value='用户名/注册邮箱'}" value="用户名/注册邮箱">

我们要的基本元素都已经，现在我们就可以模拟登录51cto了，新建一个Asp.net的项目，写上几行html代码，如下

<form action="http://home.51cto.com/index.php?s=/Index/doLogin" method="post" name="_DominoForm" id="form1" >
        <input name="email" id="email" type="hidden" value="[e-mail]" />
        <input name="passwd" id="passwd" type="hidden" value="password" />
</form>

然后再写两行JS代码，进行表单提交

var theForm = document.getElementById('form1');
theForm.submit();

现在运行程序看一下，如果填写的用户名和密码正确的话，发现就已经模拟登录到51cto的网站了。

[多说一句：如果登录失败，和该网站的按钮有点关系，按钮是图片按钮，用审查元素的方法，找到button的name属性，在Form表单下添加下面几行代码就可以了。]

<input type="hidden" name="button" id="button" value="登陆" />
<input type='hidden' name='button.x' id='button.x' value='26' />
<input type='hidden' name='button.y' id='button.y' value='86' />

[PS：这三个的值，似乎不重要，可以随便填的]

2. ASP.net开发的网站

       为何要将Asp.net开发的网站拿出来单独说明，这和它背后的实现技术有关系，详细不说明，直接看实例。我发现博客园正好是用Asp.net开发的，所以我们就拿博客园作为实例来讲，同上面的操作一样，我们进入登录页面找到我们想要的几个元素。

       首先，我们我们写上和1类似的代码，如下

<form action="" method="post" name="form1"
    id="form1">
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="txtPWD" id="tbPassword" value="password" />
</form>

运行程序，我们发现压根就没什么发现，只是进入了一个普通的登录页面而已。细心的朋友应该会发现，其源码中有几个隐藏的div层下的input，分别是__LASTFOCUS、__EVENTARGUMENT、__EVENTTARGET、__VIEWSTATE和__EVENTVALIDATION，我们在这里比较有用的就是__VIEWSTATE和__EVENTVALIDATION这两个玩意儿，所以我们得把代码做个简单的修改，修改后的代码如下所示

<form action="" method="post" name="form1"
    id="form1">
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="txtPWD" id="tbPassword" value="password" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzYzODg2NzZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQtjaGtSZW1lbWJlcm1QYDyKKI9af4b67Mzq2xFaL9Bt" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLWwpqPDQLyj/OQAgK3jsrkBALR55GJDgKC3IeGDE1m7t2mGlasoP1Hd9hLaFoI2G05" />
</form>

有人会问，这两个属性怎么传值，其实很简单，查看源代码，把我们看到的值直接复制过来就行了。OK，我们继续运行程序，发现用户名是传入了，但是还是不能进入系统中，为什么呢？ 进过测试发现是按钮没有传入，所以我们接着改改代码

<form action="" method="post" name="form1"
    id="form1">
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="hidden" id="tbPassword" value="password" />
    <input type="hidden" name="btnLogin" id="btnLogin" value="登陆" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzYzODg2NzZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQtjaGtSZW1lbWJlcm1QYDyKKI9af4b67Mzq2xFaL9Bt" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLWwpqPDQLyj/OQAgK3jsrkBALR55GJDgKC3IeGDE1m7t2mGlasoP1Hd9hLaFoI2G05" />
</form>

再运行程序，就发现已经成功登录了。[PS：如果登录按钮是图片按钮，就要参考1的多说一句里面的代码来完成了]

      传入按钮的方式，除了为按钮赋值，还有一种方式，就是为我们先前提到的__EVENTTARGET，赋值为btnLogin，这个是博客园登录按钮的name值，根据实际情况我们或许需要改改其值。修改后的另外一种代码形式

<form action="" method="post" name="form1" id="form1">
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="btnLogin" />
    <input name="tbUserName" id="tbUserName" type="hidden" value="TowerKing" />
    <input name="tbPassword" type="hidden" id="tbPassword" value="password" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzYzODg2NzZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQtjaGtSZW1lbWJlcm1QYDyKKI9af4b67Mzq2xFaL9Bt" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLWwpqPDQLyj/OQAgK3jsrkBALR55GJDgKC3IeGDE1m7t2mGlasoP1Hd9hLaFoI2G05" />
</form>

 

3. 为了灵活性

      在项目中我们往往需要根据实际情况传入不同的值，这样我们就可以使用JS传入值，在ASP.net中，使用JS调用后台代码是很方便的，其写法形式如下

var actionUrl = "<%= this.GetActionUrl() %>"