Home|Sitemap|Contact

Web Design Best Practices

Web Application Authentication Tutorial:
Page 2 - Basic Login Form.

Login Form
Please Login

test

password

 

Code for the Basic Login Form
(ASP/VBScript/MS Access):

WARNING!!! This example code is not safe for use in any production environment.  Skip to the end of the tutorial for production level code!

Other Versions:
ASP/mySQL | ASP/MS SQL & MSDE | PHP/mySQL

<% Option Explicit 
' WARNING: THIS CODE IS A BASIC EXAMPLE AND IS IN NO WAY READY FOR USE
' IN ANY PRODUCTION ENVIRONMENT.

Dim resultMessage, userid, password, userName


if UCase(Request.ServerVariables("HTTP_METHOD")) = "POST" then
    userid = Request.Form("userid")
        password = Request.Form("password")


    if verifyLogin = "OK" then
        Session("userid")=userid
        Session("username")=userName    Session("login")=true
        response.redirect("loginSuccess.asp")
    else
        resultMessage = "Please verify your User ID and" &_
                        " Password were entered correctly"
    end if 
else
    ' This form has not been posted
    resultMessage = "Please Login"
end if


' Some ADO constants used in the database routines.
Const adOpenStatic = 3
Const adLockReadOnly = 1
Const adCmdText = 1


' To separate the complexity of opening the recordset from
' the function of this example, I am going to implement a
' function to execute the login attempt.

Function verifyLogin

Dim conn, command, connection, rs, result
    command = "SELECT password, first, last FROM users " &_
            "WHERE (userid = '"& userid &"');"
    result = "Attempting Login"


    ' Create an ActiveX Data Object for the database connection
    Set conn = Server.CreateObject("ADODB.Connection")

    ' Specify the connection string for the database. 
    ' OLEDB connections offer better performance and stability than ODBC.
    ' Refer to these Microsoft Knowledge Base articles: KB Q10191, KB Q10023
    connection = ("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" &_
                  Server.MapPath("/relativepath/examples.mdb"))


    ' Try to open a connection to the database
    conn.open connection

    ' Create an ActiveX Data Object for the recordset in which
    ' we will return the results of our query. 
    Set rs = Server.CreateObject("ADODB.RecordSet")

    ' Execute the query (command) as read only (we won't be updating)
    rs.open command, conn, adOpenStatic, adLockReadOnly, adCmdText

    if rs.bof AND rs.eof then 'do we we have records?
        ' we didn't get a record so the userid was not found
        result = "Invalid User ID"
    elseif rs.recordcount > 1 then ' Should only have one matching record
        ' if we got multiple records, then we may have been
        ' subject to a SQL injection attack. We will fail
        ' rather than returning a value
        result = "Multiple Records"
    elseif rs("password").value = password then
        ' valid login
        result = "OK"
        userName = rs("first").value & " " & rs("last").value
    else        result = "Bad Password"
    end if 
    rs.close
    set rs = nothing
    conn.close
    Set conn = nothing
    verifyLogin = result
End Function
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="? 2005, 2006 Roderick Divilbiss">
<script language="javascript" type="text/javascript">
<!--
function validate(objForm) {
    var errorMsg = '';
    if (objForm.userid.value=='') {
        errorMsg = 'Please enter your User ID.\n';
    }
    if (objForm.password.value=='') {
        errorMsg = errorMsg + 'Please enter your Password.';
    }
    if (errorMsg!='') {
        alert(errorMsg);
        objForm.userid.focus();
        return false;
    } else {
        // prevent a double submission by disabling the submit button.
        objForm.btnSubmit.value = "Please Wait";
        objForm.btnSubmit.disabled = true;
        return true;
    } 

}
//-->
</script>

<title>Login Page (Basic)</title>
<style>
<!--
body {
    color: #000000;
    font-size: x-small;
    font-family: Verdana, Arial, Helvetica, Sans Serif;
    }
span {
    color: #808080;
    padding-left: 15px
    }

label {
    color: #000080;
    font-weight: bold;
    padding-right: 5px
        }
legend { 
    color: #000080; 
    font-style: italic;
    font-weight: bold
    }

.hint {
    color: #808080;
    padding-left: 15px
    }

#results {
    color: #FF0000;
    font-size: medium;
    font-weight: bold;
    }
-->
</style>
</head>


<body>
<form method="POST" action="login.asp" onsubmit="return validate(this);">
  <fieldset>
    <legend>Login Form</legend>
    <div id="results"><%=resultMessage%></div>
    <p><label for="userid">User ID:</label>
       <input id="userid" name="userid" type="text">
       <span class="hint">test</span></p>
    <p><label for="password">Password:</label>
       <input id="password" name="password" type="password">
       <span class="hint">password</span></p>
    <p><input type="submit" value="Submit" name="btnSubmit"></p>
  </fieldset>
</form>
</body>
</html>

NEXT: Basic Login Page Explained

PrintBookmarkComment