PixelPin Developer Documentation

Drupal 8

Updated February 9th 2018

Tested with Drupal 8 Version: 8.5.0

PixelPin OpenID Connect

Step-by-step installation guide

Testing the module


Step-by-step installation guide

PixelPin OpenID Connect is a Drupal 8 Module for authenticating with PixelPin using the OpenID Connect API.

PixelPin OpenID Connect allows you to connect your website to PixelPin and let users authenticate using passwordless pictures. With PixelPin OpenID Connect module your users can log in to your website using their PixelPin pictures. With PixelPin OpenID Connect, users 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.



  1. Log into the admin account of your Drupal 8 website and click on Extend.

  2. Click + install new module.

  3. Copy and paste the install URL: https://ftp.drupal.org/files/projects/ppoidc-8.x-1.2.tar.gz into the Install from a URL input box. Click Install. Check the Plugin page for the latest versions.

  4. Click Enable newly added modules.

  5. The page should open on the modules page. Scroll down until you find PixelPin OpenID Connect (near the bottom). Check the checkbox then click Install.

    The module is now installed.

Enabling the module


  1. Staying on the module page. Click on the drop down arrow on the PixelPin OpenID Connect module.

    NOTE: Some browsers parse the HTML differently so the arrow may not appear, instead click on the underlined text shown in the image above.

  2. Click Configure.

  3. The page should open on the PixelPin OpenID Connect configuration page. Check the Enable checkbox to enable PixelPin OpenID Connect.

  4. The Client ID and Client Secret fields should appear along with the Redirect URI field. You'll need to obtain the Client ID and Client Secret, to obtain the Client ID and Client Secret you'll need to create a PixelPin developer account. If you haven't created a PixelPin developer account before, a guide can be found here.

  5. Once you've obtained your Client ID and Client Secret, type/paste them into the Client ID and Client Secret fields.

  6. (Optional) You can configure the styling of the PixelPin Single Sign On Button by changing the size, colour and content of the button.

  7. Configure which input forms the user's data will be assigned to under User Claims Mapping.

  8. Remember to save the configuration by pressing Save configuration at the bottom of the page!

  9. Click on Structure in the navbar.

  10. Click on Block Layout.

  11. Click Place Block on the area where you want to add the PixelPin SSO button.

  12. Scroll down and find PixelPin Login or PixelPin Register, depending on what message you want to display and select Place Block.

  13. Click on Pages and add the page URL that you want to display the PixelPin SSO button on. For example, if your login page is on local.drupal.io/user/login, type /user/login into the text box. Untick the Display title checkbox to just display the PixelPin SSO button on its own.

  14. Position the block to your needs.

  15. Click on Configuration in the nav bar.

  16. Under DEVELOPMENT click on Performance.

  17. Click Clear all caches to load the modules css and js files.

  18. You've now enabled PixelPin OpenID Connect on your Drupal 8 website.

Testing the module

Log in

An additional button has been added to the bottom of the log in form. The user can log in and create a new account using this button if they have a PixelPin account.


An additional button has been added to the top of the 'create new account' form. The user would use this button to register to your website, saving time filling in all the fields themselves.

Existing Users

Existing users can connect their existing account to PixelPin to be able to log in using PixelPin. The user can find this when they click on my account then connected accounts.


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