自定义腾讯企业邮箱登录页面详细教程 - 客户端自适应|支持免费版

小助手读文章 00:00 / 00:00

温馨提示:
本文所述内容不具普遍性,可能因操作环境差异而与实际有所出入,故请勿照搬照抄,仅供参考。

腾讯云作为国内领先的云服务提供商,可谓良心满满,前有 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 端和移动端:

客户端接口识别参数
PChttps://exmail.qq.com/cgi-bin/loginaliastype & dmtype
移动https://m.exmail.qq.com/cgi-bin/loginf

通过 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">

到这里,个性化腾讯企业邮箱登录页面已经制作完成。

其实还存在一个隐藏的问题点,就是虽然我们已经实现自动识别来源客户端,并自动选择接口,但实际上我们尚无法得知腾讯企业邮箱究竟是通过什么参数来判断来源的,所以有可能存在客户端误判的情况。


ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 免费腾讯云福利教程建站腾讯QQ免费邮箱模板自定义良心云 的文章

 本文最后更新于 2020/04/25 18:36:37,可能因经年累月而与现状有所差异

 引用转载请注明: VirCloud's Blog > 建站 > 自定义腾讯企业邮箱登录页面详细教程 - 客户端自适应|支持免费版

精选评论

  1. 擎天柱
    擎天柱 回复

    Windows 10Chrome 78.0.3904.108来自 江苏 的大神

    大佬,你的演示页面挂掉了啊,这个代码还能用吗?

    1. 欧文斯

      可以的。但是不能开通安全登录,开通了安全登录必须扫微信才可以

  2. heheh
    heheh 回复

    Windows 10Chrome 103.0.0.0来自 湖北 的大神

    邮箱登录界面可不可以搬运?
    谢谢大佬!

    1. 欧文斯
      1. heheh
        heheh 回复

        Windows 10Chrome 103.0.0.0来自 湖北 的大神

        谢谢大佬!

        1. 欧文斯
        2. 欧文斯

          如果开启了安全登录,后面还是要扫微信,这个要注意下

          1. heheh
            heheh 回复

            Windows 10Chrome 103.0.0.0来自 湖北 的大神

            okok!!

      2. heheh
        heheh 回复

        Windows 10Chrome 103.0.0.0来自 湖北 的大神

        请问背景图片怎么换?

        1. 欧文斯

          通过 css 指定 background-image,我这里是引用了必应壁纸,每日更换。

          1. heheh
            heheh 回复

            Windows 10Chrome 103.0.0.0来自 湖北 的大神

            谢谢