A keypad-type login screen (0-9, A-F) suggestion

help
1

Hi everyone

The accounts-base, accounts-password and accounts-ui are great!

I’ve created a simple system at work where the login screen allows a “keypad” - a 4 x 4 grid of 0-9 and A-F - so that when run on a mobile, its really easy to just click 4 buttons (or whatever) to login, rather than type a username and password.

I’d like to do this with Meteor, and all I’ve managed so far is this:

<template name="loginKeyPad">

<table>
	<tr>
		<td>{{>b1}}</td>
		<td>{{>b2}}</td>
		<td>{{>b3}}</td>
		<td>{{>b4}}</td>
	</tr>
	<tr>
		
		<td>{{>b5}}</td>
		<td>{{>b6}}</td>
		<td>{{>b7}}</td>
		<td>{{>b8}}</td>
	
	</tr>
	<tr>
		<td>{{>b9}}</td>
		<td>{{>b0}}</td>
		<td>{{>ba}}</td>
		<td>{{>bb}}</td>
	
	</tr>
	<tr>
		<td>{{>bc}}</td>
		<td>{{>bd}}</td>
		<td>{{>be}}</td>
		<td>{{>bf}}</td>
	</tr>

</table>


</template>

<template name="b1">
	<button id="b1">1</button>
</template>


<template name="b2">
<button>2</button>
</template>


<template name="b3">
<button>3</button>
</template>


<template name="b4">
<button>4</button>
</template>


<template name="b5">
<button>5</button>
</template>

<template name="b6">
<button>6</button>
</template>

<template name="b7">
<button>7</button>
</template>


<template name="b8">
<button>8</button>
</template>


<template name="b9">
<button>9</button>
</template>


<template name="b0">
<button>0</button>
</template>


<template name="ba">
<button>A</button>
</template>


<template name="bb">
<button>B</button>
</template>


<template name="bc">
<button>C</button>
</template>


<template name="bd">
<button>D</button>
</template>


<template name="be">
<button>E</button>
</template>


<template name="bf">
<button>F</button>
</template>

Yes I know a table is not good, but just wanted to get the idea happening… :smile:
Each {{>bx}} (where x is 0-9 and A-F) is a template that shows the button in that table grid.
I’ve given the b1 button an ID so you can style that button in the CSS…

I’d like to have these buttons in an array, but raise a click event for each button to build up the login code, for example B9A3 and pass that off to something that will authorise that code for a user, but I don’t know how to do that yet…

I think this could be a great addition to the accounts-* packages, especially when running on a mobile device - thumb-press on a few buttons rather than a native keyboard to enter full username / password for authorisation.

I’d love to get some help with this if someone thinks its a good idea, and certainly, have no problems providing this as a package for everyone.

Thanks!

Cheers
Brad

2

I’m not sure why you need a template for each button.
I would simply include a button for each key, with a common class and an id generated per button.
Then you bind your event handler to your class and query the event for the id of the button to know which one was pressed.

exemple with Jquery

'click .buttonClass': function (e){
if (e && e.currentTarget){
  var id = $(e.currentTarget) && $(e.currentTrarget).attr('id);
}
if (id){
  // do stuff based on id
}
1 Like
3

I don’t know if having just a code to log in is secure enough.

I really like the idea though, on a mobile its pretty annoying having to type your password and username. forms in general anyway are annoying on mobile web.IMO

4

Hi Murwade

Thanks for your comment - I agree - logging in with userrname/password on a mobile is annoying!

I got the idea from my bank - their app allows me to do just this, and I don’t know a great deal about security, but if my bank thinks its ok, its good for me? :smile:

I only suggested 4 chars, but with 16 chars to choose from (0-9, A-F), one could enforce a minimum code length, like “90AB3A4F1A67” (12 chars) think that would be ok? People would probably need to register before using this (my bank wants you to do that) so once that’s done, I’m thinking that a cookie or some local storage setting is set for the mobile device, meaning if I registered a code on my iPhone, then I can’t use that same code on my Android device.

So devices would need to come into play - imagine if someone knew I banked with this bank - they could download the app and then try to login with my passcode. So something would have to be stored on the device to say that any attempt from other devices should be blocked. I don’t know how to implement this. Could it be with the device ID (as needed for say push notifications) ?

Anyway, simply put, I would like this to be a package that others could use - just need to get some people making suggestions and we can go from there.

Cheers
Brad

5

hi vjau

Thanks for replying.

That’s just the type of thing I was thinking, but wasn’t sure how to implement.
Thanks for the tip!

Cheers
Brad

6

Just remember there could be a great deal more they’re doing that is invisible to the user that makes this more secure than it might appear. Only replicating the user experience doesn’t mean you’ll get the same security.

What would you store locally on the device?

Also, it’s a cool idea but memorizing a random 12 character combination of letters and numbers doesn’t sound any easier than simply typing a username and password.

7

@nkrisc

Thanks Nathan, of course, and I was wondering what they do behind the scenes…

It doesn’t have to be 12 chars, that was just an example. My bank only supports 4 digits, so… easy to remember.

So how many different passcodes could there be, with a passcode length of 4, using a possible 16 digits (0-9, A-F) ?

Is it factorial? 16 factorial is 20,922,789,888,000

8

Actually, it’s 16^4 = 65536…