User Login API

[Access Authorization]

Our Firmware used a technoly call Captive Portal, it's used by majority of Telecom ISP, the structure of system include AP(Wireless Access Point)AC Controller(Wireless Access Point Controller)Portal Page Server(Captive Portal Server)AAA Server(Cloud Radius Server),we have implemented cloud storage ofPortal Page,Captive Portal Page Online Edit,Portal Static Resource CDN, Online Users data analysis and demonstration, radius server can communicate with third party acounting system by Oauth2.0 protocol..

Portal Authentication:

portal authentication

What you need to do?

You need finish the link of Portal Page and AC (Router), config our configuration in the router firmware, Radius Client will behalf of user to send request to Authentication authorization and accounting system , and retrieve the response.

Communication between Portal page and AC is done by JSON API, for convenient developement, we provide Javascript Library, what you need to do is Include the JS file, write Javascript and call the method to custem the authentication process, all this can be done in Online Editor .

Waht should I do?

一、 EditPortal Page Template,include the JS file

<script src="http://s.anywifi.com/resources/anywifiLibrary.js"></script>

Attention:please don't download and save the file on local, we will update the file when it is necessary.

二、 Several Auth Method

1、Anonymous Login(Guest Mode)

Anonymous Login function:anonymousLogin();

Before the user pass the authentication , user could gain access as Guest Mode to obtain a limited access, or just Click the Link to Surfing the Internet ,this can be done by call the anonymous Login function(Anonymous Login's SessionTimebandwith can be set in platform under Online Users-Group Menu).

Examples

<!doctype html>
<html>
<head>
<title>{title}</title>
<script src="http://s.anywifi.com/resources/anywifiLibrary.js"></script>
</head>
<body>
<a href="anonymousLogin();">Anonymous Login</a>
<p>Click the above link to FreeWiFi.</p>
</body>
</html>

Certainly, you can show user with JS counterdown likeOpen page (click the button) N seconds later to AutoLogin(),demonstration:

WIFI countedown AutoLogin

Code :

<!doctype html>
<html>
<head>
<title>{title}</title>
<script src="http://s.anywifi.com/resources/anywifiLibrary.js"></script>
<script type="text/javascript">
function timer(){
   var i = 10;
   $("#dt2").show();
   $("#dt1").hide();
   var ttt = window.setInterval(function(){
            i--;
            $("#time").html(i);
            if(i==0){
                   clearInterval(ttt);
                   anonymousLogin();
            }
        }, 1000);
}
</script>
</head>
<body>
<dl>
    <dt id="dt1">
        <a href="javascript:void(0)" onclick="timer();"><span>1</span><span>Click to Free Trial the WIFI</span></a>
    </dt>
    <dt id="dt2" style="display:none;">
        <a href="javascript:void(0)"><span>1</span><span>Processing ... <em  id="time">10</em></span></a>
    </dt>
</dl>
</body>
</html>

2、Weixin Login

Wexin Login API Interface URL:http://c.anywifi.com/api/weixinlogin?uid=(“”will show after Login

LoginAPI Interface URL,show in the Portal Page to inform user Follow Specific Wexin Public Account,then the public account will auto reply with an URL, after user click the URL, the system will automatic call JS Login Function to complete Wexin On-Key Follow Surfing Internet ,If user try to access the URL not in Wexin, He will be display with 'Not Weixin APP, please open your Wexin Client' Hint.

Wexin On-Key Follow Surfing Internet :

Wexin On-Key Follow Surfing Internet LoginSucceed    Wexin On-Key Follow Surfing Internet LoginFailed

Weixin Login Funtion:webchatLogin();

Get the Wexin Account:http://c.anywifi.com/api/weixinname?nasid=[NASID](NASID Parameter can be retrieve from the URL query_string)

Weixin Login function is different from Anonymous Login API ,used for the Platform to set different SessionTime/BandWith/Group attributes,we tell weixin from other browsers by Browser's UA(User-agent)( Weixin Browser's User-Agent )to determine if the client in Weixin and grant user for internet access . Above mentioned >Wexin On-Key Follow Surfing Internet is fullfilled by the theory.

Examples

<!doctype html>
<html>
<head>
<title>{title}</title>
<script src="http://s.anywifi.com/resources/anywifiLibrary.js"></script>
<script type="text/javascript">
//get the weixin account from the query_string of NASID
var nasId = getQueryString('nasid');
ajaxLoad("GET","http://c.anywifi.com/api/weixinname?nasid="+nasId+"&t="+Math.random(),function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		getel('wx_name').innerHTML = xmlhttp.responseText;
	}
});
});
</script>
</head>
<body>
<div class="gridContainer clearfix" id="forpc" style="display:none;">
  <div id="div1" class="fluid wrapper test transition">
  	<h1 id="logo" class="test"><img class="lo_ico" src="http://s.anywifi.com/resources/template/1/webchatonekeylogin/warnico.png"></h1>
  	<div class="notecont transition">
      <h2>WebChat Only</h2>
      <a class="golink" href="weixin://qr/gEx_Zm-EdTlKrSsF9xmS">Follow Weixin<span id="wx_name"></span>Auth to Surf the Internet</a>
  	</div>
  </div>
</div>
<div class="gridContainer clearfix" id="forweixin" style="display:none;">
  <div id="div1" class="fluid wrapper test transition">
  	<h1 id="logo" class="test"><img class="lo_ico" src="http://s.anywifi.com/resources/template/1/webchatonekeylogin/successico.png"></h1>
  	<div class="notecont transition">
      <h2>LoginSucceed</h2>
  	</div>
  </div>
</div>
<script type="text/javascript">
//根据UA判断
var ua = navigator.userAgent.toLowerCase();
var url = window.location.href;
if(ua.indexOf("android")!=-1 || ua.indexOf("iphone")!=-1 || ua.indexOf("ipad")!=-1 || ua.indexOf("phone")!=-1){ //mobile end
    //micromessenger
    if(ua.indexOf("micromessenger")!=-1){
        getel('forweixin').style.display='block';
        setTimeout("webchatLogin()",2000);
    }else {
        getel('forpc').style.display='block';
    }
}else{
    getel('forpc').style.display='block';
}
</script>
</body>
</html>

3、Phone NumberLogin

Mobilephone Login function:userLogin(mobilephone,password);

Get LoginCAPTCHA:http://c.anywifi.com/api/mobilephone?nasid=[NASID]&mobilephone=[MOBILEPHONE]&mac=[MAC]&ap=[AP]
      (NASID、MOBILEPHONE、MAC、AP can be retrieved from query strings)

Phone Number as account, users need input Phone Number,get CAPTCHA from SMS then fill the Verification to Login(Verification SMS needDownlink SMS,we offer 50 SMS free of charge, you can buy SMS through the Trading Market, Users' Phone Number can be viewed in the system)

Phone NumberLogin:

Phone NumberLogin

Sample Code:

<!doctype html>
<html>
<head>
<title>{title}</title>
<script src="http://s.anywifi.com/resources/anywifiLibrary.js"></script>
<script type="text/javascript">
//Loginbutton
function doLogin(){
	userLogin(getel("phone").value,getel("code").value);
};
//get the captcha 
function getPhoneCode(){
    var nasId = getQueryString('nasid');
    var mac = getQueryString('mac');
    var ap = getQueryString('called');
    var mobilePhone = getel("phone").value;
    if(/^1\d{10}$/g.test(mobilePhone)){
        ajaxLoad("GET","http://"+adminDomain+"/api/mobilephone?nasid="+nasId+"&mobilephone="+mobilePhone+"&mac="+mac+"&ap="+ap+"&t="+Math.random(),function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                if(xmlhttp.responseText=="SUCCESS"){
                    alert('CAPTCHA is send');
                }else if(xmlhttp.responseText=="OVERLOAD"){
                    alert('CAPTCHA sending,please wait...');
                }else{
                    alert(xmlhttp.responseText);
                }
            }
        });
    }else{
        alert('Phone Number Incorrect');
        getel("phone").value = '';
    }
}
</script>
</head>
<body>
  <div >
    <input type="text" id="phone"  placeholder="Phone Number" />
    <button id="codeButton" onclick="getPhoneCode();" >Get CAPTCHA</button>
  </div>
  <div >
    <input type="text" id="code"  placeholder="CAPTCHA" />
    <button id="accordion-longinBtn2" onclick="doLogin();" >Login </button>
  </div>
</body>
</html>