worklight j_security_check not found

I'm using Worklight Studio Plugin 6.0.

I am trying to get FormBasedAuthentication working. When I run and deploy my worklight project, the app login page is presented successfully. However when I click on the login button, an error is thrown on the server console:

[ERROR ] FWLSE0048E: Unhandled exception caught: SRVE0190E: File not found: /apps/services/j_security_check [project DojoTest] SRVE0190E: File not found: /apps/services/j_security_check

This directory doesn't exist in the project. I've tried creating another project but it doesn't add the missing folder.

Any advise is appreciated. Thank you in advance.

<div id=BorderDiv>
                <div class=imageDiv id="imageDiv">
                    <center style="color:#66FF66">
                        Test
                    </center>
                </div>
                    <fieldset id="loginFieldSet">
                        <legend>Login:</legend>
                        <div data-dojo-type="dojox/mobile/FormLayout"
                            data-dojo-props="columns:'auto'">
                            <div>
                                <label>User name*: </label> <input id="username" type=text
                                    data-dojo-type="dojox.mobile.TextBox" size="50"
                                    placeholder="Enter Username" name="username" required></input>
                            </div>
                        <div>
                                <label>Password*: </label> <input id="password" type=password
                                    name="pass" placeholder="Enter Password" size="50"
                                    data-dojo-type="dojox.mobile.TextBox" required> </input>
                            </div>
                        </div>
                        <div>
                            <center>
                                <input type="button" class="formButton" id="AuthSubmitButton" value="Login" /> <input type="button" class="formButton" id="AuthCancelButton" value="Cancel" />
                            </center>
                        </div>

                    <!--  <button data-dojo-type="dojox.mobile.Button" onclick="login()">Login</button>-->
                    </fieldset>
            </div>

//Create the challenge object
var challengeHandler = WL.Client.createChallengeHandler("SampleAppRealm");

    /*
     * Read the response of the challenge. The default login form
     * that the server returns contains a j_security_check string.
     * If the challenge handler detects it in the response, return true
     * 
     */
    challengeHandler.isCustomResponse = function(response) {
        if (!response || response.responseText === null) {
            return false;
        }
        var indicatorIdx = response.responseText.search('j_security_check');

        if (indicatorIdx >= 0) {
            return true;
        }
        return false;
    };

    //Hanlde the Challenege. In our case, we do nothing!
    challengeHandler.handleChallenge = function(response) {
    //do nothing
    };

    //Bind the login button to collect the username and the password
    $('#AuthSubmitButton').bind('click', function () {
        var reqURL = 'j_security_check';
        var options = {};
        options.parameters = {
            j_username : $('#username').val(),
            j_password : $('#password').val()
        };
        options.headers = {};
        challengeHandler.submitLoginForm(reqURL, options, challengeHandler.submitLoginFormCallback);
    });

    $('#AuthCancelButton').bind('click', function () {
        alert("Cancel Clicked");
        sampleAppRealmChallengeHandler.submitFailure();
    });

    challengeHandler.submitLoginFormCallback = function(response) {
        var isLoginFormResponse = challengeHandler.isCustomResponse(response);
        if (isLoginFormResponse){
            challengeHandler.handleChallenge(response);
        } else {
            login();
            $('#password').val('');
            $('#username').val('');
            challengeHandler.submitSuccess();
        }
    };

    function login(){
        require([ "dojo/dom", "dijit/registry" ], function(dom, registry) {
            var username = dom.byId("username");
            var password = dom.byId("password");
            alert("username= " + username.value + " AND password = "
                    + password.value);

            try {
                registry.byId("mainMenuView").performTransition("myAcctView", 1,
                        "slide");
                WL.Logger.debug("Moved to My Account view");
            } catch (e) {
                WL.Logger.debug("Error Caught: " + e);
            }
        });
    }

Solution

In form-based authentication it is expected from the server to send a login form in response to a connect attempt (you are not required to display the HTML sent by the server, it's just the response that matters mostly).

Basically, if your app's first screen is the login form and you click some login button and this button does a login attempt, it will first the first time, because only in the first time will the server get a request from the app and the response to that request would be the challenge - the login form.

So you need to make sure that you first connect to the server using WL.Client.connect and only then allow the user to do any login attempts (can be a login button). This is the usual scenario why the above error is given.

Note also that this is not a resource that exists in your Worklight project; it's a resource that exists on the server. This is why you cannot find it.

Please review the authentication concepts and form-based tutorial (and its sample) user documentation: http://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.0.0/com.ibm.worklight.getstart.doc/start/c_gettingstarted.html?cp=SSNJXP