Log into my web trading app using only flashing colours? Yes please!

If you didn’t already know, Hackday is Caplin’s version of a Hackathon. Yes, a gathering of highly gifted software engineers, UX designers and Sales Consultants who break up into teams (or go lone warrior) and code for 24 hours straight – Jack Bauer intensity comes to mind. With a limitless supply of Red Bull and Pizza, the end goal is for participants to come up with some imaginative software project that either makes you say ‘wow’, makes the lives of internal staff easier or addresses some new business case that fits in line with Caplin’s stack of products and services.

In homage to Monty Python’s Life of Brian, the People’s Front of Judea were one of nineteen teams that took part in this year’s Hackday event.
This team wanted a smarter way to log users in to their web trading application… and so the Secret Authentication Mechanism (SAM) was born. Using a pretty nifty idea that involves a camera, a web trading app, a trader and a hypnotic array of flashing colours, they came up with… er… well a different way for traders to log in… securely. Read on to find out more!

The Team 

The introduction went on to describe how in the past, the focus had always been on the traditional model of a person failing in something, and so we tell them what to do, in the briefest manner. Information would thus be presented in a style that implements information mapping. This type of structure resembles a glossary, where explanations are succinct, to the point, and quite mundane. This structure presents information in an easy to find way, that’s both understandable and accurate.

Stephen – Long-time Caplin veteran, Steve is currently a Professional Services Development Manager with some solid experience in mobile trading solutions.

Axel – A native of France, Axel is a front-end Developer at Caplin specialising in JavaScript and Mobile app development.

Dominic –Dominic is currently working as a Senior Developer at Caplin Systems. Working with front-end development, he also dabbles with back-end stuff too.

I sat down with Axel, and got some insight into the team’s inspiration, their project and a general summary of what went down on the night of the Hackday. By his own account, Axel averages 2-3 hours’ of sleep a day, so what better person to ask on the night’s activities..? Read on!


Q: How did it all come together?

Axel: Initially it was Dominic who spoke about the idea of using images and a camera to log into a web trading application a few months ago. It sounded cool, and when we knew that Hackday was around the corner we thought… hey! let’s use this idea because it is cool.

Q: Right, so you went with the cool factor – how did you all get involved?

Axel: Ah because we are all working on the same work project at Caplin. Dominic is a front-end developer like me and Stephen was also working with us.  We were all JavaScript developers and spoke to each other about our interest in the idea and using it for Hackday. 

How it all works

Simply put, the Secret Authentication Mechanism (SAM) uses a sequence of flashing colours that are actually a visual representation of an authenticated user, to log you into multiple devices. That’s the theory! Here’s the practical: http://www.vimeo.com/111516511

So you log into a web app, as standard, on your smartphone (no flashing colours yet). And once you’re logged in – you’re now an authenticated user right? Yes, and a sequence of colours is generated as your evidence. Now to securely log into the same app on your laptop/desktop, just use your phone to send the sequence of flashing colours to the webcam saying ”Hey, I’m a legit user, let me in”.

SAM employs Two-Factor Authentication for a desktop using a mobile phone. This means you still supply username/password as normal, before submitting the sequence of colours as the second stage in the verification process. The sequence of colours is read by the webcam and decoded as being either a valid or non-valid pattern. To decode the sequence, The People’s Front of Judea wrote a lightweight library and speedy colour detection algorithm to pinpoint where the colours were flashing on the webcam feed.

And as a typical webcam has a refresh rate of 24 frames per second (FPS), it can identify each colour in a sequence containing less than 24 individual colours (20 or less was shown to be most reliable).

Do I have a diagram? Of course… for all you visual learners out there:

*Not to scale.

Did you run into any problems?

Axel: We suffered from hardware issues and calibration when detecting the flashing colours. Screen glare was the main problem, as it affected detection accuracy.

Why do we need this?

Axel’s two cent’s worth:

“The main driver behind the project is implementing Two Factor authentication, where the user logs in normally, before completing an additional verification step for added security.

With this security step, the colours can be encoded to store specific data, or even to send encoded messages as a form of communication. Why is it secret? Well when you have coloured images flashing at about 20 frames per second, the user cannot perceive what is being transmitted or the sequence, and neither can anyone else. Even if you gave some stranger your username and password, using SAM as an extra layer of security, you won’t be able to supply them with the correct sequence of flashing colours.”

Stephen’s two cent’s worth:

“There are many forms of  Two-Factor Authentication such as SMS, E-mail, and Phone calls that various web apps implement. When logging into an app, it can be annoying if you have to go through extra verification steps by switching to your phone for an SMS, and your desktop for an E-mail.

If you’re already authenticated on one device, why not just use that device to log into another? Given that our project is written in JavaScript – it can run on all mobile devices and desktops, this support will allow you to log into other devices and  carry out all verification steps using a single device. The process is highly secure, and more convenient for the user.”

What could be improved?

Q: Did you explore other techniques for your concept?

Axel: Not really, this was the main technique that we decided to go ahead with. We did look at using multiple colours at once on the same screen. The benefit of this would be to increase the complexity of the data transfer allowing you to send more information. It also improves the security aspect.

Q: Yeah, that’s interesting as I remember at your demonstration an audience member asked about using a block of colours instead of a flashing sequence

Axel: Yes, it’s possible. We just didn’t have enough time to test that during the Hackday. We wanted to have a successful Hackday presentation. As we already experienced issues with glare and colour detection, adding more colours would have required much more testing and calibration. There are definitely deeper levels to this project, it was good just to look at the possibilities.

The Hackday

As Axel’s first hackathon here at Caplin, I probed him on his experience.

Q: 24 hours for you and your team to implement the Hackday project – did you sleep?

Axel: I managed 22 hours without sleep. For me it was like any other day as I generally sleep a few hours anyway *Axel grins*. Both Dominic and Stephen slept for a few hours on-site.

Q: Wow you’re a machine, how did you find the atmosphere amongst the competing developers?

Axel: Very good, very fun – it was good for team discussions. Of course we worked a lot but we can speak with other teams and help them out with their issues and vice versa. We can try and test things with other people and even play games together like table tennis.


Well there you have it, an insider’s perspective from one of this year’s Hackday teams. An interesting approach to switching things up in the world of web trading.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *