Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in Github

The Forgot your Password form

In our controller “Main.php”, let’s add a new action called “forgot”. The code is below and I’ll explain what is inside:

public function forgot()
        {
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            if($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('forgot');
                $this->load->view('footer');
            }else{
                $email = $this->input->post('email');
                $clean = $this->security->xss_clean($email);
                $userInfo = $this->user_model->getUserInfoByEmail($clean);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'We cant find your email address');
                    redirect(site_url().'main/login');
                }
                if($userInfo->status != $this->status[1]){ //if status is not approved
                    $this->session->set_flashdata('flash_message', 'Your account is not in approved status');
                    redirect(site_url().'main/login');
                }
                //build token
                $token = $this->user_model->insertToken($userInfo->id);
                $qstring = $this->base64url_encode($token);
                $url = site_url() . 'main/reset_password/token/' . $qstring;
                $link = '' . $url . '';
                $message = '';
                $message .= 'A password reset has been requested for this email account
';
                $message .= 'Please click: ' . $link;
                echo $message; //send this through mail
                exit;
            }
        }

The action opens up the same way we have with our other forms. We have our validation rules for our “email” input field. In our form, all we’re really asking for our user is to enter their password. So we just need to run a couple of rules against this value: valid email and required. Once our validation passes, we also clean the data with our xss_clean() method which is loaded automatically.

To learn more about the Security Helper click here.

Now we check if the email submitted exists in our database through our Model method: getUserInfoByEmail(). So add the code below to our Model (User_Model.php). This method returns the record on success and false on fail.

public function getUserInfoByEmail($email)
    {
        $q = $this->db->get_where('users', array('email' => $email), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            return $row;
        }else{
            error_log('no user found getUserInfo('.$email.')');
            return false;
        }
    }

We also need another method that checks grabs the user information. This method called “getUserInfo()” simply returns the row and false if none is found:

public function getUserInfo($id)
    {
        $q = $this->db->get_where('users', array('id' => $id), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            return $row;
        }else{
            error_log('no user found getUserInfo('.$id.')');
            return false;
        }
    }

So back in our “forgot” action, we simply set a couple of error messages when we receive a false from our model, or proceed with the token creation “insertToken()” on success. Note that we are reusing this method from our previous action when creating a new user.

The code for our view is below. Just some messaging our form and input fields. Notice we’re using CodeIgniter’s Form class.

<div class="col-lg-4 col-lg-offset-4">
<h2>Forgot Password</h2>
<p>Please enter your email address and we'll send you instructions on how to reset your password<br>
<?php 
$fattr = array('class' =--> 'form-signin'); 
echo form_open(site_url().'main/forgot/', $fattr); ?>
</p>
<div class="form-group">
<?php echo form_input(array(
          'name'=-->'email', 'id'=&gt; 'email', 'placeholder'=&gt;'Email', 'class'=&gt;'form-control', 'value'=&gt; set_value('email'))); ?>
<?php echo form_error('email');?>
</div>
<p><?php echo form_submit(array('value'=-->'Submit', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?></p>
</div>

Now go ahead and try out your form. Try an email that doesn’t exist – and try one that does. With our unique token code in our action, we continue to construct the link and “echo” to the browser.

Remember that this is to be emailed to the user but we are simply echoing it out for demo purposes. The link should look like below:

The Reset Password Form

So now we have a unique link that we’ve sent to our forgetful user. Once they click on this link – they better have a page to land on, with a way to reset their password. So let’s build that now.
Let’s create another action in our controller, name it “reset_password()” and add the code below:

public function reset_password()
        {
            $token = $this->base64url_decode($this->uri->segment(4));
            $cleanToken = $this->security->xss_clean($token);
            $user_info = $this->user_model->isTokenValid($cleanToken); //either false or array();
            if(!$user_info){
                $this->session->set_flashdata('flash_message', 'Token is invalid or expired');
                redirect(site_url().'main/login');
            }
            $data = array(
                'firstName'=> $user_info->first_name,
                'email'=>$user_info->email,
                'token'=>base64_encode($token)
            );
            $this->form_validation->set_rules('password', 'Password', 'required|min_length[5]');
            $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required|matches[password]');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('reset_password', $data);
                $this->load->view('footer');
            }else{
                $this->load->library('password');
                $post = $this->input->post(NULL, TRUE);
                $cleanPost = $this->security->xss_clean($post);
                $hashed = $this->password->create_hash($cleanPost['password']);
                $cleanPost['password'] = $hashed;
                $cleanPost['user_id'] = $user_info->id;
                unset($cleanPost['passconf']);
                if(!$this->user_model->updatePassword($cleanPost)){
                    $this->session->set_flashdata('flash_message', 'There was a problem updating your password');
                }else{
                    $this->session->set_flashdata('flash_message', 'Your password has been updated. You may now login');
                }
                redirect(site_url().'main/login');
            }
        }

So our users will land in our page called “reset_password”, with a token in the url. First we need to process that and determine if its a good token. This is accomplished by our model’s isTokenValid() method. This method is the same method we had in our “complete” action when we are registering a new user – so this is nothing new.

And if you remember, this method returns user information on success – so we go on with our setup for the form. We pass this information using $data array straight to our view, reset_password.php:

<div class="col-lg-4 col-lg-offset-4">
<h2>Reset your password</h2>
<h5>Hello <?php echo $firstName; ?>, Please enter your password 2x below to reset</h5>
<p><?php
    $fattr = array('class' =--> 'form-signin'); echo form_open(site_url().'main/reset_password/token/'.$token, $fattr); ?></p>
<div class="form-group">
<?php echo form_password(array('name'=-->'password', 'id'=&gt; 'password', 'placeholder'=&gt;'Password', 'class'=&gt;'form-control', 'value' =&gt; set_value('password'))); ?&gt; <?php echo form_error('password') ?></div>
<div class="form-group">
<?php echo form_password(array('name'=-->'passconf', 'id'=&gt; 'passconf', 'placeholder'=&gt;'Confirm Password', 'class'=&gt;'form-control', 'value'=&gt; set_value('passconf'))); ?> <?php echo form_error('passconf') ?></div>
<p><?php echo form_hidden('user_id', $user_id);?>
<?php echo form_submit(array('value'=-->'Reset Password', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?></p>
</div>

Clicking the link with the token will run our view. And if you did it correctly, it should render like below:

Finally, we do some validation and sanitation on the passwords entered. Once passed, we continue to encrypt our user’s password through the create_hash() method. Remember this method is from our Password class that we’ve also used when creating new users. Then we update the user’s password on success.

Conclusion

So there you have our basic user registration system, explained in detail. Remember that this is mainly to get a grasp on what goes on behind the scenes of such a system as well as learning the ropes of MVC. It is also important to know that this is not production code. There are plenty of improvements to be made. But this should be enough to get you started.

The post Building a user registration system – Part 3: The Password Reset Form appeared first on Michael Soriano.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in GitHub

Once you fill out the fields, check your database for the new entries. The user table should look like below:

Note that we have the status set to “pending” as well as the role set to “subscriber”. We also have the password blank at the moment. Open the “tokens” table and you should see a new entry as well:

Notice our user ids match in both tables. You should also be seeing our message in the browser – which is the message we will be sending through email to our user:

Now we’re ready to code the 2nd part of the registration process.

The “Complete” your registration page

So our user gets an email to complete the registration. This email has a link with a “token” that ties the user id and the time created. So the code below is for our “complete” action. imply add to our Main controller:

public function complete()
        {
            $token = base64_decode($this->uri->segment(4));
            $cleanToken = $this->security->xss_clean($token);
            $user_info = $this->user_model->isTokenValid($cleanToken); //either false or array();
            if(!$user_info){
                $this->session->set_flashdata('flash_message', 'Token is invalid or expired');
                redirect(site_url().'main/login');
            }
            $data = array(
                'firstName'=> $user_info->first_name,
                'email'=>$user_info->email,
                'user_id'=>$user_info->id,
                'token'=>$this->base64url_encode($token)
            );
            $this->form_validation->set_rules('password', 'Password', 'required|min_length[5]');
            $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required|matches[password]');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('complete', $data);
                $this->load->view('footer');
            }else{
                $this->load->library('password');
                $post = $this->input->post(NULL, TRUE);
                $cleanPost = $this->security->xss_clean($post);
                $hashed = $this->password->create_hash($cleanPost['password']);
                $cleanPost['password'] = $hashed;
                unset($cleanPost['passconf']);
                $userInfo = $this->user_model->updateUserInfo($cleanPost);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'There was a problem updating your record');
                    redirect(site_url().'main/login');
                }
                unset($userInfo->password);
                foreach($userInfo as $key=>$val){
                    $this->session->set_userdata($key, $val);
                }
                redirect(site_url().'main/');
            }
        }

First order of business is to validate the token. We grab it from the url with CI’s uri helper: “segment(4)”. The code below “isTokenValid()” resides in our model, which checks the validity of the token and returns the user information on success and false on no.

Note that I’m only using a weak time check – which compares to strings to be equal. You should implement your own mechanism which does a dateDiff or something like that.

public function isTokenValid($token)
    {
       $tkn = substr($token,0,30);
       $uid = substr($token,30);
        $q = $this->db->get_where('tokens', array(
            'tokens.token' => $tkn,
            'tokens.user_id' => $uid), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            $created = $row->created;
            $createdTS = strtotime($created);
            $today = date('Y-m-d');
            $todayTS = strtotime($today);
            if($createdTS != $todayTS){
                return false;
            }
            $user_info = $this->getUserInfo($row->user_id);
            return $user_info;
        }else{
            return false;
        }
    }

Going back to our action, we simply create the “$data” array which we’ll need in our form. We’re also loading a “Password” class – which does the heavy lifting for our passwords. The class creates a dynamic salt appended to the password. The default hash is “sha256” and is fully configurable.

So token is good, validation passes – we then move on to updating our user information: “updateUserInfo()”. This goes in our model:

public function updateUserInfo($post)
    {
        $data = array(
               'password' => $post['password'],
               'last_login' => date('Y-m-d h:i:s A'),
               'status' => $this->status[1]
            );
        $this->db->where('id', $post['user_id']);
        $this->db->update('users', $data);
        $success = $this->db->affected_rows();
        if(!$success){
            error_log('Unable to updateUserInfo('.$post['user_id'].')');
            return false;
        }
        $user_info = $this->getUserInfo($post['user_id']);
        return $user_info;
    }

The above simply updates our table with the new password, login time and the status to “active”. We have enough to complete our registration process.

Our view called “complete” will contain our HTML:

<div class="col-lg-4 col-lg-offset-4">
<h2>Almost There!</h2>
<h5>Hello <?php echo $firstName; ?>. Your username is <?php echo $email;?></h5>
<small>Please enter a password to begin using the site.</small> <?php 
    $fattr = array('class' =&gt; 'form-signin');
    echo form_open(site_url().'main/complete/token/'.$token, $fattr); ?>
<div class="form-group">&nbsp;</div>
<div class="form-group">&nbsp;</div>
<?php echo form_submit(array('value'=&gt;'Complete', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?> 
<?php echo form_close(); ?></div>

Note that I’m using Bootstrap, so our form automatically looks nice. I’m also using CI’s form helper which makes our form building faster

Our form should look like below:

On success you will notice that we set the session with the user data that we’ve fetched from the back end “set_userdata()“. We’re also redirecting them to the homepage of our site. On failure, we user CI’s “set_flashdata()” to set an error message temporarily in session, and displaying it above our form.

The Login Form

With what we’ve done above – it’s now possible to create a login form. See, we’re using an encryption technology that only our application can process. So it is important that we create our registration system first, before we can create a login form.

This way – we can test it properly.

The code below is our controller logic for our login form:

public function login()
        {
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            $this->form_validation->set_rules('password', 'Password', 'required');
            if($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('login');
                $this->load->view('footer');
            }else{
                $post = $this->input->post();
                $clean = $this->security->xss_clean($post);
                $userInfo = $this->user_model->checkLogin($clean);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'The login was unsucessful');
                    redirect(site_url().'main/login');
                }
                foreach($userInfo as $key=>$val){
                    $this->session->set_userdata($key, $val);
                }
                redirect(site_url().'main/');
            }
        }

Nothing new in the code above. Again, we’re setting validation rules for our 2 fields. We grab the post array and clean it via xss_clean(). Then we get to our model which has the checkLogin() method below:

public function checkLogin($post)
    {
        $this->load->library('password');
        $this->db->select('*');
        $this->db->where('email', $post['email']);
        $query = $this->db->get('users');
        $userInfo = $query->row();
        if(!$this->password->validate_password($post['password'], $userInfo->password)){
            error_log('Unsuccessful login attempt('.$post['email'].')');
            return false;
        }
        $this->updateLoginTime($userInfo->id);
        unset($userInfo->password);
        return $userInfo;
    }
    public function updateLoginTime($id)
    {
        $this->db->where('id', $id);
        $this->db->update('users', array('last_login' => date('Y-m-d h:i:s A')));
        return;
    }

The above selects all columns where the user id and password match. Note that we’re using the validate_password() method from our Password class. We then update the login time and return the user information back to our controller.

Our login form view contains the code below:

<div class="col-lg-4 col-lg-offset-4">
<h2>Please login</h2>
<?php $fattr = array('class' =&gt; 'form-signin');
         echo form_open(site_url().'main/login/', $fattr); ?>
<div class="form-group">&nbsp;</div>
<div class="form-group">&nbsp;</div>
<?php echo form_submit(array('value'=&gt;'Let me in!', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?>
<p>Don't have an account? Click to <a href="<?php echo site_url();?>main/register">Register</a></p>
<p>Click <a href="<?php echo site_url();?>main/forgot">here</a> if you forgot your password.</p>
</div>

Again, using CI’s form helper along with Bootstrap classes to make our form nice. We also have a link back to the “Register” page, which we covered in the first part of this tutorial. Finally, we have another link to the “Forgot” password link – which I’ll cover in Part 3.

Stay tuned.

The post Building a user registration system – Part 2: The Set Password and Login Forms appeared first on Michael Soriano.

One that will restrict users from accessing sections of the site. We will create a system that will allow them to create their own account, reset their password and even update their profile.

Update 8/13/2018: Added the entire CI application in the repo, allowing faster setup and debug. CI version is 3.0.2 The setup steps below might not be necessary for usage.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in Github

I’m going to assume that you are familiar with CodeIgniter, or other MVC frameworks. You don’t have to be an expert – just know enough that you will be able to follow along without me having to explain too much. We are also going to utilize Bootstrap – so our pages will look nice. Finally, the focus of this tutorial is learning how the process works. We’re not really here to look at design patterns, performance or database design.

So ready to get started? Roll up your sleeves and let’s start writing.

Get things setup

So obviously we’re going to need to store data – so we need a database. We will need a table that will house our users. Below is the SQL code to get you up and running. I’m calling the database “user-registration” – which is a stupid name actually. Name yours anything you want.

CREATE DATABASE IF NOT EXISTS `user-registration` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `user-registration`;

CREATE TABLE IF NOT EXISTS `ci_sessions` (
  `id` varchar(40) NOT NULL,
  `ip_address` varchar(45) NOT NULL,
  `timestamp` int(10) unsigned NOT NULL DEFAULT '0',
  `data` blob NOT NULL,
  PRIMARY KEY (`id`),
  KEY `ci_sessions_timestamp` (`timestamp`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `tokens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `token` varchar(255) NOT NULL,
  `user_id` int(10) NOT NULL,
  `created` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `email` varchar(100) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `role` varchar(10) NOT NULL,
  `password` text NOT NULL,
  `last_login` varchar(100) NOT NULL,
  `status` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=42 ;

We’re going to use CodeIgniter 3.0.2. Download and install in your web server.
In config > config.php add the two lines below. I’ll explain these later.

$config['roles'] = array('subscriber', 'admin');
$config['status'] = array('pending', 'approved');

Open database.php, and add your database credentials. It would be something like:

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'user-registration',
	... //additional stuff here...
);

Create a new controller named Main.php and a model, name it User_model.php. In the next sections, we will tie these things together.

But first let’s look at the workflow of our system:

So our first step is the registration form. Users fill out this form which will only consist of their name and email. This will write a record to our database – but the account will only be in “pending” status. This will also trigger an email containing a token (which expires in a day), when clicked – will allow the user to finish the registration process. This form will have a password and password confirmation. This will update the record – and make the account “active”.

We will automatically login the user, but now that they have an account – they can actually utilize the login and reset password form.

It also makes sense for us to build the pages in this exact order. So we got: 1) register 2) complete 3) login 4) forgot password.

So inside our routes.php, add the default controller to ours:

$route['default_controller'] = 'main';

Also, let’s setup our autoload.php:

$autoload['helper'] = array('url');
$autoload['libraries'] = array('session');

Now we can move forward.

The Registration

So the very first thing we need is the HTML that contains our form. Let’s create a new file called “register.php” and put it in our “views” folder. Add the code below:

<div class="col-lg-4 col-lg-offset-4">
    <h2>Hello There</h2>
    <h5>Please enter the required information below.</h5>
<?php
    $fattr = array('class' => 'form-signin');
    echo form_open('/main/register', $fattr); ?>
    <div class="form-group">
      <?php echo form_input(array('name'=>'firstname', 'id'=> 'firstname', 'placeholder'=>'First Name', 'class'=>'form-control', 'value' => set_value('firstname'))); ?>
      <?php echo form_error('firstname');?>
    </div>
    <div class="form-group">
      <?php echo form_input(array('name'=>'lastname', 'id'=> 'lastname', 'placeholder'=>'Last Name', 'class'=>'form-control', 'value'=> set_value('lastname'))); ?>
      <?php echo form_error('lastname');?>
    </div>
    <div class="form-group">
      <?php echo form_input(array('name'=>'email', 'id'=> 'email', 'placeholder'=>'Email', 'class'=>'form-control', 'value'=> set_value('email'))); ?>
      <?php echo form_error('email');?>
    </div>
    <?php echo form_submit(array('value'=>'Sign up', 'class'=>'btn btn-lg btn-primary btn-block')); ?>
    <?php echo form_close(); ?>
</div>

Note that I’m not going to go through what goes in our header and footer template because it’s irrelevant to this tutorial. Just know that it’s basic HTML, along with a link to Bootstrap CSS. Our markup above is a mix of PHP and HTML. This is using CodeIgniter’s Form Class – which makes it real easy to do validation and data filter and sanitation.

So in our Main controller, let’s add a constructor and include the necessary components for our class. We’ll also set up our status and roles arrays inside this constructor:

class Main extends CI_Controller {
        public $status;
        public $roles;
        function __construct(){
            parent::__construct();
            $this->load->model('User_model', 'user_model', TRUE);
            $this->load->library('form_validation');
            $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
            $this->status = $this->config->item('status');
            $this->roles = $this->config->item('roles');

So we’re loading our model “User_model” by default, the “form_validation” library and setting some HTML for our form errors. You’ll also notice the 2 properties (status and roles) – which grabs it from “$this->config”. Remember in our config file – we created 2 arrays? We’re simply outputting it here for easy access.

Now I know you’re saying this is better if these entries was in their own table in the database. Again, this is not a tutorial on database design. We’re simply doing it this way because it is not our focus. Let’s continue with our “register” method:

public function register()
        {
            $this->form_validation->set_rules('firstname', 'First Name', 'required');
            $this->form_validation->set_rules('lastname', 'Last Name', 'required');
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('register');
                $this->load->view('footer');
            }else{
                if($this->user_model->isDuplicate($this->input->post('email'))){
                    $this->session->set_flashdata('flash_message', 'User email already exists');
                    redirect(site_url().'main/login');
                }else{
                    $clean = $this->security->xss_clean($this->input->post(NULL, TRUE));
                    $id = $this->user_model->insertUser($clean);
                    $token = $this->user_model->insertToken($id);
                    $qstring = $this->base64url_encode($token);
                    $url = site_url() . 'main/complete/token/' . $qstring;
                    $link = '' . $url . '';
                    $message = '';
                    $message .= 'You have signed up with our website
';
                    $message .= 'Please click: ' . $link;
                    echo $message; //send this in email
                    exit;
                };
            }
        }

Alright, plenty of going on up there. So the validation rules are setup initially. Our form contains 3 fields: Last name, First name and email. They’re all required fields, plus the email address must be in valid format.

You will notice in the block where our form is validated, we’re checking “isDuplicate()” from our model: $this->user_model. This is so that we won’t have duplicate records of the same email. Remember, we are using their email address as their username.

So if it’s a duplicate – we simply use CodeIgniter’s set_flashdata() and redirect them to the login page (which is not built yet).

If the email address is good, we continue by cleaning up the $_POST array. Notice that we have 2 methods right after the cleaning: insertUser() and insertToken(). So we write the record to our database, then we create a new token (let’s quickly run this SQL so we have this token table).

CREATE TABLE IF NOT EXISTS `tokens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `token` varchar(255) NOT NULL,
  `user_id` int(10) NOT NULL,
  `created` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

Another thing, you will also see that we’re using a local method called “base64url_encode()” – which is a way of outputting base64 code – that is in a web safe format. So in our controller, you can add these two methods in the bottom. Think of them as local “helper” methods.

public function base64url_encode($data) {
    return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}
public function base64url_decode($data) {
    return base64_decode(str_pad(strtr($data, '-_', '+/'), strlen($data) % 4, '=', STR_PAD_RIGHT));
}

I am not putting them in a the “helpers” for CI – because these methods are only to be used in controllers – since they are “URL” related. And as you can see, we only have one controller. But as your application grows, and you have many controllers, it’s best to move this into a real CI Helper.
Finally, we create our final URL, to our “complete” action and echo it out. In production, this will be done through an email, in HTML format.

Some Back-end Stuff

Our model “User_model” is empty. Let’s go ahead and fill it up. We need 3 methods for our register to work remember? It’s 1) isDuplicate(), 2) insertUser() and insertToken(). First let’s create a constructor with our roles and status arrays:

public function insertUser($d)
    {
            $string = array(
                'first_name'=>$d['firstname'],
                'last_name'=>$d['lastname'],
                'email'=>$d['email'],
                'role'=>$this->roles[0],
                'status'=>$this->status[0]
            );
            $q = $this->db->insert_string('users',$string);
            $this->db->query($q);
            return $this->db->insert_id();
    }
    public function isDuplicate($email)
    {
        $this->db->get_where('users', array('email' => $email), 1);
        return $this->db->affected_rows() > 0 ? TRUE : FALSE;
    }
    public function insertToken($user_id)
    {
        $token = substr(sha1(rand()), 0, 30);
        $date = date('Y-m-d');
        $string = array(
                'token'=> $token,
                'user_id'=>$user_id,
                'created'=>$date
            );
        $query = $this->db->insert_string('tokens',$string);
        $this->db->query($query);
        return $token . $user_id;
    }

So judging from the method names – they’re pretty self explanatory correct? Also, if you’ve worked with CodeIgniter before, you’ll notice the syntax of interacting with the database. It used to be called “active record”, which is now the Query Builder class. Makes it real easy for non DBA’s like me to write queries.

The three methods all return either an array or a string on success, and “false” on failure. The return values are handled accordingly in our controller methods discussed previously. Pay token is simply a random number that we create and insert into the database. This token has an accompanying user id and a time stamp in the same row. This makes it possible for us to fetch the user, and find if it’s a valid request, in the appropriate time frame.

Let’s break it here for now. We have plenty more to come in the next part(s).

The post Building a user registration system – Part 1: The New User Form appeared first on Michael Soriano.

These letters have to be submitted to the web server, check if the values match. If it does, then process the information… or else, you must be a bot.
As mentioned, CI has already done the leg work in creating the fuzzy image with the letters. This is called the Captcha helper. All you need to do is pass an array of options then voila! Your image is created. This tutorial will teach you how to wrap this functionality in our own class, so additional methods can be hooked up to it. This will make our wrapper encapsulated and reusable for as many forms as we need within our application.
Note that I’m assuming that you’ve worked with CI before, or have experience with MVC, or even just object oriented programming. Ready to get started? Let’s begin:
In our application/libraries folder, create a new file and name it Mycaptcha.php. Let’s create our class and name it Mycaptcha. Inside, let’s define a couple of variables for later use, add our constructor method which creates $CI. $CI is to ensure that we’re dealing with the same object we use from within our controllers.

class Mycaptcha {
    public $word = '';
    public $ci = '';
    public function __construct() {
        $CI = & get_instance();
        $CI->load->helper('captcha');
        $this->ci = $CI;
    }
}

Next, let’s create a method to create the random words in the image.

public function createWord(){
        $chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        $word = '';
        for ($a = 0; $a <= 5; $a++) {
            $b = rand(0, strlen($chars) - 1);
            $word .= $chars[$b];
        }
        $this->word = $word;
        return $this;
}

Now we have 2 properties accessible throughout our class (ci and word). Let’s go ahead and create the Captcha image using CI’s helper:

public function createCaptcha(){
        $cap = array(
            'word' => $this->word,
            'img_path' => './httpdocs/captcha/', //this is your directory
            'img_url' => base_url() . 'httpdocs/captcha/',
            'img_width' => '150',
            'img_height' => '30',
            'expiration' => '7200'
        );
        $captchaOutput = create_captcha($cap);
        $this->ci->session->set_userdata(array('word'=>$this->word, 'image' => $captchaOutput['time'].'.jpg')); //set data to session for compare
        return $captchaOutput['image'];
    }

Notice that we’re using the 2 properties that I mentioned. Also, make sure you have a folder with write permissions somewhere in your application. Above – I have it in ‘./httpdocs/captcha/’ – which goes outside of our application folder. This is where the images will be saved. Another thing to notice here – I’m saving the word and the jpg name in session using CI’s session class (line 13 above). This will make it easier for us to check the value for form submission and have the image name as well (for cleanup).
Our last method is to delete the image that we’ve created. The code is below:

public function deleteImage(){
        if(isset($this->ci->session->userdata['image'])){
            $lastImage = FCPATH . "httpdocs/captcha/" . $this->ci->session->userdata['image'];
            if(file_exists($lastImage)){
                unlink($lastImage);
            }
        }
        return $this;
    }

Adding Captcha to Form Validation

Now we have our class, we need a way to check the values against our form field. Let’s create a new file and call it MY_Form_validation.php and save it in libraries folder. Here, we are extending the form validation class in CI.

class MY_Form_validation extends CI_Form_validation {
public function validate_captcha($word)
    {
         $CI = & get_instance();
         if(empty($word) || $word != $CI->session->userdata['word']){
            $CI->form_validation->set_message('validate_captcha', 'The letters you entered do not match the image.');
            return FALSE;
         }else{
             return TRUE;
         }
    }
}

The method above simply checks the parameter ($word) against the value set in our session (from our class). It also set an error message so we can present it nicely. Finally, let’s get to our controller to make it all stick.

$this->form_validation
        ->set_rules('captcha', 'Captcha', 'required|validate_captcha');
        //above is our custom validation
$this->load->library('mycaptcha'); //this is our wrapper
if ($this->form_validation->run() == FALSE) {
            $data['captcha'] = $this->mycaptcha
                    ->deleteImage() //these are the 3 methods
                    ->createWord()
                    ->createCaptcha();
            $this->load->view('YOURVIEW.php', $data);
        } else {
            $this->mycaptcha->deleteImage(); //delete image again
            $this->session->set_flashdata(array('message' => 'Your message was sent successfully', 'type' => 'success'));
            redirect('YOURSUCCESSPAGE.php');
        }

As you see, we kept our controller straight to the point. We pass our ‘validate_captcha’ in CI’s set rules, along with the input field name (line 1). We load our wrapper, runs the validation and the 3 methods from our class. Notice deleteImage() runs in the else clause as well? That’s because we delete the image even if it’s successful to keep our directory clean.
All we have to do is call it in our form like so:

Enter the Letters Below:

Conclusion

Our wrapper can be now reused in all our forms. I especially like that in our controller, all we need to do is:
$this->mycaptcha->deleteImage()->createWord()->createCaptcha() – which will run all our methods fluently.
Questions? Please feel free to leave them below.

The post Let’s create a wrapper for the Captcha helper in Codeigniter appeared first on Michael Soriano.