I recently moved to Trento to begin my master in Mathematics and I got to catch a few trains to move back and forth to Firenze. A single way trip is close to 3 hours and it would quickly become boring without an internet access.

Unfortunately the railway path is not mobile friendly, Italy is definitely not flat and the train have to transit under a bunch of mountains so no mobile signal under there. Goodbye Reddit :(

Trenitalia is the operator of the high speed railway and in partnership with Telecom Italia provide internet access on the high speed trains trough a WiFi network and God knows what something that can reach a train going 300 Km/h under a mountain.

There is no fee in using this service and even if it limited in brandwith it is still a good way to save on my monthly plan limited internet.

One of the main drawbacks of the service is authentication, it has been thought for screens wider than 7” and in this world of smartphone is pretty much unusable.

The process is:

  1. request your credentials via a web interface, recieve via SMS
  2. enter your credentials via a web interface

This should be simple enough right? Unfortunately the process is more like this:

  1. load the page http://portalefrecciargento.it, there won’t be automatic redirection from other urls you may type
  2. follow the link tied to your authentication method, text message for TIM, text message for other providers, credit card (seriously?)
  3. enter your phone number
  4. receive your text message, your credentials are like this smsDDDDDDD@telecomitalia.it(D is a digit) and a four digits password, valid for 24 hours. You can request your credentials three times, after that they won’t provide them and remind you that you run out of chance to retrieve them
  5. enter the credentials in the form
  6. accept privacy, terms and conditions
  7. submit
  8. surf all the web!

This process is so difficult on a smartphone that it drove me so much crazy that I switched to my laptop and did not look back at my phone for 3 hours!

There must be a simpler way to do this, the web is simple when thought and done right!

The best chance at fixing this terrible user experience for my phone is providing my own authentication page, as a OpenWeb App!

The idea is simple, study the authentication procedure from my laptop and reverse engineer the steps needed to request credentials and to autenticate.

Starting is really simple, I need a index.html file, a manifest.webapp file and maybe a CSS and a JS.

This skeleton is a good starting point!

<!-- index.html -->
<html>
  <head>
    <!-- encoding is important kids! -->
    <meta charset="utf-8">
    <!-- but a viewport is importanter -->
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
  </head>
  <body>
    <section role="application">
      <section role="register">
      </section>
      <section role="login">
      </section>
    </section>
  </body>
</html>

and

// manifest.webapp
{
	"name": "Wifi Frecce",
		"launch_path": "/index.html",
		"description": "Accedi al servizio Wifi delle Frecce",
		"developer": {
			"name" : "Edoardo Putti",
			"url": "http://www.edoput.it"
		},
		"default_locale": "it",
		"chrome" : {
			"navigation": "true"
		} 
}

Let’s study how we can request the credentials.

On http://portalefrecciargento.it follow the link to request your credentials, once there fill the form and open the developer tools, focus the network tab and submit the form, a request will be logged and you can peek and analyse it.

I saved the request as a .har file and opened it in a text editor, there were all the details of the previous request.

The important part of the request is this:

"params": [
{
	"name": "acpt_contratto",
		"value": "1"
},
{
	"name": "acpt_privacy",
	"value": "1"
},
{
	// the phone number I submitted
	"name": "mobile",
	"value": "3333333333"
},
{
	"name": "mode",
	"value": "esegui"
},
{
	"name": "info",
	"value": "Invia"
}
]

From this info we can see that there are a few parameters that we should pass with our request but only one is provided by the user, mobile.

Knowing this we can model a form that will make the request on our behalf with only one input, the phone number.

<section role="register">
	<formi action="http://sms.wifiarea.it/" method="post" autocomplete="true">
		<label for="phone">
			Phone number
		</label>
		<input id="phone" type="number" name="mobile">
		<input name="acpt_contratto" value="1" hidden>
		<input name="acpt_privacy" value="1" hidden>
		<input name="mode" value="esegui" hidden>	
		<input name="info" value="Invia" hidden>	
		<input type="submit" value="Request credentials via sms">
	</form>
</section>

Doing the very same process for the login request we can model another form

<section role="login">
	<form action="https://home.alicezone.it/wifiaaa/sitemap.jsp" method="post">
		<label for="username">
			Username
		</label>
		<input id="username" type="email" name="username">
		<label for="password">
			Password
		</label>
		<input id="password" type="number" name="password">
		<input name="path" value="authenticate" hidden>
		<input name="hsb" value="false" hidden>
		<input name="language" value="it" hidden>
		<input name="logType" value="null" hidden>	
		<input type="submit" value="Login">
	</form>
</section>

This very poor interface result in this screenshot on the simulator

The usual I'm not a designer disclaimer

Using this webapp to request my credentials and login make it so easy and speeds up the process so much that I specifically run a Firefox OS simulator on my laptop to stay away from the official (and cluncky) interface.

Conclusions

This project is a simple hack to enhance user experience, many passenger on the train use their devices during their trip and many of them surely struggle with a process that is so stupidly simple but so poorly implemented, this was a very low hanging fruit with a pretty big benefit and it’s a shame that no one came up with a better solution.

What I have rediscovered, and that fascinates me, is that the web is very simple, so simple that you can hack your way out of madness while you are on a train isolated from the internet in less than ten minutes.

Update

I moved the project to a specific webpage, agnostic to the browser but you can still install it as a OpenWeb App.

Here you can see a screenshot

screenshot from the responsive view

And the updated code, more accessibility friendly; some examples

<form action="http://sms.wifiarea.it/" method="post" target="_blank" autocomplete="true">
        <label for="phone" id="phone_input_label">
            Numero di telefono
        </label>
        <br>
        <input id="phone" type="number" name="mobile">
        <br>
        <label for="acpt_contratto" id="acpt_contratto_label">
            Accetto il contratto per il servizio
        </label>
        <input id="acpt_contratto" name="acpt_contratto" type="checkbox" value="1" checked>
        <br>
        <label for="acpt_privacy" id="acpt_privacy_label">
            Accetto le condizioni della privacy
        </label>
        <input id="acpt_privacy" name="acpt_privacy" type="checkbox" value="1" checked>
        <br>
        <input name="mode" value="esegui" hidden>
        <input name="info" value="Invia" hidden>
        <input type="submit" value="Richiedi username e password" id="submit_credentials">
</form>

and

<form action="https://home.alicezone.it/wifiaaa/sitemap.jsp" method="post" target="_blank" autocomplete="true">
        <label for="username">
        Username
        </label>
        <br>
        <input id="username" type="email" name="username">
        <br>
        <label for="password">
        Password
        </label>
        <br>
        <input id="password" type="number" name="password">
        <br>
        <input name="path" value="authenticate" hidden>
        <input name="hsb" value="false" hidden>
        <input name="language" value="it" hidden>
        <input name="logType" value="null" hidden>
        <input type="submit" value="Accedi" id="submit_login">
</form>