如何制作自定义wifidog认证页面

本文是新版的关于如何制作自定义认证页面的指南。此新版指南对制作自定义认证页面的方法做了很大的简化。认证的处理使用JavaScript进行了封装，用户无需再关心传入与传出的参数处理。同时，还支持用户使用自己的代码来自定义报错机制。

  • 尽管我们不推荐，但你依然可以参考旧版的指南来制作自定义认证页面。

你需要创建类似以下样例的页面作为自定义认证页面，并请阅读下面的“要点说明”：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<!-- 必须引入AuthPageScript.js -->
<script src="http://cp.wiwiz.com/as/AuthPageScript.js"></script>
<script>
/* 回调函数。“获取验证码”按钮按下后，将自动调用此函数。可根据code值自行改写该函数。 */
function WiwizSmsVerifyMsg(code) {
    if    (code == "-1") {
        alert("手机号码不可为空!");
    } else if(code == "0") {
        alert("验证码已通过短信发送至您的手机，请注意查收。然后请在认证页面输入验证码。");
    } else if(code == "1") {
        alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。");
    } else if(code == "2") {
        alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。");
    } else if(code == "3") {
        alert("该手机号码不允许进行验证。如有疑问请您联系热点管理员。");
    } else if(code == "4") {
        alert("手机号码验证过于频繁，请稍后再试。");
    } else if(code == "5") {
        alert("该手机号码进行验证次数已超过今日上限。");
    } else if(code == "6") {
        alert("热点认证服务已暂停，不可进行手机验证。");
    } else if(code == "7") {
        alert("该热点手机验证次数已超过配额。请联系热点管理员。");
    } else if(code == "8") {
        alert("请求已超时，请刷新认证页面。");
    } else if(code == "9") {
        alert("请使用上一次通过短信接收到的验证码。");
    } else if(code == "99") {
        alert("验证短信发送失败。请检查手机号码的有效性，或联系热点管理员。");
    } else if(code == "999") {
        alert("系统异常，验证短信发送失败。请联系热点管理员。");
    } else {
        alert("系统异常。请联系热点管理员。");
    }
}
/* 回调函数。“认证”按钮按下后，如报错将自动调用此函数。可根据code值自行改写该函数。 */
function WiwizAuthPageError(code) {
    if     (code == 1) {
        alert("您无法使用此网络，除非您认同此协议条款。");
    } else if(code == 2) {
        alert("请输入用户名。");
    } else if(code == 3) {
        alert("用户名或密码错误。");
    } else if(code == 4) {
        alert("电子招待券无效。");
    } else if(code == 5) {
        alert("超过该电子招待券的最大使用人数限制。");
    } else if(code == 6) {
        alert("超过最大在线用户数。");
    } else if(code == 7) {
        alert("请输入手机号码。");
    } else if(code == 8) {
        alert("热点已停用。");
    } else if(code == 32) {
        alert("账户存在异常，暂时锁定中。");
    } else if(code == 35) {
        alert("手机验证码错误或已超时。");
    } else if(code == 36) {
        alert("该手机号码不允许进行验证。如有疑问请您联系热点管理员。");
    } else if(code == 37) {
        alert("该手机号码进行验证次数已超过今日上限。");
    } else {
        alert("未知错误。错误码："+ code);
    }
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="post">
热点介绍文本<br>
使用协议与条款文本...... <br>
<!-- 以下各参数应根据热点的认证方式正确设置 -->
<!-- 参数: agree 代表认同协议 -->
<input name="agree" id="agree" type="checkbox" value="1"  />
<label for="agree">我认同协议</label>
<br>
<!-- 参数: username 代表用户名 -->
用户名:
<input name="username" id="username" type="text" value="" />
<br>
<!-- 参数: pswd 代表密码 -->
密码:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- 参数: encrypt 代表是否对密码加密 -->
<input name="encrypt" id="encrypt" type="checkbox" value="1" checked /><label for="encrypt">加密密码</label>
<br>
<!-- 参数: voucher 代表电子招待券 -->
电子招待券:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- 参数: phonenum 代表手机号码 -->
手机号码:
<input name="phonenum" id="phonenum" type="text" value="" />
<!-- 用于取得发送手机验证码短信的按钮，onclick事件必须调用WiwizSmsVerify()函数
    WiwizSmsVerify()参数说明:
    参数1(必须): 手机号码
    参数2(必须): HotSpot ID
 -->
<input type="button" value="获取验证码" onclick="WiwizSmsVerify(document.getElementById('phonenum').value, WiwizGetQueryParameter('gw_id'));" />
<br>
<!-- 参数: phonecode 代表手机验证码 -->
手机验证码:
<input name="phonecode" id="phonecode" type="text" value="" />
<br>

<!-- 参数: userstring 代表自定义追踪信息 -->
<input name="userstring" id="userstring" type="HIDDEN" value="" />

<!-- 用于开始触发认证的按钮，onclick事件必须调用WiwizStartAuth()函数 -->
<input type="button" name="login" value="   认证   " onclick="WiwizStartAuth();" />
<br>
<!-- 以下是一些非必须的可选链接 -->
<a href="#" onclick="window.open('http://cp.wiwiz.com/as/s/viewhotspot/?gw_id='+ WiwizGetQueryParameter('gw_id')); return false;">更多信息</a>
<a href="http://cp.wiwiz.com/as/s/register/" target="_blank">注册</a>
<a href="http://cp.wiwiz.com/as/s/remindpswd/" target="_blank">忘记密码?</a>
</form>
</body></html>

[要点说明]

  1. 页面HTML代码中必须通过script标签引入AuthPageScript.js。如果你使用的是“自定义认证页面HTML”（而不是“自定义认证页面URL”），那么它的路径应该是”/as/AuthPageScript.js”。
  2. 认证页面样式可自由定义。但用于认证的各表单域必须被包含。包含的用于认证的表单域应与设置热点时的认证规则一致。
  3. “获取验证码”按钮按下时，需调用WiwizSmsVerify()函数方可发送短信。调用后，系统将会自动调用WiwizSmsVerifyMsg()回调函数。用户可根据需要对函数内容由自由重写。
  4. “认证”按钮按下时，需调用WiwizStartAuth()函数方可进行认证。调用后，如有错误，系统将会自动调用WiwizAuthPageError()回调函数。用户可根据需要对函数内容由自由重写。如果没有错误，则自动调用函数WiwizBeforeAuthDone()，它也可以重写。最后，认证通过并跳转到“认证后页面”。

本文章由 http://www.wifidog.pro/2015/03/19/wifidog%E8%AE%A4%E8%AF%81%E9%A1%B5%E9%9D%A2%E5%88%B6%E4%BD%9C.html 整理编辑，转载请注明出处

标签: wifidog认证, wifidog流程, wifidog配置, dd wrt wifidog教程, dd wrt wifidog配置