Passport PixelPin OpenID Connect

Step-by-step installation guide

Passport PixelPin OpenID Connect is a NodeJS module for authenticating with PixelPin using the passport openid connect authentication middleware and the OpenID Connect API.

Passport PixelPin OpenID Connect allows you to connect your website to PixelPin and let users authenticate using passwordless pictures. With Passport PixelPin OpenID Connect module your clients sign in to your store using their PixelPin pictures. There is no need to complete numerous forms for a successful registration.

Download the example website

Downloading an example website allows you to understand how to install Passport PixelPin OpenID Connect into a NodeJS website. The knowledge you'll learn from installing the module will allow you to install the module onto your own website.

You'll need to retrieve your Client ID and Client Secret by creating a PixelPin developer account. To create a PixelPin developer account your callbackURL must match the Redirect URI which you'll use to create a PixelPin developer account. Your callbackURL and Redirect URI is your websites base URL + /auth/pixelpin/callback', for example http(s)://www.google.co.uk/auth/pixelpin/callback would be Google's callbackURL and RedirectURI. A guide to create a PixelPin developer account can be found here.

Next we'll be adding the PixelPin Strategy and configuring it. copy the following code into the server.js file on line 15:

Once you've retrieved your Client ID and Client Secret, type/copy and paste them where it says --Client ID-- and --Client Secret--.

Next we'll be adding the code that serializes the user. Each subsequent request will not contain credentials, but rather the unique cookie that identifies the session in order to support signin sessions, Passport will serialise and deserialise 'user' instances to and from the session.

In a Connect or Express-based application, passport.initilize() middleware is required to initialize passport. If your application uses persistent signin session, 'passport.session()' middleware must also be used. So in server.js on line 64 insert the following code:

app.use(passport.initialize());
app.use(passport.session());

So it'll look something like this:

Two routes are required for PixelPin OpenID Connect authentication. The first route accepts the form submission. During authentication, the user will be redirected to PixelPin, the route enables you to choose which scopes you want to use. The second route is the URL to which the user will be returned too after they authenticated with PixelPin. So, in server.js on line 107 insert the following code:

To allow the user to sign in using Passport PixelPin OpenID Connect they need a button to start the process. It could be any kind of button/link as long as it links to '/auth/pixelpin' then it should work. So go to View/signin.ejs and View/register.ejs and insert the following code on line 55:

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

To present the user data to the user you can use the data stored in session or query the data from your database, the example below is how to get user data from session data So go to View/account.ejs and insert the following code on line 52:

Note: Some data may or may not come back from PixelPin depending on whether the user has added additional data. So if you're getting data from session, the data can come back as actual data or come back as unavailable