PIN Entry to a webpage

@Saturnine9Feb 23.2008

Hi, i’ve been doing a litlte research and was wondering if any one could help, because i can’t seem to find anything of this nature and it doesn’t help not knowing alot of javascript!

My idea is a number sequence pad 0-9 like a 4 didgit PIN entry to a website if the PIN is correct you can then get into another page you might have created! for example:

0 1 2 3 4
5 6 7 8 9

Input PIN:” ” then a “Submit button”

the pad numbers you click on would then appear in a PIN text field ” “. if the wrong combination is inserted and a user goes to try and submit a invalid PIN an alert box appears and you have to start over, or after 3 attempts it stops to work. Once a valid PIN is enterd in the PIN field and once the submit box is clicked then sumbit button then works and redirects to a certain page. a similar idea is that of a ATM PIN entry system. This is only for a simulation and not an ideal to secure a webpage!

I would really appreciate some help as I’m clearly new to javascript!

Thanks!

to post a comment

JavaScript

7 Comments(s) _↴

@cgishackFeb 23.2008 — #I made a sample you can work with

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 //CONFIG:
 var correctPinNumber = "1234";
 var url = "http://www.google.com";
 
 //OTHER
 var totalAttempts = 0;
 
 function  checkPinNumber()
 {
 //get values from doc.
 var formArea= document.getElementById("formArea");
 var errorArea = document.getElementById("errorMessage"); 
 var pinNumber = document.getElementById("pinNumber").value;
 
 <i>	</i>//validate PIN.
 <i>	</i>if (pinNumber == correctPinNumber)
 <i>	</i>{
 <i>	</i>	document.location.href = url;
 <i>	</i>}
 <i>	</i>else
 <i>	</i>{
 <i>	</i>	errorArea.innerHTML = "Incorrect Pin, please try again";
 <i>	</i>}
 <i>	</i>//add one more access attempt;
 <i>	</i>totalAttempts++;
 
 <i>	</i>if( totalAttempts == 3)
 <i>	</i>{
 <i>	</i>	formArea.style.display = "none";
 <i>	</i>	errorArea.innerHTML = "Too many attempts.. sorry.";
 <i>	</i>}
 
 }
 
 
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;div id="formArea"&gt;
 Please enter your PIN: 
 &lt;input type="text" name="pinNumber" id="pinNumber" /&gt;
 &lt;input type="submit" name="pinButton" id="pinButton" value="Enter" onclick="checkPinNumber()" /&gt;
 &lt;/div&gt;
 &lt;div id="errorMessage"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Give that a try.

Drew

@cgishackFeb 23.2008 — #Here is a version with a PAD.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;style&gt;
 
 .numberButtons
 {
 width: 50px;
 }
 
 &lt;/style&gt;
 
 
 &lt;script type="text/javascript"&gt;
 //CONFIG:
 var correctPinNumber = "1234";
 var url = "http://www.google.com";
 
 //OTHER
 var totalAttempts = 0;
 
 
 function addNumber(value)
 {
 var pin = document.getElementById("pinNumber");
 pin.value += value;
 }
 
 function clearPad()
 {
 document.getElementById("pinNumber").value = "";
 }
 
 function  checkPinNumber()
 {
 //get values from doc.
 var formArea= document.getElementById("formArea");
 var errorArea = document.getElementById("errorMessage"); 
 var pinNumber = document.getElementById("pinNumber").value;
 
 <i>	</i>//validate PIN.
 <i>	</i>if (pinNumber == correctPinNumber)
 <i>	</i>{
 <i>	</i>	document.location.href = url;
 <i>	</i>	return;
 <i>	</i>}
 <i>	</i>else
 <i>	</i>{
 <i>	</i>	errorArea.innerHTML = "Incorrect Pin, please try again";
 <i>	</i>	clearPad()
 <i>	</i>}
 <i>	</i>//add one more access attempt;
 <i>	</i>totalAttempts++;
 
 <i>	</i>if( totalAttempts == 3)
 <i>	</i>{
 <i>	</i>	formArea.style.display = "none";
 <i>	</i>	errorArea.innerHTML = "Too many attempts.. sorry.";
 <i>	</i>	clearPad()
 <i>	</i>}
 
 }
 
 
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;div id="formArea"&gt;
 &lt;p&gt;
 &lt;input type="text" name="pinNumber" id="pinNumber" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="1" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="2" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="3" onclick="addNumber(this.value)" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="4" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="5" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="6" onclick="addNumber(this.value)" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="7" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="8" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="9" onclick="addNumber(this.value)" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="0" onclick="addNumber(this.value)" /&gt;
 &lt;/p&gt;
 &lt;p&gt;
 &lt;input type="submit" name="pinButton" id="pinButton" value="Enter" onclick="checkPinNumber()" style="width:165px" /&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="errorMessage"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Drew

@Saturnine9authorFeb 23.2008 — #Here is a version with a PAD.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;style&gt;
 
 .numberButtons
 {
 width: 50px;
 }
 
 &lt;/style&gt;
 
 
 &lt;script type="text/javascript"&gt;
 //CONFIG:
 var correctPinNumber = "1234";
 var url = "http://www.google.com";
 
 //OTHER
 var totalAttempts = 0;
 
 
 function addNumber(value)
 {
 var pin = document.getElementById("pinNumber");
 pin.value += value;
 }
 
 function clearPad()
 {
 document.getElementById("pinNumber").value = "";
 }
 
 function  checkPinNumber()
 {
 //get values from doc.
 var formArea= document.getElementById("formArea");
 var errorArea = document.getElementById("errorMessage"); 
 var pinNumber = document.getElementById("pinNumber").value;
 
 <i>	</i>//validate PIN.
 <i>	</i>if (pinNumber == correctPinNumber)
 <i>	</i>{
 <i>	</i>	document.location.href = url;
 <i>	</i>	return;
 <i>	</i>}
 <i>	</i>else
 <i>	</i>{
 <i>	</i>	errorArea.innerHTML = "Incorrect Pin, please try again";
 <i>	</i>	clearPad()
 <i>	</i>}
 <i>	</i>//add one more access attempt;
 <i>	</i>totalAttempts++;
 
 <i>	</i>if( totalAttempts == 3)
 <i>	</i>{
 <i>	</i>	formArea.style.display = "none";
 <i>	</i>	errorArea.innerHTML = "Too many attempts.. sorry.";
 <i>	</i>	clearPad()
 <i>	</i>}
 
 }
 
 
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;div id="formArea"&gt;
 &lt;p&gt;
 &lt;input type="text" name="pinNumber" id="pinNumber" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="1" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="2" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="3" onclick="addNumber(this.value)" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="4" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="5" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="6" onclick="addNumber(this.value)" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="7" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="8" onclick="addNumber(this.value)" /&gt;
 &lt;input type="button" class="numberButtons"  value="9" onclick="addNumber(this.value)" /&gt;
 &lt;br /&gt;
 &lt;input type="button" class="numberButtons"  value="0" onclick="addNumber(this.value)" /&gt;
 &lt;/p&gt;
 &lt;p&gt;
 &lt;input type="submit" name="pinButton" id="pinButton" value="Enter" onclick="checkPinNumber()" style="width:165px" /&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="errorMessage"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Drew[/QUOTE]

Thanks very much for your help can't thank you enough... I will play around with this and learn how it works ?

@Declan1991Feb 23.2008 — #Just make sure you know that that isn't even remotely secure, and should be an exercise in Javascript, not a serious attempt at a PIN system.

@LeonsbuddydaveFeb 24.2008 — #Unfortunately, hes right: Try viewing the source code of the page and you can see the code that needs to be entered. External .js files don't work either: Theres still ways to get at them. If you are really, truly trying to protect a page, use a server side language like PHP. Otherwise, this script works fine.

@cgishackFeb 24.2008 — #In his first post he did specify it was for simulation only

.....this is only for a simulation and not an ideal to secure a webpage!
[/quote]

@Declan1991Feb 24.2008 — #In his first post he did specify it was for simulation only[/QUOTE]
Just to be sure.

Also in #JavaScript _↴

New window launched by form needs scrollability Why isn't this working MouseOver problem

Success!

Help @Saturnine9 spread the word by sharing this article on Twitter...

Tweet This

PIN Entry to a webpage

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

PIN Entry to a webpage

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴