Can I do this? Who are you? Yes you can do it.

Authentication is always a hard problem for any web application. For an Ajax application it’s even more complex. Imagine you make a request which gives you an access denied, what state should the application be in? And when the user logs in again, how can the request - or requests that happened while not being logged in - be retried?

This is where jpf.auth comes in. It helps you to set up authentication for your entire application in a declarative manner. First, let’s look at how to set-up basic login and logout teleport methods, to which the auth element can connect to.

<j:teleport>
    <j:rpc id="comm" protocol="cgi">
        <j:method name="login" url="login.php">
            <j:variable name="username" />
            <j:variable name="password" />
        </j:method>
        <j:method name="logout" url="logout.php" />
    </j:rpc>
</j:teleport>

<j:appsettings>
    <j:auth login  = "rpc:comm.login(username, password)"
            logout = "rpc:comm.logout()" />
</j:appsettings>

This is step one. jpf.auth has two, quite obvious javascript methods that deal with login and logout:

jpf.auth.login(username, password)
jpf.auth.logout();

These can be used in conjunction with a button like this:

<j:textbox id="txtUser" />
<j:password id="txtPass" />
<j:button onclick="jpf.auth.login(txtUser.value, txtPass.value)">
	Log in
</j:button>

You may use the ‘action’ attribute as a shorthand:

<j:textbox type="username" />
<j:password type="password" />
<j:button action="login">
	Log in
</j:button>

Together with validation a log-in window may look like this:

<j:window id="winLogin" modal="true" visible="false">
     <j:label>Username:</j:label>
     <j:textbox type="username" value="test"
       required="true" minlength="3"
       invalidmsg="Invalid username;Please fill in your username." />
     <j:label>Password:</j:label>
     <j:textbox type="password" value="test"
       required="true" minlength="3"
       invalidmsg="Invalid password;Please fill in your password." />
     <j:label id="loginMsg" left="10" bottom="15" />
     <j:button action="login" default="true">
          Log in
     </j:button>
</j:window>

Ok, so now we need to tell auth where it can find the log-in window.

<j:appsettings>
    <j:auth login  = "rpc:comm.login(username, password)"
            logout = "rpc:comm.logout()"
            window = "winLogin" />
</j:appsettings>

There are two ways to show the log in window at application start-up: The first is the simplest way, by adding autostart="true" to the auth tag. This will show the window at application start-up. The second way is better because it will allow the application to log in automatically if the credentials are set in a cookie; this is done by simply making an Http request at application start-up, usually to load data in a model:

<j:model load="url:get_data.php" />

The request will get an Http response code 401 from get_data.php when he’s not logged in, or receive the data when the cookie is set and still valid. Upon receiving the 401, jpf.auth is notified and will show the login window. This will also happen when the application has been running for a while, and suddenly the session expires. When a 401 is received, jpf auth will show the login window. Any other request that fails because of the 401 is retried automatically after a successful login. This also goes for complex save, or load actions - including the callbacks that were set.

The application will have different states for when the user is logged in, logged out, or when it is logging in. For these you can specify ’state objects’ which set the application state accordingly. Here’s an example of the states for a simple application:

<j:state-group
  loginMsg.visible  = "false"
  winLogin.disabled = "false">
    <j:state id="stFail"
        loginMsg.value   = "Log in failed"
        loginMsg.visible = "true" />
    <j:state id="stError"
        loginMsg.value   = "Please check network"
        loginMsg.visible = "true" />
    <j:state id="stLoggingIn"
        loginMsg.value    = "One moment please..."
        loginMsg.visible  = "true"
        winLogin.disabled = "true" />
    <j:state id="stIdle" />
</j:state-group>

The state-group element defines the base state from which all state elements inherit. Setting a state to active can be done using a simple javascript call:

stError.activate();

You can tell jpf.auth that it should set a certain state when it reaches that state during the log in process. The following code does this for all the states that can occur, except the logout-state:

<j:appsettings>
    <j:auth login         = "rpc:comm.login(username, password)"
            logout        = "rpc:comm.logout()"
            window        = "winLogin"
            fail-state    = "stFail"
            error-state   = "stError"
            login-state   = "stIdle"
            waiting-state = "stLoggingIn" />
</j:appsettings>

Click here to see the auth element in action.

—–

If you are new to Javeline Platform don’t hesitate to try it out. The new ajax.org website contains the downloads and reference guide which will get your started.