温馨提示:
本文所述内容不具普遍性,可能因操作环境差异而与实际有所出入,故请勿照搬照抄,仅供参考。
腾讯云作为国内领先的云服务提供商,可谓良心满满,前有 Cloud Studio 零成本建站,再有不限时长的免费企业邮箱,还有更多类似一年期免费 SSL、免费 COS 云存储等等福利,今天我们再来看看腾讯企业邮箱免费版。
需求分析
腾讯企业邮箱免费版作为站长扶持福利产品,拥有收费版大部份基础功能,但很多个性化高级功能不支持,其中一项就是自定义登录域名。
自定义登陆域名的意思就是,假如你的域名是 vircloud.net
,那么你可以通过 CNAME 方式将 mail.vircloud.net
指向 exmail.qq.com
,访问 mail.vircloud.net
时可以直接登录邮箱,而不是访问腾讯企业邮官网才能登录。
腾讯云在圈内被称为良心云是有道理的,就像今天说的企业邮箱,虽然免费版不支持自定义登录域名,但是提供了接口,让我们可以自己设计登录界面,实现自定义登录域名的目标。
页面设计
以域名 vircloud.net
、登录域名 mail.vircloud.net
、邮箱 [email protected]
、密码 password
为例。
登录参数
登录接口区分 PC 端和移动端:
客户端 | 接口 | 识别参数 |
---|---|---|
PC | https://exmail.qq.com/cgi-bin/login | aliastype & dmtype |
移动 | https://m.exmail.qq.com/cgi-bin/login | f |
通过 POST
参数实现登录,主要参数有:
参数 | 值 | 范例 |
---|---|---|
domain | 邮箱域名 | vircloud.net |
uin | 邮箱用户名 | support |
pwd | 邮箱密码 | password |
标准登录模板
根据登录参数要求,可通过 form
表格来记录域名 domain
、用户名 uin
、密码 pwd
,当点击登录时 POST
这三个参数值。
参见下列代码:
<html>
<body>
<form method="post" action="" name="form1">
<div>
<div id="client">
</div>
<div>
<input type="text" name="domain" placeholder="域名" value="vircloud.net" />
</div>
<div>
<input type="text" name="uin" placeholder="用户名" value="" />
</div>
<div c>
<input type="password" name="pwd" placeholder="密码" value="" />
</div>
</div>
<ul>
<li><input type="submit" value="登录" name="btlogin" /></li>
</ul>
</form>
</body>
</html>
客户端自适应
腾讯企业邮箱会根据客户端类型自动跳转接口,也就是说,如果你在移动端将登录参数 POST
到 PC 端接口将无法登录,因为 PC 端接口在处理你 POST
过来的参数前,就已经自动跳转到移动端接口,所以我们要在 POST
前先判断访问来源,通过 JavaScript 实现。
参见下列代码:
<script>
var OS = function() {
var a = navigator.userAgent,
b = /(?:Android)/.test(a),
d = /(?:Firefox)/.test(a),
e = /(?:Mobile)/.test(a),
f = b && e,
g = b && !f,
c = /(?:iPad.*OS)/.test(a),
h = !c && /(?:iPhone\sOS)/.test(a),
k = c || g || /(?:PlayBook)/.test(a) || d && /(?:Tablet)/.test(a),
a = !k && (b || h || /(?:(webOS|hpwOS)[\s\/]|BlackBerry.*Version\/|BB10.*Version\/|CriOS\/)/.test(a) || d && e);
return {
android: b,
androidPad: g,
androidPhone: f,
ipad: c,
iphone: h,
tablet: k,
phone: a
}
}();
</script>
自动选择接口
我们已经识别了客户端来源,也知道了 PC 端和移动端的识别参数,接下来要做的就是自动选择接口,实现 PC 端走 PC 端接口,移动端走移动端接口。
参见下列代码:
<script>
if (OS.phone) {
document.form1.action="https://m.exmail.qq.com/cgi-bin/login";
client.innerHTML="<input type=\"hidden\" name=\"f\" value=\"xhtml\" />";
} else {
document.form1.action="https://exmail.qq.com/cgi-bin/login";
client.innerHTML=" <input type=\"hidden\" name=\"aliastype\" value=\"other\" /><input type=\"hidden\" name=\"dmtype\" value=\"bizmail\" />";
}
</script>
个性化登录页面
现在,已经实现了最简单的登录页面制作,并且可以自动根据客户端类型(PC 端、移动端)选择登录接口。
当然了,既然是要自己做一个页面,肯定不能是这么简单的,可以自己设计或者网上找现成的,把上面三段代码相应贴进去即可。
可以参考本站登录页:企业邮箱登录(如果你想直接用我的,可以把域名给我加上去)
登录页面优化
如果域名或账号、密码等漏输了,会自动跳到企业邮登录界面,体验不是那么好,因此我们可以在点登录前先自行检查一番输入信息。
参见下列代码:
<script>
function checkInput() {
var b=document.form1.uin,a=document.form1.pwd,d=document.form1.domain;
if(0==d.value.length) {
d.focus();
return false;
}
if(0==b.value.length) {
b.focus();
return false;
}
if(0==a.value.length) {
a.focus();
return false;
}
document.form1.submit();
setTimeout(" document.form1.pwd.value = '' ",500);
return false;
}
</script>
<form onsubmit="return checkInput()" method="post" action="" name="form1">
到这里,个性化腾讯企业邮箱登录页面已经制作完成。
其实还存在一个隐藏的问题点,就是虽然我们已经实现自动识别来源客户端,并自动选择接口,但实际上我们尚无法得知腾讯企业邮箱究竟是通过什么参数来判断来源的,所以有可能存在客户端误判的情况。
Windows 10Chrome 78.0.3904.108来自 江苏 的大神
大佬,你的演示页面挂掉了啊,这个代码还能用吗?
可以的。但是不能开通安全登录,开通了安全登录必须扫微信才可以
Windows 10Chrome 103.0.0.0来自 湖北 的大神
邮箱登录界面可不可以搬运?
谢谢大佬!
自行搬运
Windows 10Chrome 103.0.0.0来自 湖北 的大神
谢谢大佬!
如果开启了安全登录,后面还是要扫微信,这个要注意下
Windows 10Chrome 103.0.0.0来自 湖北 的大神
okok!!
Windows 10Chrome 103.0.0.0来自 湖北 的大神
请问背景图片怎么换?
通过 css 指定 background-image,我这里是引用了必应壁纸,每日更换。
Windows 10Chrome 103.0.0.0来自 湖北 的大神
谢谢