How to call a Worklight HTTP SOAP Adapter to perform a login page from a webservice?

Question

How can I make the call from the adapter into my HTML file and thus get all the information of input to log in the webservice?

It is a hybrid app is for retail management this app. Our clients would connect for it to have faster information .. For the safety of our data, I need to make a login system that consumes a webservice The problem is that I am new in the area and Worklight still do not understand about consuming webservice and use adapters. What my bosses told me already, is that the webservice is SOAP ..

For example the form:

<form>
    <div data-role="fieldcontain">
        <label for="name">CPF/CNPJ:</label>
        <input type="email" name="cpf" id="cnpj_cpf_codclie" value="" placeholder="insira o cpf/cnpj" data-mini="true"/>
        <label for="name">Codigo da loja:</label>
        <input type="email" name="codLoja" id="codloja" value="" placeholder="insira o codigo da loja" data-mini="true"/>
        <label for="name">Usuario:</label>
        <input type="email" name="user" id="nome" value="" placeholder="insira seu nome de usuario" data-mini="true"/>  
        <label for="name">Senha:</label>
        <input type="password" name="pass" id="senha" value="" placeholder="insira sua senha" data-mini="true"/>
    </div>
        <label><input type="checkbox" name="checkbox" id="checkbox" data-theme="d">Lembrar usuario</label>
        <fieldset class="ui-grid-a">
        <div class="ui-block-a">
                <a href="#" data-role="button" id="button0">Voltar</a>
            </div>
        <div class="ui-block-b">
                <a href="2telaprincipal.html" onClick=""   data-role="button" id="login" data-theme="c" data-corners="true" class="login">Enviar</a>
            </div>

    </fieldset>
</form>

And the Adapter Procedure:

function SambaNet_LoginSamba(params, headers){
var soapEnvNS = '';
soapEnvNS = 'http://www.w3.org/2003/05/soap-envelope';

var mappings = {
    roots: {
        'LoginSamba': { nsPrefix: 'tns', type: 'tns:LoginSamba' }               
    },

    types: {
        'tns:LoginSamba': {
            children: {
                'nome': { nsPrefix: 'tns' },    
                'identificadorloja': { nsPrefix: 'tns' },   
                'senha': { nsPrefix: 'tns' },   
                'seguranca': { nsPrefix: 'tns' }    
            }
        }
    }
};
var namespaces = 'xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:tm="http://microsoft.com/wsdl/mime/textMatching/" xmlns:http="http://schemas.xmlsoap.org/wsdl/http/" xmlns:tns="http://tempuri.org/" xmlns:mime="http://schemas.xmlsoap.org/wsdl/mime/" xmlns:soap12="http://schemas.xmlsoap.org/wsdl/soap12/" ';
var request = buildBody(params, namespaces, mappings, soapEnvNS);
var soapAction = 'http://tempuri.org/LoginSamba';
return invokeWebService(request, headers, soapAction);
}

I wonder how I could make the system login from the login button, calling the adapter and performing the same

Answer 1

As you mentioned that you are new to Worklight, I believe it is a good idea for you to invest some time studying the getting started material for Worklight available at:

http://www.ibm.com/developerworks/mobile/worklight/getting-started.html

It will give you a better understanding on how Worklight apps work.

For your specific immediate needs you can focus on the Worklight server-side development and Authentication and security topics there. But is is worth to study them all for sure.

A More direct answer:

If you have a worklight adapter called LoginAdapter that contains a procedure called LoginProcedure you can use this code to call this adapter passing the user and password from your form

In you HTML use something like:

<input type="Button" onClick="simpleLogin()" />

And declare the function simpleLogin in the file js/main.js

This is a sample of code that can go in your main.js file

function simpleLogin(){

    var user = document.getElementById("nome").value
    var password = document.getElementById("senha").value

    var invocationData = {
       adapter : 'LoginAdaper',
       procedure : 'LoginProcedure',
       parameters : [user,password]
     };


    var options = {
        onSuccess : loginSuccess,
        onFailure : loginFailure
    };

    WL.Client.invokeProcedure (invocationData, options);

}

function loginSuccess(){
    alert("Login Success");
    //whatever you want to do after success

}

function loginFailure(){
    alert("Login Failure");
    //whatever you want to do after failure
}

That is how you call an adapter procedure. But if you want to really secure your app with a real authentication mechanism, you should look at the getting-started module for authentication and security. That is more complex.

Also note that you should not redirect to another html page. Worklight hybrid apps uses a model of a single page for the app. You need to either use one div for each page and them hide/show each one when needed or have different html files with code that will be injected into your single html page using jquery or any other javascript framework