How To Make A User Customized Authentication Page

*This version is out of date, please take a reference to the new version.

You need to make a page like the following one:

Sample in 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>
/* Gets an URL parameter */
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;
}
 
/* Set the values of required parameters before submit */
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();">
 
<!-- the following 4 parameters are required -->
<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" />
 
Some Text<br>
Agreements or Terms ...... <br>
 
<!-- the following parameters should be set properly according to your Authentication Method -->
 
<!-- parameter: agree -->
<input name="agree" id="agree" type="checkbox" value="1"  />
<label for="agree">I Agree</label>
<br>
<!-- parameter: username -->
UserName:
<input name="username" id="username" type="text" value="" />
<br>
<!-- parameter: pswd -->
Password:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- parameter: voucher -->
Please Input a Voucher Code if you have one:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- parameter: phonenum -->
Mobile: 
<script src="smsverify.js"></script>
<input name="phonenum" id="phonenum" type="text" value="" />
<input type="button" value="Verify" onclick="smsVerify(getQueryParameter('srvurl'), document.getElementById('phonenum').value, getQueryParameter('gw_id'));" />
<br>
<!-- parameter: phonecode -->
Verification Code:
<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;">More Info About This Hotspot</a>
<a href="http://cp.wiwiz.com/as/s/register/" target="_blank">Register</a>
<a href="http://cp.wiwiz.com/as/s/remindpswd/" target="_blank">Forgot Password ?</a>
</form>
</body></html>

Sample in 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>
<!--
Just leave the values of the following parameters as they are:
gw_id
gw_address
gw_port
url
 
URL of Request: value of parameter "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">
Some Text<br>
Agreements or Terms ...... <br>
<!-- parameter: agree -->
<input name="agree" id="agree" type="checkbox" value="1"  />
<label for="agree">I Agree</label>
<br>
<!-- parameter: username -->
UserName:
<input name="username" id="username" type="text" value="" />
<br>
<!-- parameter: pswd -->
Password:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- parameter: voucher -->
Please Input a Voucher Code if you have one:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- parameter: phonenum -->
Mobile: 
<script src="smsverify.js"></script>
<input name="phonenum" id="phonenum" type="text" value="" />
<input type="button" value="Verify" onclick="smsVerify('<%=request.getParameter("srvurl")%>', document.getElementById('phonenum').value, '<%=request.getParameter("gw_id")%>');" />
<br>
<!-- parameter: phonecode -->
Verification Code:
<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">More Info About This Hotspot</a>
<a href="http://cp.wiwiz.com/as/s/register/" target="_blank">Register</a>
<a href="http://cp.wiwiz.com/as/s/remindpswd/" target="_blank">Forgot Password ?</a>
</form>
</body></html>

Sample in 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>
<!--
Just leave the values of the following parameters as they are:
gw_id
gw_address
gw_port
url
 
URL of Request: value of parameter "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">
Some Text<br>
Agreements or Terms ...... <br>
<!-- parameter: agree -->
<input name="agree" id="agree" type="checkbox" value="1"  />
<label for="agree">I Agree</label>
<br>
<!-- parameter: username -->
UserName:
<input name="username" id="username" type="text" value="" />
<br>
<!-- parameter: pswd -->
Password:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- parameter: voucher -->
Please Input a Voucher Code if you have one:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- parameter: phonenum -->
Mobile: 
<script src="smsverify.js"></script>
<input name="phonenum" id="phonenum" type="text" value="" />
<input type="button" value="Verify" onclick="smsVerify('<?php echo $_GET['srvurl']?>', document.getElementById('phonenum').value, '<?php echo $_GET['gw_id']?>');" />
<br>
<!-- parameter: phonecode -->
Verification Code:
<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">More Info About This Hotspot</a>
<a href="http://cp.wiwiz.com/as/s/register/" target="_blank">Register</a>
<a href="http://cp.wiwiz.com/as/s/remindpswd/" target="_blank">Forgot Password ?</a>
</form>
</body></html>

Source Code of “smsverify.js” (to send Verification Code with SMS Text)

?View Code JAVASCRIPT
function smsVerify(srvurl, phonenum, gw_id, lang) {
	if(phonenum == "") {
		alert("Mobile Number is empty!");
		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("An SMS text with a Verification Code has been sent onto your mobile phone. Then enter the code once you received the SMS text.");
	} else if(resp == "1") {
		alert("Mobile phone verification is not permitted. Please contact the administrator of this hotspot if you have any question.");
	} else if(resp == "2") {
		alert("Mobile phone verification is not permitted. Please contact the administrator of this hotspot if you have any question.");
	} else if(resp == "3") {
		alert("This phone number is in black list. Please contact the administrator of this hotspot if you have any question.");
	} else if(resp == "4") {
		alert("Verification is being done too frequently. Please try it later.");
	} else if(resp == "5") {
		alert("The times of verification has exceeded the daily limit.");
	} else if(resp == "6") {
		alert("The hotspot is out of service.");
	} else if(resp == "7") {
		alert("The hotspot has exceeded the quota of sending SMS. Please contact the administrator of this hotspot.");
	} else if(resp == "8") {
		alert("Request is expired. Please reload this page.");
	} else if(resp == "9") {
		alert("Please use the last Verification Code in your SMS texts.");
	} else if(resp == "99") {
		alert("Sending text failed. Please make sure phone number is valid, or, contact the administrator of this hotspot.");
	} else if(resp == "999") {
		alert("System Exception occured and sending text failed. Please contact the administrator of this hotspot.");
	} else {
		alert("System Exception occured. Please contact the administrator of this hotspot.");
	}
}

[Description]

URL of Request : value of parameter “srvurl”
Method of Request : POST

Getting Parameters:

Parameter Name Description Possible Value
srvurl URL of Request -
gw_id Hotspot ID -
gw_address Gateway Address -
gw_port Gateway Port -
url Original Requested URL -

Sending Parameters:

Parameter Name Description Possible Value Optional Remarks Sample
gw_id Hotspot ID - No same as the getting parameter -
gw_address Gateway Address - No same as the getting parameter -
gw_port Gateway Port - No same as the getting parameter -
url Original Requested URL - No same as the getting parameter -
agree user agrees to the terms 1 Yes ignored if “Agreement” of Authentication Settings is checked 1
voucher voucher code any string Yes ignored if “Voucher Code” of Authentication Settings is checked VOUCHER2009
username user name any string Yes ignored if “Login ” of Authentication Settings is checked john
pswd password any string Yes ignored if “Login ” of Authentication Settings is checked 58332jsth
lang language en
zh_CN
Yes be set automatically if empty. en
zh_CN

Comments are closed.