CodeIgniter 2

PixelPin Igniter

Updated June 30th 2017

Step-by-step installation guide

PixelPin Igniter is a CodeIgniter 2 Extension for authenticating with PixelPin using the OAuth 2.0 API using OpenID Connect Endpoints.

PixelPin Igniter allows you to connect your website to PixelPin and let users authenticate using passwordless pictures. With PixelPin Igniter module your user's can log in to your website using their PixelPin pictures. With PixelPin Igniter, user's will no longer need to complete numerous forms for a successful registration.

To complete the installation, you'll need to create your PixelPin developer account.

Download the default CodeIgniter 2 website

Downloading the default CodeIgniter 2 website allows you to understand how to install PixelPin Igniter into a CodeIgniter 2 website. The knowledge you'll learn from installing the module will allow you to install the module onto your own website.

Click on the link to download the Default Codeigniter 2 website.

Download the module

  1. Click on the link to download the PixelPin Igniter module.

Installation

  1. Go to the downloaded PixelPin Igniter module folder and copy the application folder:

  2. And merge it with the existing application folder in your website root directory.

  3. Go to index.php in your website.s root directory, go to the bottom of the file and add the following code:

    require_once APPPATH.'third_party/pixelpinauth/Pixelpin/Auth.php';
    require_once APPPATH.'third_party/pixelpinauth/Pixelpin/Endpoint.php';
      
    if (isset($_REQUEST['pauth_start']) || isset($_REQUEST['pauth_done']))
    {
        Pixelpin_Endpoint::process();
    }
  4. If you haven't already. Go to application/config/autoload.php and find $autoload['helper'] = array(''); and change it to include url in the array as shown below:

    This allows you to use the config base_url in your views.
    $autoload['helper'] = array('url');
  5. Next go to application/config/pixelpinauthlib.php. This where where you insert the website's Client ID (id) and Client Secret (secret). You'll need the Redirect URI to create a developer account to get your Client ID and Client Secret. Your redirect uri will be, for example, http(s)://www.example.co.uk/index.php/pauth/endpoint?pauth.done=PixelPin. If you haven't created a PixelPin developer account before, a guide can be found here to guide you through the steps to create a PixelPin developer account.

  6. Once you've typed in your Client ID and Client Secret, set enabled to true to enable the login functionality.

  7. If you're using the default codeigniter 2 installation:

    Next you need to add a login button to your login page. So if you're using the default codeigniter 2 installation go to application/views/welcome_message.php, replace the contents in the file with the following code:

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
             
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        </head>
        <body>
                <div class="jumbotron text-center">
                    <h1>Login Test</h1>
                    <p>A page to test PixelPin sign in</p>
                </div>
     
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <form class="form-horizontal">
                              <div class="form-group">
                                <label class="control-label col-sm-2" for="email">Email:</label>
                                <div class="col-sm-10">
                                  <input type="email" class="form-control" id="email" placeholder="Enter email">
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="control-label col-sm-2" for="pwd">Password:</label>
                                <div class="col-sm-10">
                                  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                                </div>
                              </div>
                              <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                  <div class="checkbox">
                                    <label><input type="checkbox"> Remember me</label>
                                  </div>
                                </div>
                              </div>
                              <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                  <button type="submit" class="btn btn-default">Submit</button>
                                  <a class="btn btn-default" href="<?php echo base_url(); ?>index.php/pauth/login/PixelPin">Sign In Using PixelPin</a>
                                </div>
                              </div>
                            </form>
                        </div>
                    </div>
                </div>
        </body>
    </html>

    Custom codeigniter 2 website:

    If you're installing this plugin on your actual website, insert the following code into your login page to add the login button:

    Note: The same link can be used as a registration button

    <a class="btn btn-default" href="<?php echo base_url(); ?>index.php/pauth/login/PixelPin">Sign In Using PixelPin</a>

    Sign out button:

    <a href="<?php echo base_url(); ?>index.php/pauth/logout/PixelPin">Sign Out</a>
  8. The module is now installed.

Additional Information

Click here to find out how you can add the PixelPin logo to the SSO button.

Testing the module

Log in/Register page

An example of a login/register page. Once you click this button it will redirect you to the PixelPin login page, once the user authenticates it will redirect to the 'logged in' page.

Example logged in page

This is an example of a logged in page. The code for this page can be found in application/views/pauth/done.php. done.php contains the logic to retrieving the user data as well as the code for the logout button. If you wish to redirect the user to another page you can modify the 'login' function in application/controllers/pauth.php.

Contributing

PixelPin Igniter is an open-source project that allows developers using PixelPin to improve the plugin. The Github Repo can be found here.