Build a Lost Password Function


By the end of this article you should now understand how straightforward it is to implement this kind of functionality into every application.
- Miles Gibson, Consultant and Principal of Milestone Consulting

April 19, 2006
Iron Speed Designer V3.2

Introduction

Almost every web site today has a login mechanism so that users can access registered content. Most of them allow you to also click a link and have your password emailed to you when you have lost it; or in my case forgotten it!

Like most everything else on the ‘web today there are endless variations to the same theme. In this article I want to show you how to build your own ‘Lost Password’ function, so that your users can enjoy the same rich experience that we experience on the web. Once we have walked through this exercise you can alter the functionality to suit your own requirements.

Some web sites will simply email your password; others will email both your user name and password. Some will simply send a link requiring you to change your password in order to login again. I find the latter much too time consuming when I really need to get into a web site quickly. So for the purpose of this exercise, we will take the middle road and set things up so that our routine will send both the login id and the password to the email address on file.

This exercise is meant for intermediate to advanced users who have some familiarity with Visual Studio and are not afraid to get their feet wet with small coding tasks. If you have at least successfully implemented a few code customizations you will likely get through this example without too much trouble.

Getting Started

I have created a sample application called ‘Southwind’ using the Southwind database that ships with Microsoft SQL Server. I am using Iron Speed Designer V3.2.4 Enterprise Edition, although you can use Iron Speed Designer Professional Edition as well. You can download my Lost Password Sample Application which includes the modified database to use as a guide. Unzip the contents into a folder and attach the Microsoft SQL Server database that is included. Don’t forget to have a look at the Readme.doc file, located in the root of the Southwind application folder. More experienced users may decide to use their own application and database and just “follow along” with this tutorial.

The Employee table in the Southwind database did not contain any login information, so I added my own. I added three fields:

Because this application did not have any security associated with it, I added a fourth field called ‘SecurityRoleId’ and a SecurityRole table to match.

I use a separate login field because some clients don’t want to use an email address for a login but would rather use a shorter login id that takes less time to enter ( not everyone is a fast typist!). Of course you could still enter an email address into the login field if you wanted.

I first turned to the Iron Speed Designer sample application ‘Support1’ for clues when I started writing a Lost Password function. You may notice a remarkable resemblance in the Support application that Iron Speed has provided for us on their web site. The Iron Speed support application also uses a ‘Lost Password’ mechanism. You can download the Support1 application from the Iron Speed website.

If you are working with your own application, you will need to make sure that you have successfully run the Role-based Security Wizard first. If you have not yet done this please do it now. See below an example of what I did for Role-Based Security.

And...

Now, open a Windows folder that points toward the Southwind application that you downloaded and extracted from my web site. We want to examine a subfolder called ‘Security’.

** Note that Iron Speed Designer V3.2 and later creates a new folder called ‘Security’ that contains all of the sign-in information. This folder will create created for new applications and for upgraded applications. In previous versions the sign-in and sign-out files are stored in the ‘Shared’ folder (for each application).

Note the Lost Password files that I added previously.

Now open Iron Speed Designer and load the Southwind application that you downloaded from my web site. Navigate to the Security folder and select the SignIn page.

Now, add a standard data-bound button from the Iron Speed Designer tool box on the left.

With our button added, select the button. If you don’t have the HTML QuickView turned on, Select View, HTML Quick View from the Iron Speed Designer menu. You should see the following:

You may need to scroll over to the right using the horizontal scroll bar. Change the name of the button from the ubiquitous but useless name of ‘Button’ to ‘LostPassword’.

Double-click the button again.

We want to add some text to the button along with a tooltip.

Go to the Bindings tab.

Select LostPassword.aspx from the list, or select your own if you are just following along with your own application.

Click Open. Then Click the Save button to save changes to this page. It wouldn’t hurt to compile our application to make sure we haven’t added any coding errors into our example. So let’s do that and continue.

With our button added and configured, let’s examine the heart of the matter, our Lost Password layout page. Select this page from the Application Explorer.

And you will see...

Note that I added an ASPX textbox and a standard button. In order to reference the value contained in this unbound textbox, we need to tell Iron Speed Designer about it in code. Go to the Code tab and note this line of code:

If you are following along in this article and building your own, remember to add this line or your code will not compile. For the ‘Email my password’ button, I used a standard Code Customization called ‘Add Custom Button and Handle its OnClick Event’. Because I have already added the Code Customization, you do not need to do this step. So we need to look at the coding behind the scenes. Click on our safe class file, LostPassword.aspx.vb.

You may need to expand the section in order to see the code. Those of you who have Microsoft Visual Studio .NET installed may choose to open the project file and review our code sample that way.

Note: I am presuming at this point that you have a valid SMTP server installed and configured either on your development machine or within your domain. If you need help in this area, please read the article, "Deploying Applications To A Production Server".

 Private Sub OnButton_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs)
 
    ' Add business logic for OnClick event.
Try
    Dim rec As EmployeesRecord = EmployeesTable.instance.GetRecord("Email = '" & Me.Textbox.Text.Trim() & "'")
    If Not rec Is Nothing Then
        Dim email As New BaseClasses.Utils.MailSender
        Dim strcontent As String = ""
        email.AddFrom("support@milestone.ca")
        email.AddTo(Me.Textbox.Text.Trim())
        email.SetSubject("Resend Password")
        strContent += "Milestone Software: Customer Management Application" & VbCrLf
        strContent += VbCrLf
        strcontent += "Name: " & rec.FirstName & " " & rec.Lastname & VbCrLf
        strcontent += "Email: " & rec.email & VbCrLf
        strcontent += "Login: " & rec.login & VbCrLf
        strContent += "Password: " & rec.password & VbCrLf
        email.Setcontent(strContent)
        email.SendMessage()
        Baseclasses.Utils.Miscutils.Registerjscriptalert(Me.page,"email","Password sent")
        ' Me.Page.Response.Redirect("PasswordSent.aspx")
 
    Else
        Baseclasses.Utils.Miscutils.Registerjscriptalert(Me.page,"email","Please enter a valid email address")
    End If
 
 Catch ex As System.Exception
    ' Handle exceptions.
    Baseclasses.Utils.Miscutils.Registerjscriptalert(Me.page,"email",ex.Message)
 End Try
 
 End Sub

I am trying to retrieve a valid employee record based upon the email address that the user has entered from our Lost Password screen. If the record is found, an email will be sent based upon the email address entered.

I have included basic information, including the persons name, email login ID and password. Here is where you can modify to suit, adding or removing information that you want. You could easily add an HTML template for example, and produce a stunning look and feel for your customers.

I have kept things simple for our example. If the lookup was successful, then I notify the user via a popup message. I do the same thing if it was not successful as well.

Testing

To make sure that this all works, open up the Employees table in the Southwind database and either change an existing record or add a new record. Remember to enter a valid first and last name. You will need to add in a valid login, password and most importantly an email address where our email can be sent.

I entered my own record and ran the application. Note the result:

Adding Functionality

There are many other things that we can here as well. We could add an audit trail and track each request in an audit trail table. We could add a ‘CC’ email address so that administrators are notified every time a password change has been requested. In other applications I have added a ‘Password Sent’ layout page that users are redirected to when the password has been successfully sent.

If you want to take the code and layout pages from this example and modify for your own applications, you will need to change the code that I have to match the database schema in your application.

The EmployeesRecord definition will have to be changed to the record definition for the table that you are using to store the login information. Any references to employee names etc will have to be adjusted accordingly.

Beware that if you simply copy the pages from my application into yours, you will have to change some application naming in each of the .ASPX files. See below for an example:

<%@ Register Tagprefix="Southwind" TagName="Header" Src="../Header and Footer/Header.ascx" %>
 
<%@ Register Tagprefix="Southwind" TagName="Menu" Src="../Menu Panels/Menu.ascx" %>
 
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="BaseLostPassword.vb" Inherits="Southwind.LostPassword" %>
<%@ Register Tagprefix="Selectors" Namespace="Southwind" Assembly="Southwind" %>
 
<%@ Register Tagprefix="Southwind" TagName="Footer" Src="../Header and Footer/Footer.ascx" %>
 
<%@ Register Tagprefix="BaseClasses" Namespace="BaseClasses.Web.UI.WebControls" Assembly="BaseClasses" %>
<%@ Register Tagprefix="Southwind" TagName="ThemeButton" Src="../Shared/ThemeButton.ascx" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Anywhere you see ‘Southwind’ you will need to replace with the name of your own application.

Conclusion

By the end of this article you should now understand how straightforward it is to implement this kind of functionality into every application. Done once, this will add a nice item into your toolbox of application snippets.

If you have any questions about this article, you can contact me via the forums at Iron Speed or via email.

About the Author

Miles Gibson
Consultant and Principal of Milestone Consulting

Miles is the founder of Milestone Consulting and has been providing his clients with the right solutions for over twenty two years. He has been a Microsoft Certified Partner since 1998, and was the first person to offer formal Iron Speed Designer training. Miles continues to contribute to the Iron Speed community as an Iron Speed MVP.

Contact the author.



  Privacy Statement