如何制作自定义认证页面

*此版指南已不再推荐使用, 请参考最新版本.

你需要创建类似以下样例的页面作为自定义认证页面：
HTML示例：

?View Code HTML
<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">
<script>
/* 取得URL参数值 */
function getQueryParameter(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
   var r = window.location.search.substr(1).match(reg);
   if (r!=null) return unescape(r[2]); return null;
}
 
/* 在提交表单前设置必须参数的值 */
function onSubmit() {
	document.getElementById("myform").action = getQueryParameter("srvurl");
	document.getElementById("gw_id").value = getQueryParameter("gw_id");
	document.getElementById("gw_address").value = getQueryParameter("gw_address");
	document.getElementById("gw_port").value = getQueryParameter("gw_port");
	document.getElementById("url").value = getQueryParameter("url");
	return true;
}
</script>
</head>
<body>
 
<form name="myform" id="myform" action="" method="post" onsubmit="return onSubmit();">
 
<!-- 以下4个参数在Form提交时必须指定（参照onSubmit()函数） -->
<input type="hidden" name="gw_id" id="gw_id" />
<input type="hidden" name="gw_address" id="gw_address" />
<input type="hidden" name="gw_port" id="gw_port" />
<input type="hidden" name="url" id="url" />
 
热点介绍文本<br>
使用协议与条款文本...... <br>
 
<!-- 以下各参数应根据热点的认证方式正确设置 -->
 
<!-- parameter: agree -->
<input name="agree" id="agree" type="checkbox" value="1"  />
<label for="agree">我认同协议</label>
<br>
<!-- parameter: username -->
用户名:
<input name="username" id="username" type="text" value="" />
<br>
<!-- parameter: pswd -->
密码:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- parameter: voucher -->
电子招待券:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- parameter: phonenum -->
手机号码: 
<script src="smsverify.js"></script>
<input name="phonenum" id="phonenum" type="text" value="" />
<input type="button" value="获取验证码" onclick="smsVerify(getQueryParameter('srvurl'), document.getElementById('phonenum').value, getQueryParameter('gw_id'));" />
<br>
<!-- parameter: phonecode -->
手机验证码:
<input name="phonecode" id="phonecode" type="text" value="" />
<br>
 
<!-- And, at last, a submit button is necessary -->
<input type="submit" name="login" value="   Start   " />
<br>
<!-- The following links may be useful -->
<a href="#" onclick="window.open('http://cp.wiwiz.com/as/s/viewhotspot/?gw_id='+ getQueryParameter('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>

JSP示例：

?View Code JSP
<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">
</head>
<body>
<!--
设置以下参数的值为同名传入参数的值:
gw_id
gw_address
gw_port
url
 
请求发送URL: 应指定为传入参数srvurl的值
-->
<form action="<%=request.getParameter("srvurl")%>?gw_id=<%=request.getParameter("gw_id")%>&gw_address=<%=request.getParameter("gw_address")%>&gw_port=<%=request.getParameter("gw_port")%>&url=<%=request.getParameter("url")%>" method="post">
热点介绍文本<br>
使用协议与条款文本...... <br>
<!-- parameter: agree -->
<input name="agree" id="agree" type="checkbox" value="1"  />
<label for="agree">我认同协议</label>
<br>
<!-- parameter: username -->
用户名:
<input name="username" id="username" type="text" value="" />
<br>
<!-- parameter: pswd -->
密码:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- parameter: voucher -->
电子招待券:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- parameter: phonenum -->
手机号码: 
<script src="smsverify.js"></script>
<input name="phonenum" id="phonenum" type="text" value="" />
<input type="button" value="获取验证码" onclick="smsVerify('<%=request.getParameter("srvurl")%>', document.getElementById('phonenum').value, '<%=request.getParameter("gw_id")%>');" />
<br>
<!-- parameter: phonecode -->
手机验证码:
<input name="phonecode" id="phonecode" type="text" value="" />
<br>
 
<!-- And, at last, a submit button is necessary -->
<input type="submit" name="login" value="   Start   ">
<br>
<!-- The following links may be useful -->
<a href="http://cp.wiwiz.com/as/s/viewhotspot/?gw_id=<%=request.getParameter("gw_id")%>" target="_blank">更多信息</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>

PHP示例：

?View Code PHP
<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">
</head>
<body>
<!--
设置以下参数的值为同名传入参数的值:
gw_id
gw_address
gw_port
url
 
请求发送URL: 应指定为传入参数srvurl的值
-->
<form action="<?php echo $_GET['srvurl']?>?gw_id=<?php echo $_GET['gw_id']?>&gw_address=<?php echo $_GET['gw_address']?>&gw_port=<?php echo $_GET['gw_port']?>&url=<?php echo $_GET['url']?>" method="post">
热点介绍文本<br>
使用协议与条款文本...... <br>
<!-- parameter: agree -->
<input name="agree" id="agree" type="checkbox" value="1"  />
<label for="agree">我认同协议</label>
<br>
<!-- parameter: username -->
用户名:
<input name="username" id="username" type="text" value="" />
<br>
<!-- parameter: pswd -->
密码:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- parameter: voucher -->
电子招待券:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- parameter: phonenum -->
手机号码: 
<script src="smsverify.js"></script>
<input name="phonenum" id="phonenum" type="text" value="" />
<input type="button" value="获取验证码" onclick="smsVerify('<?php echo $_GET['srvurl']?>', document.getElementById('phonenum').value, '<?php echo $_GET['gw_id']?>');" />
<br>
<!-- parameter: phonecode -->
手机验证码:
<input name="phonecode" id="phonecode" type="text" value="" />
<br>
 
<!-- And, at last, a submit button is necessary -->
<input type="submit" name="login" value="   Start   ">
<br>
<!-- The following links may be useful -->
<a href="http://cp.wiwiz.com/as/s/viewhotspot/?gw_id=<?php echo $_GET['gw_id']?>" target="_blank">更多信息</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>

smsverify.js源码（用于发送手机验证码的短信）

?View Code JAVASCRIPT
function smsVerify(srvurl, phonenum, gw_id, lang) {
	if(phonenum == "") {
		alert("手机号不可为空。");
		return;
	}
 
	if(lang == null || lang == 'undefined')
		lang = "";
 
	var url = srvurl + "?smsverify=1&gw_id="+ gw_id +"&phonenum="+ phonenum +"&lang="+ lang + "&js=1&cb=showMsg";
 
	var script = document.createElement('script');  
	script.setAttribute('src', url);  
	document.getElementsByTagName('head')[0].appendChild(script);  
}
 
function showMsg(resp) {
	if       (resp == "0") {
		alert("验证码已通过短信发送至您的手机，请注意查收。然后请在认证页面输入验证码。");
	} else if(resp == "1") {
		alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。");
	} else if(resp == "2") {
		alert("该热点不允许进行手机号码验证。如有疑问请您联系热点管理员。");
	} else if(resp == "3") {
		alert("该手机号码不允许进行验证。如有疑问请您联系热点管理员。");
	} else if(resp == "4") {
		alert("手机号码验证过于频繁，请稍后再试。");
	} else if(resp == "5") {
		alert("该手机号码进行验证次数已超过今日上限。");
	} else if(resp == "6") {
		alert("热点认证服务已暂停，不可进行手机验证。");
	} else if(resp == "7") {
		alert("该热点手机验证次数已超过配额。请联系热点管理员。");
	} else if(resp == "8") {
		alert("请求已超时，请刷新认证页面。");
	} else if(resp == "9") {
		alert("请使用上一次通过短信接收到的验证码。");
	} else if(resp == "99") {
		alert("验证短信发送失败。请检查手机号码的有效性，或联系热点管理员。");
	} else if(resp == "999") {
		alert("系统异常，验证短信发送失败。请联系热点管理员。");
	} else {
		alert("系统异常。请联系热点管理员。");
	}
}

[页面元素说明]

请求发送URL: 应指定为传入参数srvurl的值

请求发送方式: POST

传入参数说明：

参数名 参数说明 允许值
srvurl 请求发送URL -
gw_id Hotspot ID -
gw_address 网关地址 -
gw_port 网关端口 -
url 原始请求URL -

请求参数说明：

参数名 参数说明 允许值 可选 备注 样例
gw_id Hotspot ID - 否 参数值必须与传入值完全相同 -
gw_address 网关地址 - 否 参数值必须与传入值完全相同 -
gw_port 网关端口 - 否 参数值必须与传入值完全相同 -
url 原始请求URL - 否 参数值必须与传入值完全相同 -
agree 用户选择同意条款 1 是 如热点认证规则设置中未选择“要求认同条款”则无效 1
voucher 电子优惠券 任意字符串 是 如热点认证规则设置中未选择“电子招待券”则无效 VOUCHER2009
username 用户名 任意字符串 是 如热点认证规则设置中未选择“要求登录 ”则无效 john
pswd 密码 任意字符串 是 如热点认证规则设置中未选择“要求登录 ”则无效 58332jsth
lang 语言 en
zh_CN		 是 若此参数为空则自动设定语言，目前暂时只支持en，zh_CN en
zh_CN

Comments are closed.