Secure Web Login Screens
From Xojo Documentation
When creating login screens for your web apps, it is important that that the user's login information is protected. By default, a hosted web app cannot transmit information securely. This means that the username or password could be read by anyone watching network traffic. The solution to this is to use SSL to encrypt the traffic between the web browser and the web app. In order to use SSL, you'll need to install a certificate on your web server and set up your app to use it.
Refer to UserGuide:SSL for Standalone Web Apps for information on how to set up a standalone web app to use SSL. Use UserGuide:Xojo Cloud for simple 1-click SSL setup. For other CGI web app deployments, set up the SSL as required by your web server.
Designing the Login Screen
A typical login screen prompts for a username of some kind (maybe an email address or some other unique identifier) and a password. A good strategy for creating your login screen is to use a modal dialog on an otherwise empty page. This allows you to deal with the complexities of the login process without any other code possibly getting in the way.
Displaying the Login Page
Because SSL connections are noticeably slower than non-SSL connections (because no caching is allowed, among other things), you likely won't want your entire web application to be using SSL. What you really want is for your app to switch to SSL when it gets to the login screen.
If you've created your login page as a web page called LoginPage that displays a web dialog in its Shown event, you can use code like this to check if the connection is secure in the LoginPage.Open event:
// If not have the browser load the application securely
If Not Session.Secure Then
Dim host As String = Session.Header("Host")
Dim url As String = "https://%22 + host
This reloads your web app and securely takes the user to the login page.
To display the login page by default, you have the Session do it. In the WebSession.Open event add this code which displays the login page whenever a secure connection is made to the web app:
Remember the User
If you look at the screen shot above, there is a "Remember Me" checkbox. Typically these are used to remember the UserID to help jog the end-user's memory about what their password might be. This function uses a browser feature called Cookies which stores a snippet of information on the computer where the user is (assuming cookies are enabled, of course).
Note: It is best to not remember the user's password because if this box gets checked on a public computer (like a library or internet cafe) the user's account could be compromised.
To make the checkbox work, you need two pieces of code in LoginDialog.Shown:
UserNameField.Text = Session.Cookies.Value("username")
RememberMeCheck.Value = True
This code first checks to see if the "username" cookie has been set, and if it has, places the value into the Username TextField, checks the RememberMe checkbox and sets the focus to the Password field (mostly a convenience so the user doesn't need to do that manually).
Then create a DoLogin method on LoginDialog that checks the value of the RememberMe checkbox and either saves the username to the cookie or removes the cookie:
// Now validate the credentials and if they are OK, you can close the dialog
// and show the main page.
If ValidateCredentials Then
MsgBox("The username/password combination does not match.")
Lastly, in the Action() event of the Login button call the DoLogin method:
Capturing the Return Key
Users like to be able to enter their information and press return to login (rather than click the button). You can enable this behavior by adding this code to the KeyPressed event on the LoginPage:
Now when the user types their username and/or password and pressed the Return key, the dialog will be dismissed just as if they had clicked the Login button themselves.