How to Authenticate Login form without using asp controls - asp.net

Question

I have put together a really nice Login page in which I am using HTML input tags for my username, password, and login button. I have two different login forms, one for each type of user (student user, and business user). I have never authenticated against a database so I assumed my method would be easy to execute. After scouring the web for easy methods to implement with what I already had I found it nearly impossible to figure out how to accomplish my goal without having to use asp:login control. Begrudgingly, I scrapped what I had and threw in the asp:login control. My problem is, that it was a pain to implement (creating stored procedures, and messing with the web.config), it looks hideous as it doesn't not conform with the CSS I had previously written, and the FormsAuthentication I am using only allows me to redirect one user after login (to the home portal upon succesful login, and back to the login page if login failed.) using the authentication Forms mode in my Web.config:
<forms defaultUrl="~/InteriorStudentPortal.aspx" loginUrl="~/ExteriorLogin.aspx" slidingExpiration="true" timeout="2880"></forms>
Since I have two users I need to redirect based on what user is logging in. Here is a sample of the asp:login control that I have been using:
<asp:Login ID="Login1" runat="server" CssClass="Login" OnAuthenticate= "ValidateStudent" Width="313px"></asp:Login>
Along with the back code:
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Security
Partial Class ExteriorLogin
Inherits System.Web.UI.Page
Protected Sub ValidateStudent(sender As Object, e As AuthenticateEventArgs) Handles Login1.Authenticate
Dim studentId As Integer = 0
Dim constr As String = ConfigurationManager.ConnectionStrings("DatabaseConnectionString").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("Validate_Student")
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("#Username", Login1.UserName)
cmd.Parameters.AddWithValue("#Password", Login1.Password)
cmd.Connection = con
con.Open()
studentId = Convert.ToInt32(cmd.ExecuteScalar())
con.Close()
End Using
Select Case studentId
Case -1
Login1.FailureText = "Username and/or password is incorrect."
Exit Select
Case -2
Login1.FailureText = "Account has not been activated."
Exit Select
Case Else
FormsAuthentication.RedirectFromLoginPage(Login1.UserName, Login1.RememberMeSet)
Exit Select
End Select
End Using
End Sub
End Class
My goal is to either continue using the asp:login controls and figure out how to allow for multiple user redirects after login....OR preferably, authenticate without using the asp:login and use my original HTML and CSS. Here is what I had prior to using the asp control:
<%-- STUDENT LOGIN --%>
<div class="student_login">
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Student Login</h1>
<span>Sign in below to login to start showing your skills, earning money, and gaining valuable experience...and did I mention earning MONEY.</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<input name="password" type="password" class="input password" placeholder="Password" />
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
Register
</div>
</form>
</div>
</div><!--close student_login-->
NOTE: This section of code is written within a content placeholder. The master page does have a <form runat="server"></form> tag encompassing the body of the page. I do not have any back code for this particular method as I really have no clue how to authenticate without using the asp:login control and FormsAuthentication. Can someone please help me understand how to accomplish authenticating without the asp:login so that I can keep my nicely designed Login form? And please be generous or kind with the comments/explanation, this is my first login form so I have no experience doing this.

Answer 1

You can use the LayoutTemplate of the Login control to do what you want.
The trick is that you need to use a Literal with the ID of FailureText, the user field is a TextBox with ID of UserName, and another TextBox with the ID of Password.
You also will need to trigger a Login command which could be a Button.
This allows you to customize your own layout, I've done this a few times myself. Below is a quick copy/paste untested version with your HTML as an example.
See an MSDN reference at https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.login.layouttemplate.aspx
<asp:Login ID="Login1" runat="server"
OnAuthenticate="ValidateStudent"
Width="100%">
<LayoutTemplate>
<div class="student_login">
<div id="wrapper">
<asp:Literal ID="FailureText" runat="server"></asp:Literal>
<asp:ValidationSummary ID="vsLogin" runat="server" ValidationGroup="Login" />
<div class="header">
<h1>Student Login</h1>
<span>Sign in below to login to start showing your skills, earning money, and gaining valuable experience...and did I mention earning MONEY.</span>
</div>
<div class="content">
<asp:TextBox id="UserName" runat="server" CssClass="input username" placeholder="Enter your username"></asp:TextBox>
<asp:RequiredFieldValidator id="rfvUserName" runat="server"
ControlToValidate="UserName"
Display="None"
ErrorMessage="Username is required"
ValidationGroup="Login">
</asp:RequiredFieldValidator>
<asp:TextBox id="Password" runat="server" CssClass="input password" TextMode="Password" placeholder="Password"></asp:TextBox>
<asp:RequiredFieldValidator id="rfvPassword" runat="server"
ControlToValidate="Password"
Display="None"
ErrorMessage="Password is required"
ValidationGroup="Login">
</asp:RequiredFieldValidator>
</div>
<div class="footer">
<asp:Button ID="Login" runat="server" CommandName="Login" CssClass="button" Text="Login" ValidationGroup="Login" />
Register
</div>
</div>
</div>
</LayoutTemplate>
</asp:Login>