Zend Framework 3

PixelPin Auth 3

Updated June 30th 2017

Step-by-step installation guide

This tutorial is based off the Zend Framework 3.x MVC Skeleton Application.

PixelPin Auth 3 is a Zend Framework 3 Module for authenticating with PixelPin using the Oauth2 API.

PixelPin Auth 3 allows you to connect your website to PixelPin and let users authenticate using passwordless pictures. With PixelPin Auth 3 module your user's can log in to your website using their PixelPin pictures. With PixelPin Auth 3, 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 Zend Framework 3.x MVC Skeleton Application

Downloading an example website allows you to understand how to install PixelPin Auth 3 into a Zend Framework 3 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 find a guide on how to Download and install the Zend Framework 3.x MVC Skeleton Application.

Installation

  1. From your Zend website's root directory, run composer require pixelpinplugins/pixelpin-auth3 in your favourite CLI.

Configuring the plugin

  1. Next go to vendor/pixelpinplugins/pixelpin-auth3/config/autoload/module.pixelpinAuth.local.php and copy the file to config/autoload.

  2. Next go to your config/modules.config.php file and add the following modules to the module array:

  3. Then go to module/application/src create a new folder called Service if you haven't got a folder named that already, inside that folder create a new file called IndexControllerFactory.php and copy this code into that file:

    <?php
    namespace Application\Service;
     
    use Application\Controller\IndexController;
    use Interop\Container\ContainerInterface;
    use Interop\Container\Exception\ContainerException;
    use Zend\ServiceManager\Exception\ServiceNotCreatedException;
    use Zend\ServiceManager\Exception\ServiceNotFoundException;
    use Zend\ServiceManager\Factory\FactoryInterface;
     
    class IndexControllerFactory implements FactoryInterface
    {
     
        /**
         * Create an object
         *
         * @param  ContainerInterface $container
         * @param  string             $requestedName
         * @param  null|array         $options
         *
         * @return object
         * @throws ServiceNotFoundException if unable to resolve the service.
         * @throws ServiceNotCreatedException if an exception is raised when
         *     creating a service.
         * @throws ContainerException if any other error occurs
         */
        public function __invoke(
            ContainerInterface $container,
            $requestedName,
            array $options = null
        ) {
            $session = $container->get('PixelpinAuthSession');
     
            return new IndexController($session);
        }
    }
  4. Then in module/application/src/controller/IndexController.php modify the file to make it look like this:

  5. Then in module/application/config/module.config.php add a new 'using':

    use Application\Service\IndexControllerFactory;
  6. Then staying in module/application/config/module.config.php in the controllers => factories array change the IndexController class to reference IndexControllerFactory::class as shown below:

    'controllers' => [
        'factories' => [
            Controller\IndexController::class => IndexControllerFactory::class,
        ],
    ],

    so it'll look something like this:

  7. Then go to Vendor/pixelpinplugins/pixelpin-auth3/config/module.config.php scroll down to line 121. This is where you need to insert your redirect uri. Your redirect uri in your config will be, for example, http(s)://www.example.co.uk/authenticate/backend but the redirect uri in your pixelpin developer account will be http(s)://www.example.co.uk/authenticate/backend/pixelpin. Below the redirect uri parameter you'll find where to insert your Client ID and Client Secret as well as what scopes are available. You'll need the Redirect URI to create a developer account to get your Client ID and Client Secret. 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.

  8. Then go to module/application/view/layout/layout.phtml copy the following code to add the 'login with pixelpin' button to the nav bar:

    <?= $this->hybridauthinfo('PixelPin', $this->serverUrl(true)) ?>

    So it'll look something like this:

  9. Then go to module/application/view/application/index/index.phtml copy the following code to display the user data:

    <h4>Session-Data</h4>
    <dl>
        <dt>authenticated</dt><dd>false</dd>
        <?php if (true === $session['authenticated']) : ?>
        <dt>user</dt><dd>
            <?= get_class($session['user']) ?>
            <dl>
                <dt>getUID()</dt><dd><?= $session['user']->getUID() ?></dd>
                <dt>getFirstname()</dt><dd><?= $session['user']->getFirstname() ?></dd>
                <dt>getLastname()</dt><dd><?= $session['user']->getLastname() ?></dd>
                <dt>getFullname()</dt><dd><?= $session['user']->getFullname() ?></dd>
                <dt>getMail()</dt><dd><?= $session['user']->getMail() ?></dd>
                <dt>getGender()</dt><dd><?= $session['user']->getGender() ?></dd>
                <dt>getPhoneNumber()</dt><dd><?= $session['user']->getPhoneNumber() ?></dd>
                <dt>getBirthdate()</dt><dd><?= $session['user']->getBirthdate() ?></dd>
                <dt>getAddress()</dt><dd><?= $session['user']->getAddress() ?></dd>
                <dt>getTownCity()</dt><dd><?= $session['user']->getTownCity() ?></dd>
                <dt>getRegion()</dt><dd><?= $session['user']->getRegion() ?></dd>
                <dt>getPostalCode()</dt><dd><?= $session['user']->getPostalCode() ?></dd>
                <dt>getCountry()</dt><dd><?= $session['user']->getCountry() ?></dd>
                <dt>getLanguage()</dt><dd><?= $session['user']->getLanguage() ?></dd>
            </dl>
        </dd>
        <dt>provider</dt><dd><?= $session['backend'] ?></dd>
        <?php endif ?>
    </dl>

    So it'll look something like this:

  10. 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:

Contributing

PixelPin Auth 3 is an open-source project that allows developers using PixelPin to improve the plugin. You can find the links to the modules repo's below:

  1. PixelPin Auth 3
  2. PixelPin Auth Common SC
  3. PixelPin Auth SC