TechNote
Adding a Login feature

Product: MioFactory

A login feature, makes it possible to control the access to your application, and can be added to any application built with MioFactory.

Login Sample Window

The login feature is a window shown when the application starts and where the user must enter a valid username and password.

A server is contacted to approve the provided login information. This server should reply with a basic XML file.

With a small change in the MioScript code of your application and with the addition of a couple of files, you will be able to add a login feature to your application.

We will see below how to add more options and an auto-login feature.

1. Importing the files

The following files are required:

{o}	login.htm This document contains the input fields and and a script that connects to the server to check if the login information is valid.
{o}	login.k MioScript code for the login window.
{o}	login.jpg Login window background. The size of the login window is adjusted to the size of this image.
{o}	login_bt.jpg Background image for the Login and Cancel push buttons.

To include the files in your project:

{o}	Download the archive file login.mioa;
{o}	From MioFactory, open a project in which you want to add the login feature;
{o}	Import the archive file (File/Import Archive).

2. MioScript Code

The MioScript code file login.k will be automatically linked to your application, and no change is required in this script.

To show the login window, you just have to call the MioScript function login(), for example from event.load.

When login is successfully completed, the MioScript function login_success() is called.

Example

The code below is extracted from a desktop alert application:

event.load
    extern.close("{APP_NAME}")
    app.init("{APP_ID}", "{APP_NAME}", "{APP_VERSION}", "{APP_BUILD}", "{CREATE_LOG}")

    window.main.statusIcon.show("{APP_NAME}", "statusIcon.ico")

    &brEngine = browser.createEx(main, path.rsc("index.htm"), 0,0,250,250)
function.end

To enable the login feature, the code should be changed to look like this one:

event.load
    window.main.autoClose(false,false)
    window.main.pos.now(0,0,0,0)

    extern.close("{APP_NAME}") // One instance allowed
    app.init("{APP_ID}", "{APP_NAME}", "{APP_VERSION}", "{APP_BUILD}", "{CREATE_LOG}")

    window.main.statusIcon.show("{APP_NAME}", "statusIcon.ico")

    login()
event.end

function.login_success()
    &brEngine = browser.createEx(main, path.rsc("index.htm"), 0,0,250,250)
function.end

The changes we have done to enable the login feature are shown in bold.

3. HTML Document

The HTML document login.htm is in charge of collecting the login information, saving it in the application memory, and communicate with the server to check if the provided login information is valid.

The URL to the server-side script to check the login information is set in the HTML document as follow:

If you perform a test with this URL, a valid username and password me and secret.

The strings {USERNAME} and {PASSWORD} are replaced by the username and password provided by the user.
The string {UID} is replaced by a number incremented each time the URL is called. This is to prevent the server request for being cached. This number is not used server-side.

4. Look & Feel

You can replace the files login.jpg and login_bt.jpg by your own ones.
You can also change the styles in the bottom of the HTML document to change the position of the elements.

5. Server-side Script

A script running on your server will check for each request if the username and password are valid.

If the username and password are valid, your script should return:

If the username or the password is invalid, your script should return:

<MIOAPP>
<STATUS>INVALID</STATUS>
</MIOAPP>

Here is a sample of a PHP script returning OK if the username is me and the password secret:

<?php
    import_request_variables('gpc', '');
    echo('<MIOAPP>');
    if($username == 'me' && $password == 'secret') {
        echo('<STATUS>OK</STATUS>');
    } else {
        echo('<STATUS>INVALID</STATUS>');
    }
    echo('</MIOAPP>');
?>

Of course you are not limited to PHP, and your script can connect to a database to check if the username and password are valid.

6. Going further

With small changes in the login.htm file, it is possible to add links (lost my password, register etc.) and features such as auto-login.

To test an advanced login window, please proceed as follow:

{o}	Create or open a project;
{o}	Add the login feature as explained in this document;
{o}	Download the archive file login_htm_advanced.mioa;
{o}	Import the archive file in your project;
{o}	You are ready to test the application.