How To Make A User Customized Authentication Page
|
[Modification Logs] Dec 28, 2012: Added parameter ‘userstring’ (the Track Data). Feb 2, 2014: Function WiwizBeforeAuthDone() is added. Apr 30, 2014: code value 36 and 37 is added in WiwizAuthPageError(). Jul 22, 2014: code value 5 is added in WiwizAuthPageError(). Oct 17, 2015: Funciton WiwizSetAuthDelay() is added. |
This guideline is the new version of How To Make A User Customized Authentication Page. It allows you to customize your Authentication Page in a much simpler way. Authentication logics are encapsulated with JavaScript. You don’t have to take care of dealing with incoming and outgoing parameters any more. Meanwhile, you can also make your own mechanism of show messages.
* However, you can still take a reference to the old version to customize your Authentication Page, which is not recommended though.
You need to make a page as the following one, the please read the Description below:
<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">
<!-- include AuthPageScript.js -->
<script src="http://cp.wiwiz.com/as/AuthPageScript.js"></script>
<script>
/* Callback function for "Verify" Button. Called automatically after "Verify" Button is clicked.
You can change it according to the value of "code" as you need */
function WiwizSmsVerifyMsg(code) {
if (code == "-1") {
alert("Mobile Number is empty!");
} else if(code == "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(code == "1") {
alert("Mobile phone verification is not permitted. Please contact the administrator of this hotspot if you have any question.");
} else if(code == "2") {
alert("Mobile phone verification is not permitted. Please contact the administrator of this hotspot if you have any question.");
} else if(code == "3") {
alert("This phone number is in black list. Please contact the administrator of this hotspot if you have any question.");
} else if(code == "4") {
alert("Verification is being done too frequently. Please try it later.");
} else if(code == "5") {
alert("The times of verification has exceeded the daily limit.");
} else if(code == "6") {
alert("The hotspot is out of service.");
} else if(code == "7") {
alert("The hotspot has exceeded the quota of sending SMS. Please contact the administrator of this hotspot.");
} else if(code == "8") {
alert("Request is expired. Please reload this page.");
} else if(code == "9") {
alert("Please use the last Verification Code in your SMS texts.");
} else if(code == "99") {
alert("Sending text failed. Please make sure phone number is valid, or, contact the administrator of this hotspot.");
} else if(code == "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.");
}
}
/* Callback function for "Start" Button. Called automatically after "Start" Button is clicked if there is any error.
You can change it according to the value of "code" as you need */
function WiwizAuthPageError(code) {
if (code == 1) {
alert("You cannot use this HotSpot unless you agree to these terms.");
} else if(code == 2) {
alert("Please enter User Name.");
} else if(code == 3) {
alert("Wrong user name or password.");
} else if(code == 4) {
alert("Invalid Voucher Code.");
} else if(code == 5) {
alert("User Number Of The Voucher Exceeded.");
} else if(code == 6) {
alert("Online User Number Exceeded. Please contact administrator.");
} else if(code == 7) {
alert("Please enter Mobile number.");
} else if(code == 8) {
alert("This hotspot is out of service.");
} else if(code == 32) {
alert("Account is locked temporarily.");
} else if(code == 35) {
alert("The Verification Code is invalid or expired.");
} else if(code == 36) {
alert("This phone number is in black list. Please contact the administrator of this hotspot.");
} else if(code == 37) {
alert("The times of verification has exceeded the daily limit.");
} else {
alert("Unknown Error. Error Code="+ code);
}
}
/* Callback function which is called before authentication without any error */
function WiwizBeforeAuthDone() {
alert("Wait 3 seconds...");
WiwizSetAuthDelay(3000);
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="post">
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 -->
User Name:
<input name="username" id="username" type="text" value="" />
<br>
<!-- parameter: pswd -->
Password:
<input name="pswd" id="pswd" type="password" />
<br>
<!-- parameter: encrypt -->
<input name="encrypt" id="encrypt" type="checkbox" value="1" checked /><label for="encrypt">Encrypt</label>
<br>
<!-- parameter: voucher -->
Please Input a Voucher Code if you have one:
<input name="voucher" id="voucher" type="text" />
<br>
<!-- parameter: phonenum -->
Mobile:
<input name="phonenum" id="phonenum" type="text" value="" />
<!-- The button to send SMS for verifying mobile number.
Function WiwizSmsVerify() is called on OnClick event.
Parameters in WiwizSmsVerify():
Parameter 1: Mobile Number
Parameter 2: HotSpot ID
-->
<input type="button" value="Verify" onclick="WiwizSmsVerify(document.getElementById('phonenum').value, WiwizGetQueryParameter('gw_id'));" />
<br>
<!-- parameter: phonecode -->
Verification Code:
<input name="phonecode" id="phonecode" type="text" value="" />
<br>
<!-- parameter: userstring (Track Data) -->
<input name="userstring" id="userstring" type="HIDDEN" value="" />
<!-- The button to start the authentication.
Function WiwizStartAuth is called on OnClick event. -->
<input type="button" name="login" value=" Start " onclick="WiwizStartAuth();" />
<br>
<!-- The following links may be useful -->
<a href="#" onclick="window.open('http://cp.wiwiz.com/as/s/viewhotspot/?gw_id='+ WiwizGetQueryParameter('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> |
[Description]
1. AuthPageScript.js must be included with script tag. If you are using “Customized HTML”, then use the path “/as/AuthPageScript.js”.
2. You can write your page as you like with your own HTML, CSS, etc. But form fields for required parameters must be included. Included form fields should be responding to your Authentication Method.
3. Call WiwizSmsVerify() to send SMS when “Verify” button is clicked. After that, callback function WiwizSmsVerifyMsg() will be called automatically. You can rewrite it as you need.
4. Call WiwizStartAuth() to start authentication when “Start” button is clicked. After that, if there is an error, callback function WiwizAuthPageError() will be called automatically. You can rewrite it as you need. If no error, WiwizBeforeAuthDone() will be called, which can be also rewritten. Finally, browser redirects to Post-auth Page after authenticated.
5. Call WiwizSetAuthDelay() to make a delay before authentication is done. E.g. WiwizSetAuthDelay(3000) means waiting 3 seconds before authentication.