Tutorial 4: User Access

In this tutorial we will create a simple mechanism to give users access to private areas of a website.


Note: The code in this tutorial is only for illustrating the use of SistevProcess, so not recommended for use in production applications, as they can have security problems and other vulnerabilities.

We will make use of the table "users" who believe in the tutorial "Registration Form". The following SQL contains the structure of the users table:


1:  CREATE TABLE `examples`.`users` (  
2:   `id` INT NOT NULL AUTO_INCREMENT ,  
3:   `name` VARCHAR(45) NOT NULL ,  
4:   `last_name` VARCHAR(45) NOT NULL ,  
5:   `email` VARCHAR(45) NOT NULL ,  
6:   `password` VARCHAR(100) NOT NULL ,  
7:   PRIMARY KEY (`id`)   
8:   );  
9:         

Let us assume that a user record in the tutorial "Registration Form" with the following information:
  • name: name
  • last_name: last_name
  • email: user@example.com
  • password: 12345
We will then work with the data of this person.

Now let's create a new project in SistevProcess and a process called "user_access". Then drag a Code workspace component, which we will call "Receive Request". Then drag Condition three components to the workspace and we link to the component "Receive Request". At first Condition component will call "Access Attempt?", The second component will call Condition "ShowForm?", And the third component will call Condition "Approved Access?". So far our process looks like this:



Then add a Database component we link to the component "Access Attempt?" we will modify the Database component by double-click. We'll call "QueryUser" set the details of your local MySQL host, username and password in database set "examples" and the following SQL code:


1:  SELECT * FROM `examples`.`users` WHERE `email`='{POST::email}' AND `password`=sha1('{POST::password}');  
2:         

The latter code allows us to check if the user is trying to access registered. Finally in Stand Output Name: query_user and save your changes. Now drag a new component to our Code workspace and we link to the component "QueryUser", the component will call Code "Create Session". So far our process looks like this:



Well now we will modify the Create Session component with the following code:


1:  if(isset($data_flow['query_user']) &&   
2:    count($data_flow['query_user'])>0){  
3:         
4:       $row = $data_flow['query_user'][0];  
5:         
6:       $_SESSION['name'] = $row->name.' '.$row->last_name;                 
7:       $data_flow['user_access'] = TRUE;  
8:       $data_flow['username'] = $_SESSION['name'];  
9:    
10:  }else{  
11:       $data_flow['show_form'] = TRUE;  
12:       $data_flow['form_errors'] .= '<p>Email and/or Password invalid</p>';  
13:  }  
14:         

What we do in the above code is verify on line 1 and 2 if the QueryUser component returns a valid user from the database. If indeed the user is valid we create a session with the first and last name of the user who will use later. Otherwise send an error message to be shown on the form.

Now, we will create an alias for the current process called "user_access", do this by right clicking on the process name in the Inspector Panel and selecting "Manage URLs" in the window add a url alias type with the name "user_access ", click Add URL and url should appear as follows:


1:  http://[your_sistevprocess_path]/server/index.php/user_access  

Well then we add a form component to the workspace we link to the component "ShowForm?" and double click on the form to edit component. Stand as component name: "AccessForm" in Title Form Stand "Access Form" Submit URL field put the url alias type created in the previous step, and we POST method. Then open the "Fields" tab and add the following fields:
  • Email
    • Label: Email:
    • Name: email
    • Type: text
    • Value: {POST::email}
  • Password
    • Label: Password:
    • Name: password
    • Type: password
    • Value:
  • Token
    • Label: token
    • Name: token
    • Type: hidden
    • Value: {token}
  • Access
    • Label: Access
    • Name: access
    • Type: submit
    • Value:
Then we click on save and our process should look like:



Now if previsualizamos the project will see something like this:


May we have created the login form but we must give functionality, if you click right now on the Access button on the form you just created nothing happens, this is because we need to create a mechanism to validate the information sent by the user. To do this we will change the "Receive Request" component, in which we will insert the following code:


1:  $data_flow['bdquery'] = FALSE;  
2:  $data_flow['show_form']= TRUE;  
3:  $data_flow['form_errors'] = '';  
4:  $data_flow['token'] = time();  
5:  $data_flow['user_access'] = FALSE;  

In previous code block declare the variable "$data_flow['bdquery']", this variable indicates whether to consult the database with the data you provide, we assign the default false value. Then there is the variable "$data_flow['show_form']", which indicates whether to show no registration form or by default if we say that we should show by assigning the value True. Then we have the variable "$data_flow['form_errors']", which will serve to show the errors that make the user in the form. Then we have the variable "$data_flow['token']" indicating whether the user is performing an access request from the form. Finally we have the variable "$data_flow['user_access']" indicating whether the user has access to the private section of the process. We continue to add more code to our component:


1:  $data_flow['bdquery'] = FALSE;  
2:  $data_flow['show_form']= TRUE;  
3:  $data_flow['form_errors'] = '';  
4:  $data_flow['token'] = time();  
5:  $data_flow['user_access'] = FALSE;  
6:    
7:  if(isset($_POST['email']) && !$_POST['email']){  
8:       $data_flow['form_errors'] .= '<p>Email field is required</p>';  
9:  }  
10:    
11:  if(isset($_POST['password']) && !$_POST['password']){  
12:       $data_flow['form_errors'] .= '<p>Password field is required</p>';  
13:  }  
14:         

From line number 7 to 11 are receiving checks that the email and password fields that are not empty, otherwise an error is sent to the user. Continue typing:


1:  $data_flow['bdquery'] = FALSE;  
2:  $data_flow['show_form']= TRUE;  
3:  $data_flow['form_errors'] = '';  
4:  $data_flow['token'] = time();  
5:  $data_flow['user_access'] = FALSE;  
6:    
7:  if(isset($_POST['email']) && !$_POST['email']){  
8:       $data_flow['form_errors'] .= '<p>Email field is required</p>';  
9:  }  
10:    
11:  if(isset($_POST['password']) && !$_POST['password']){  
12:       $data_flow['form_errors'] .= '<p>Password field is required</p>';  
13:  }  
14:    
15:  if($data_flow['form_errors']==='' && isset($_POST['token'])){  
16:       $data_flow['bdquery'] = TRUE;  
17:       $data_flow['show_form'] = FALSE;  
18:  }  

On line # 15 we check if there are no errors and if the token is sent which means that the information provided by the user is correct for this reason we assign to the variable bdquery TRUE and FALSE show_form.


1:  $data_flow['bdquery'] = FALSE;  
2:  $data_flow['show_form']= TRUE;  
3:  $data_flow['form_errors'] = '';  
4:  $data_flow['token'] = time();  
5:  $data_flow['user_access'] = FALSE;  
6:    
7:  if(isset($_POST['email']) && !$_POST['email']){  
8:       $data_flow['form_errors'] .= '<p>Email field is required</p>';  
9:  }  
10:    
11:  if(isset($_POST['password']) && !$_POST['password']){  
12:       $data_flow['form_errors'] .= '<p>Password field is required</p>';  
13:  }  
14:    
15:  if($data_flow['form_errors']==='' && isset($_POST['token'])){  
16:       $data_flow['bdquery'] = TRUE;  
17:       $data_flow['show_form'] = FALSE;  
18:  }  
19:    
20:  session_start();  
21:  if(isset($_SESSION['name'])){  
22:       $data_flow['bdquery'] = FALSE;  
23:       $data_flow['show_form'] = FALSE;  
24:       $data_flow['user_access'] = TRUE;  
25:       $data_flow['username'] = $_SESSION['name'];  
26:  }  

From the line number 20 to 26 checks whether the session is created, if so not consult the database ($data_flow ['bdquery'] = FALSE ;) not show the login form ($data_flow[ 'show_form'] = FALSE ;), and give you access to the user ($data_flow['user_access'] = TRUE ;), will also keep the user name for future use ($data_flow ['username'] = $ _SESSION [ 'name'] ;). After that save the changes of the component "Receive Request".

Now we will modify the component "Access Attempt?". To do this open the Settings window and we modify the same code with the following:


1:  return (isset($data_flow['bdquery']) &&   
2:            $data_flow['bdquery']);  

In the above code we verified that the variable "$data_flow['bdquery']" is true to consult the database. Save the changes in the component.

Now we will modify the component "ShowForm?". To do this open the Settings window and we modify the same code with the following:


1:  return (isset($data_flow['show_form']) &&   
2:            $data_flow['show_form']);  

In the above code we verified that the variable "$ data_flow ['Show_Form']" is true to display the form. Save the changes in the component.

Now we will modify the component "Approved Access?". To do this open the Settings window and we modify the same code with the following:


1:  return (isset($data_flow['user_access']) &&  
2:            $data_flow['user_access']);  

In the above code we verified that the variable "$ data_flow ['user_access']" is true to show the private section of the process. Save the changes in the component.
Now let's add the private section of the process, for which Html drag a component to the workspace, we link to the component "Approved Access?" and modify the Html component, call it "Private Page" and entered the following code:


1:  <p>Welcome: {username}</p>  

Save the component and can now preview the process and see if they make mistakes when entering data on the form are shown on the top. If you complete all fields correctly and press Access private section you can see the process.

Now if you want to clear the session to re-display the login form we will add an optional step
drag a component Code to the workspace and call it "DeleteSession" then we link the component "Receive Request". Now let's modify the DeleteSession component by double clicking on it and adding the following code:


1:  if(isset($_GET['logout'])){  
2:       $_SESSION = array();  
3:    
4:       if (ini_get("session.use_cookies")) {  
5:            $params = session_get_cookie_params();  
6:            setcookie(session_name(), '', time() - 42000,  
7:                 $params["path"], $params["domain"],  
8:                 $params["secure"], $params["httponly"]  
9:            );  
10:       }  
11:              
12:       session_destroy();  
13:  }  

The above code removes the session logout if you pass the parameter to the url of the process through GET. After that you save the changes the component. So that if you want the user session is cleared you should open a window of your browser with the url alias you created for the process +?logout, as shown below


1:  http://[your_sistevprocess_path]/server/index.php/user_access?logout  

The final process should look like this:



Congratulations! You have already created a login form with SistevProcess.

No hay comentarios:

Publicar un comentario