Drupal 8

PixelPin OpenID Connect

Updated June 27th 2017

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 user's can log in to your website using their PixelPin pictures. With PixelPin OpenID Connect, 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 module

  1. Click on the link to download the PixelPin OpenID Connect module.

Installation

  1. (Optional) If you want to install user data fields automatically to save you time creating them, go to the downloaded PixelPin OpenID Connect module downloaded location, extract the contents of the zip file and go to config/fields and copy all the files in the folder and paste the files into the config/install folder. Finally compress the module folder.

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

  3. Click + install new module.

  4. Click Choose File or Browse File....

  5. Locate the PixelPin OpenID Connect module .zip file and select open.

  6. Click install to install the PixelPin OpenID Connect module.

  7. Click Enable newly added modules.

  8. 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.

  9. 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 where the user's data will be saved and which field it'll appear on. The PixelPin OpenID Connect automatically adds these fields with the preferred user claims mappings to save you time creating them.

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

  8. Click on Structure in the navbar.

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

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

  11. 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.

  12. Position the block to your needs.

  13. Click on Configuration in the nav bar.

  14. Under DEVELOPMENT click on Performance.

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

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

If you downloaded with user fields included

  1. Next, we'll be enabling the visibility of those fields on the users account and log in/create new account forms. At the top of the page click configuration.

  2. Click on Account settings under PEOPLE.

  3. Click on Manage form display.

  4. These fields appear on the log in/create new account pages as well as the user's edit account page. To enable the disabled fields simply drag the fields above the Disabled label or click on the widget drop down menu and click on Textfield.

  5. Remember to press 'save' at the bottom of the page!

  6. Click on Manage display.

  7. These fields appear on the user's profile whenever another user is viewing. To enable the disabled fields simply drag the fields above the Disabled label or click the Format drop down menu and click Plain Text.

  8. Remember to press 'save' at the bottom of the page!

  9. Full configuration is now complete.

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.

Registration

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.

Contributing

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