Menu ▾ ▴

yfi_explain_Dojo_JSON

Anonymous

Coova Chilli JSON login page using Dojo & Dijits

Requirements

The following requirements led to this latest edition:

  • Choice for pop-up window after log-in.
  • An 'any page as log-in page' approach.
  • Support for multiple languages.
  • Feedback on the total usage of a Voucher or Permanent User. This in addition to Coova Chilli's session only stats.

Libraries used

The heart of this log-in page sits in two Java Script files.

  • Json.js
  • Ui.js

These files contain some functions which will be discussed - This can be seen as developers notes.

Web Services

This login page makes use of two JSON web services.

  • YFi Hotspot Manager: This web service informs the user on its total usage. It can also give informantion about the Realm of the logged-in user.
  • CoovaChilli: This web service informs the user about its current session's usage.

Json.js

This file is used to communicate over the network.
Depending on the feedback of the communication, it will call various screens which essentially are functions inside the Ui.js file.

cj.getStatus

This gets called with a setInterval when logged-in, or initially to see if we are authenticated or not.
It does this by using the JSON web service running on the Coova Chilli Captive Portal.
Dependending on the status, the following outcomes are possible:

Display Not a Hotspot screen

This is displayed when the page is not called through Coova Chilli.

Display Error screen

Displayed when the call to the JSON web service returned an error. (EG a timeout)

Display Log-in screen

If the response.clientState is 0, we need to offer the user a means to log in.

Display Status screen

If the user is already logged in (response.clientState is 1), we display the status on the user's usage.
This is run in a loop through the Java script !setInterval() function.
This allows for auto change over when the user gets logged out. The Status screen is then replaced with the Log-in screen.

cj.logIn

This function is called from the Ui.js file.
It is used to log a user into Coova Chilli.

cj.logOff

This function is called to log a user off from Coova Chilli.

Ui.js

This file is used to populate a div html element.
It has various functions which will create screens inside the div element.

Screen creating functions

cu.wait
This is the screen which will pop-up during waiting periods, EG the time between the user clicking the log-in button and a Status screen displaying.
It shows a gif animation and some text.

cu.error
This screen is displayed on error conditions.

cu.notHotspot
This screen gets displayed when the log-in page is not called through the Coova Chilli program.

cu.logIn
This screen gets displayed when cj.getStatus determines that the user is not yet logged in (response.clientState is 0)

cu.status
This screen gets displayed when cj.getStatus determines that the user is logged in (response.clientState is 1).
It will then give feedback on the status on the session by periodically connecting to Coova Chilli's JSON web service.
It will also update usage information by periodically connection to YFi Hotspot Manager's JSON web service.

Configuration

To make use of this latest JSON login page with all the features mentioned, simply point the UAM URL Format to
http://192.168.1.11/yfi/uam_json.html

This should bring the logIn screen page up when called by Coova Chilli
Also ensure you specify the location of the UAM web service and the Usage web service by editing the /var/www/yfi/js/dojo/chilli/Setting.js file. 

cs.uam_jsonp    = 'http://192.168.1.11/coova_json/uam.php';                          //URL of the uam YFi Web service - Change to suit your install
cs.usage_jsonp  = 'http://192.168.1.11/c2/yfi_cake/third_parties/json_usage_check'; //URL of the usage YFi Web service - Change to suit your install

The above samples assume that the YFi Hotspot Manager is running on a server with IP 192.168.1.11.

Problems Identified - 20-12-2009

(Thanks to muffy and guibzh for the feedback to identify and solve this)

When this log-in page was implemented in real-world situations the following problem was identified.

  • When a machine tries to connect to the Internet through port 80 the URL is assigned to the value of originalURL.

  • User's machines today are loaded with various programs which are automatically started after boot-up.

  • Skype is a classic example. The Skype program may be the first to go out the Internet through port 80, causing the originalURL to be Skype related.

  • Another example is when cached Web pages load and a Ajax component inside the page goes out to the Internet first. A time or currency feed inside a page comes to mind here.

Taking the above in consideration, it is not ideal to redirect a user to the value of originalURL upon successful log-in.

  • Coova Chilli like Mikrotik can make use of the WISPr-Redirection-URL reply attribute.

  • Supplying this reply attribute will cause Coova Chilli to assign it to the JSON feedback attribute of redirectionURL.

  • We can either use this attribute for better redirection upon log-in, or specify a URL for the cs.url_default inside the /var/www/yfi/js/dojo/chilli/Setting.js file. 

    cs.uam_jsonp    = 'http://196.25.225.27/coova_json/uam.php';                         //URL of the uam YFi Web service - Change to suit your install
cs.usage_jsonp  = 'http://196.25.225.27/c2/yfi_cake/third_parties/json_usage_check'; //URL of the usage YFi Web service - Change to suit your install
cs.url_default  = 'http://google.com';                                              //URL that user will be redirected to by default - use instead of originalURL

Related

Wiki: YfiTechCoovaLogin
Wiki: yfi_setup_nas_coovaAP