B4J Question Login page: I need a very simple example (no PHP)

LucaMs

Expert
Licensed User
Longtime User
I am still a beginner with these arguments (I never needed them and I always snubbed them, unfortunately).

Could you post please an example of a Login page suited to a B4J server?

Simple, without using dbs.

So that I can redirect to a page only an authenticated user (via a handler class of the server).



Thanks in advance.
 

udg

Expert
Licensed User
Longtime User
Simple, without using dbs.

Do you mean a login with credentials buried in code? Don't you believe it will be too risky?

Umberto
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
Yes, I know, but it is just to understand the "flow", the calls.

Yesterday I read an Italian blog which greatly simplifies Ajax.
I post the link, I suspect that you will understand it well ;)

It uses PHP. Also I would like to be able to use the B4J server's handlers.

This is an example (the author will refine it later in his article to adapt it for IE)

B4X:
var myRequest = null;

function CreateXmlHttpReq(handler) {
  var xmlhttp = null;
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        alert(myRequest.responseText);
    }
}

function esempio3() {
    myRequest = CreateXmlHttpReq(myHandler);
    myRequest.open("GET","primo.php");
    myRequest.send(null);
}
</script>
<input type="button" value="Clicca per lanciare la richiesta" onClick="esempio3()" />


primo.php
B4X:
<?
echo("Questi dati vengono dal PHP");
?>
 
Last edited:
Upvote 0

udg

Expert
Licensed User
Longtime User
Hi Luca,

I am sure you already had a look to this tutorial.
You could modify it commenting out any DB-related call, substituting it with code like "if password="test" then.." and similar that apply.
Anyway, I opened up that project for you to try to describe the logic and flow it is based on.

Step 0
When the client points a browser to localhost:51042 (or any other address/port the server is on), it is served document www/index.html, whose sole task is to present a link to the login page. This happens because the B4J server program defaults to www dir and so it picks up and deliver that index.html file.
Step 1
Following the link in step 0, you land on document index.html in dir login_example.
This document let you enter data for a new user or go to document signin.html to enter data for an existing user.
Let's have a brief look to signin.html since its simpler.
First rows prepare the form to enter username and passord. Then jQuery is used to listen for the "Sign In" button click and to prepare parameters to call SigninHelper handler (no surprise here to read that the parameters are the username and password entered in the form..).
Last note about signin.html: when it receives control back from SigninHelper handler, it on success redirects to document members/index.html in the reserved area.
So in a way, your flow is signin.html - SigninHelper - signin.html - members/index.html
Step 1.1
This is the realm of SigninHelper handler. It reads username/password from the req parameter and checks with the DB if the credentials are ok (here you could substitute the code with an in-code check or simply set success=true for any user/pwd).
Then a response is made with string "success" or an appropriate error in order to signal the calling code (signin.html) how the credentials check went.
Lastly with
req.GetSession.SetAttribute("registered", success)
req.GetSession.SetAttribute("name", userName)
current data session is updated with two elements used by following pages/handlers.
Step 2
If you arrive on members/index.html then there are two reserved links for you: MembersHandler and Logout handler (a special greeting and a way to go back to the starting point).

Ok, this is the flow. Now for the interesting part: the filter.
To give you access to document members/index.html (on credentials check OK), the B4J has to check with filter MembersFilter because anything in directory members (and below) is protected by this filter.
The filter check whether a session variable "registered " exists and has value True.
There is also a check on time elapsed from your last activity (30min).
So, if session is given permission to procede you reach the protected resource (an html page, an handler, a pdf document, whatever).
Otherwise you are redirected to Step 1 above.

Hope the above will help you.

Umberto
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
First of all, many thanks for your reply and your time, Umberto!


I need to read it well (caro Umberto, quanto ti capirei meglio in italiano :D).

To do some testing, I'm trying something relatively simple, for those who are knowledgeable about this matter:
add to the [Server] CCTV example a page where only a password is requested.

In that example, the Index.html does all the work ("calling" the GetImages to display images).

I tried to create a new Index.html file only for the password and then to "run" the original index.html (changing its name), but at that point, after viewing the first image, everything freezes.
---------------

Yes, I have tried to understand [Server] Login System & Filters Tutorial, especially since in real cases I'll use something similar, with the databases.
I do not understand, in particular, two lines in the SignIn.html

$. ajax;
date: $ ("# registerForm"). serialize ()

I would like to avoid the registration form (only in CCTV and for tests).

However, I will probably be able to understand after reading your good explanation (I hope :rolleyes:)


Many thanks again.


[edit] registerForm confused me; in fact it refers to the built Form within the file (signin.html), not to an external file for registration (the eventual registration that is called in the file Index.html]
 
Last edited:
Upvote 0

udg

Expert
Licensed User
Longtime User
Hi Luca,
quanto ti capirei meglio in italiano
you can PM me at any time or open a thread in the Italian language forum.

If you like to experiment a bit, you could modify CCTV server code to steal pieces from the Login&Filter code.
What I mean here is:
1. www/index.html in CCTV server substituted by signin.htm from login_example
2. create a www/members dir and put in as index.html the original CCTV server index.html file
3. add to CCTV server the filter module and the SigninHelper handler in which you modify code for credemtials checking.

Those are the most relevant elements. Reading the code something else will come to mind.

Umberto
 
Upvote 0

rwblinn

Well-Known Member
Licensed User
Longtime User
Hi Luca,

attached in another solution based upon a B4J WebApp I have currently running.

This webapp shows a way to handle a login dialog to obtain Username and Password. It is based upon jQuery Mobile.
The login data is verified against a JSON file (users.json) located on the server in the webapp folder.
This JSON file holds an array of Username and Password.

There might be better solutions regarding security, but it serves its purpose.

Pls read the source code to find out more.

Trust this helps.
 

Attachments

  • B4JHowToWebAppLogin.zip
    19.7 KB · Views: 313
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
Hi Luca,

attached in another solution based upon a B4J WebApp I have currently running.

This webapp shows a way to handle a login dialog to obtain Username and Password. It is based upon jQuery Mobile.
The login data is verified against a JSON file (users.json) located on the server in the webapp folder.
This JSON file holds an array of Username and Password.

There might be better solutions regarding security, but it serves its purpose.

Pls read the source code to find out more.

Trust this helps.



Many thanks Rob, I'll try it
 
Upvote 0

rwblinn

Well-Known Member
Licensed User
Longtime User
Hi Luca,

pls find here an example based on previous, but using usergroups. this allows flexibility in managing users.
It is again based on using jquery mobile ui - but with no additional own styling used.
 
Last edited:
Upvote 0
Top