A simple c# ASP.Net Pin-pad user control

This is just a work-in-progress, but it does the job, and should be enough to get you started on adding a PIN option to your web site. It’s inspired by this entry on StackOverflow.

The concept is:

  • Besides your normal login mechanism, whatever it may be, also require the user to enter a PIN code.
  • Don’t allow the user to type the numbers, they must click the buttons.
  • Every time the control is initialized, the numbers are randomly associated with each button; thus a human needs to click them.

Of course this is just a simple user control demonstrating the principle. How you generate pins and send them to customers, how you design your UI to allow them to change the pin, and how you store the pins, is completely up to you. This is not especially secure, but it is supposed to supplement your login security, not replace it.

I wrote this because I have a nice-to-have development task to add one to our web application. It’s probably not necessary, but the boss suggested the idea and it would look cool, I suppose.

Here’s what it looks like:

PinPad1

And here it is after I refreshed the page (and forced it to reinitialize):

PinPad2

 

The markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PinPadControl.ascx.cs" Inherits="PinPadControl" %>
<table style="border: 1px solid #9999FF; border-collapse: collapse; width: 400px; text-align: center; background-color: #DADADA;">
    <tr>
        <td style="padding-top: 4px">
            <asp:Button ID="Button1" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
        <td style="padding-top: 4px">
            <asp:Button ID="Button2" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
        <td>
            <asp:Button ID="Button3" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
        <td style="padding-top: 4px">
            <asp:Button ID="Button4" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
    </tr>
    <tr>
        <td>
            <asp:Button ID="Button5" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
        <td colspan="2">
            <asp:TextBox ID="pinTextBox" runat="server" Width="180px" ReadOnly="True"></asp:TextBox></td>
        <td>
            <asp:Button ID="Button6" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
    </tr>
    <tr>
        <td style="padding-bottom: 4px">
            <asp:Button ID="Button7" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
        <td style="padding-bottom: 4px">
            <asp:Button ID="Button8" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
         <td style="padding-bottom: 4px">
            <asp:Button ID="Button9" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
        <td style="padding-bottom: 4px">
            <asp:Button ID="Button10" runat="server" Text="Button" Width="75px" OnClick="Button_Click" /></td>
    </tr>
    <tr>
        <td colspan="4" style="text-align: right; padding-right: 10px;">
            <asp:LinkButton ID="clearButton" runat="server" OnClick="clearButton_Click">Clear</asp:LinkButton></td>
    </tr>
</table>

 

And the code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class PinPadControl : System.Web.UI.UserControl
{
    public string Pin { get { return pinTextBox.Text; } }

    protected void Button_Click(object sender, EventArgs e)
    {
        pinTextBox.Text += (sender as Button).Text;
    }

    protected void clearButton_Click(object sender, EventArgs e)
    {
        pinTextBox.Text = string.Empty;
    }

    protected override void OnInit(EventArgs e)
    {
        int[] array = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };
        Random rnd = new Random();
        for (int i = array.Length - 1; i > 0; i--)
        {
            int j = rnd.Next(i);
            int k = array[j];
            array[j] = array[i - 1];
            array[i - 1] = k;
        }

        var buttons = this.Controls.OfType<Button>().ToArray();

        for (int i = 0; i < buttons.Length; i++)
        {
            buttons[i].Text = array[i].ToString();
        }
        base.OnInit(e);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        pinTextBox.Attributes["type"] = "password";
    }
}

Update (24/07/2014): Drat! My boss doesn’t want the “extra layer of complexity” of the randomised buttons, as he is afraid the users will become confused. So I won’t even be using this control.

Advertisements

About Jerome

I am a senior C# developer in Johannesburg, South Africa. I am also a recovering addict, who spent nearly eight years using methamphetamine. I write on my recovery blog about my lessons learned and sometimes give advice to others who have made similar mistakes, often from my viewpoint as an atheist, and I also write some C# programming articles on my programming blog.
This entry was posted in Programming and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s