做一个属于自己腾讯企业邮箱登录页

hanada.info这个域名其实主要是作为域名邮箱使用的,我用的是腾讯企业邮箱。腾讯企业邮提供了mail.domain.xx的登录方式,但是这个方式要求域名已备案,而且可选的页面模板也十分单调。因此,其实可以自己设计一个页面来登录。要实现这个功能,可以利用腾讯企业邮箱提供的「登录模板」接口,在邮箱管理页面-工具箱-登录模板可以找到。

点击获取代码后,腾讯企业邮箱提供了如下代码

<style>
.bizmail_loginpanel{font-size:12px;width:300px;height:auto;border:1px solid #cccccc;background:#ffffff;}
.bizmail_LoginBox{padding:10px 15px;}
.bizmail_loginpanel h3{padding-bottom:5px;margin:0 0 5px 0;border-bottom:1px solid #cccccc;font-size:14px;}
.bizmail_loginpanel form{margin:0;padding:0;}
.bizmail_loginpanel input.text{font-size:12px;width:100px;height:20px;margin:0 2px;border:1px solid #C3C3C3;border-color:#7C7C7C #C3C3C3 #C3C3C3 #9A9A9A;}
.bizmail_loginpanel .bizmail_column{height:28px;}
.bizmail_loginpanel .bizmail_column label{display:block;float:left;width:30px;height:24px;line-height:24px;font-size:12px;}
.bizmail_loginpanel .bizmail_column .bizmail_inputArea{float:left;width:240px;}
.bizmail_loginpanel .bizmail_column span{font-size:12px;word-wrap:break-word;margin-left: 2px;line-height:200%;}
.bizmail_loginpanel .bizmail_SubmitArea{margin-left:30px;clear:both;}
.bizmail_loginpanel .bizmail_SubmitArea a{font-size:12px;margin-left:5px;}
.bizmail_loginpanel select{width:110px;height:20px;margin:0 2px;}
</style>
<script type="text/javascript" src="http://exmail.qq.com/zh_CN/htmledition/js_biz/outerlogin.js"  charset="gb18030"></script>
<script type="text/javascript">
writeLoginPanel({domainlist:"hanada.info", mode:"vertical"});
</script>

正如上图所示,给出的显示效果非常糟糕。接下来就要开始魔改了

首先提供的代码是通过外部引用js来加载html的,我们只要把这段代码放进页面里,按F12即可获取到整个js调用的html代码。如下

<div id="divLoginpanelVer" class="bizmail_loginpanel">
    <div class="bizmail_LoginBox">
        <h3>登录邮箱</h3>
        <form name="form1" action="https://exmail.qq.com/cgi-bin/login" target="_blank" method="post" onsubmit="return checkInput()">
            <input type="hidden" name="firstlogin" value="false">
            <input type="hidden" name="errtemplate" value="dm_loginpage">
            <input type="hidden" name="aliastype" value="other">
            <input type="hidden" name="dmtype" value="bizmail">
            <input type="hidden" name="p" value="">
            <div class="bizmail_column">
                <label>帐号:</label>
                <div class="bizmail_inputArea">
                    <input type="text" name="uin" class="text" value="">@
                    <span>hanada.info</span>
                    <input type="hidden" name="domain" value="hanada.info">
                </div>
            </div>
            <div class="bizmail_column">
                <label>密码:</label>
                <div class="bizmail_inputArea">
                    <input type="password" name="pwd" class="text" value="">
                </div>
            </div>
            <div class="bizmail_SubmitArea">
                <input type="submit" class="" name="" style="width:66px;" value="登录">
                <a href="https://exmail.qq.com/cgi-bin/readtemplate?check=false&amp;t=bizmail_orz" target="_blank" rel="noopener noreferrer">忘记密码?</a>
            </div>
        </form>
    </div>
</div>

可以观察到提交登录信息的地址是https://exmail.qq.com/cgi-bin/login,账号(不包括后缀)的name是uin,密码的name是pwd,此外域名后缀(@hanada.info)的name为domain,但是被hidden起来了,默认是hanada.info,如果把hidden改为text的化就可以输入任意的域名登录到相应的腾讯企业邮箱了,为了美观我这里依然保持hidden。

另外下面这部分我也搞不太清楚其作用,因此没有改动,他们也不会出现在页面中

<input type="hidden" name="firstlogin" value="false">
    <input type="hidden" name="errtemplate" value="dm_loginpage">
    <input type="hidden" name="aliastype" value="other">
    <input type="hidden" name="dmtype" value="bizmail">
    <input type="hidden" name="p" value="">

了解到其代码的基础结构之后,就可以自定义一个登录表单页面了,我为了方便美观直接搬了KodExplorer(https://kodcloud.com/)的登录界面,他们原来的登录界面可在http://demo.kodcloud.com查看。
照搬之后只要把表单的提交对象改为https://exmail.qq.com/cgi-bin/login,注意建议把 target=”_blank” 去掉,否则登录后会在新窗口打开。


<form action="https://exmail.qq.com/cgi-bin/login" method="post" onsubmit="return checkInput()">

然后改动账号、密码框的name值,

<div class="inputs">
	<div>
		<i class="font-icon icon-user"></i>
		<input type="text" name="uin" type="text" placeholder="邮箱前缀" autocomplete="on">
		<input type="hidden" name="domain" class="text1" value="hanada.info">
	</div>
	<div>
		<i class="font-icon  icon-key"></i>
		<input id="password" name="pwd" type="password" placeholder="邮箱密码" autocomplete="on">
	</div>
</div>

注:为了美观我没让@hanada.info出现,账号输入的是邮箱前缀。

然后把上面那五行input type=”hidden”也复制到相应位置,实测已经可以登入到邮箱了

注:KodExplorer登录页面html引用了一些js导致登录过程出问题,把html底部的js调用删掉即可正常登录。

再改动一下页面的一些文字,删除一些没必要的部分即可正常使用了。最后晒一下我的邮箱登录界面。

暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇