Python Flask

PixelPin Auth OpenID Connect

Updated June 30th 2017

Step-by-step installation guide

PixelPin Auth OpenID Connect is a Python module for authenticating with PixelPin using OpenID Connect.

PixelPin Auth OpenID Connect allows you to connect your website to PixelPin and let users authenticate using passwordless pictures. With PixelPin Auth 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.

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

Download the example website

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

Before starting the installation guide, you'll need the example website from our Github page found here.

Installation

    First in your favourite CLI type and execute the following command: sudo pip install pixelpin-auth-flask

    Then again in your favourite CLI type and execute the following command: sudo pip install pixelpin-auth-flask-sqlalchemy

Configuring the module

  1. Go to flask_pixelpin_auth/settings.py and copy the following code into the Config class:

    PIXELPIN_AUTH_LOGIN_REDIRECT_URL = '/'
    PIXELPIN_AUTH_USER_MODEL = 'flask_pixelpin_auth.user.models.User'
    PIXELPIN_AUTH_AUTHENTICATION_BACKENDS = (
        'pixelpin_auth_core.backends.pixelpin.PixelPinOpenIDConnect',
    )
     
    PIXELPIN_AUTH_PIXELPIN_OPENIDCONNECT_KEY = ""
    PIXELPIN_AUTH_PIXELPIN_OPENIDCONNECT_SECRET = ""								
    
  2. Next you'll need to create a PixelPin developer account to retrieve your PixelPin Client ID and Client Secret. To create a PixelPin developer account you'll need your Redirect URI, your redirect URI will be, for example: http(s)://www.example.co.uk/complete/pixelpin-openidconnect. 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.

  3. Once you've created your PixelPin developer account, copy and paste the Client ID and Client Secret into the PIXELPIN_AUTH_PIXELPIN_OPENIDCONNECT_KEY and PIXELPIN_AUTH_PIXELPIN_OPENIDCONNECT_SECRET variables respectively.

  4. Next go to flask_pixelpin_auth/app.py and copy the following code to the top of the file:

    from pixelpin_auth_flask_sqlalchemy.models import init_pixelpin_auth
    from pixelpin_auth_flask.routes import pixelpin_auth
    from pixelpin_auth_flask.template_filters import backends
    from pixelpin_auth_core.exceptions import PixelpinAuthBaseException								
    
  5. Staying in app.py, add this line of code to the register_extensions definition:

    init_pixelpin_auth(app, db.session)							
    
  6. Staying in app.py, add this line of code to the register_blueprints definition:

    app.register_blueprint(pixelpin_auth)
    
  7. Staying in app.py, add this line of code to the register_context_processors definition:

    app.context_processor(backends)								
    
  8. Staying in app.py, add this definition to the register_errorhandlers definition:

    def pixelpin_auth_error(error):
        if isinstance(error, PixelpinAuthBaseException):
            return redirect('/pixelpinautherror')
    app.errorhandler(500)(pixelpin_auth_error)
    
  9. In manage.py, add these lines of code to the syncdb on line 36 definition:

    from pixelpin_auth_flask_sqlalchemy import models
    models.PSABase.metadata.create_all(db.engine)
    

Modifying the site

  1. Go to flask_pixelpin_auth/templates/public/login.html and add the following code to add the SSO button:

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

    <a class="btn btn-default" href="{{ url_for("pixelpin_auth.auth", backend="pixelpin-openidconnect") }}">Sign in Using PixelPin</a> 
    
  2. Go to flask_pixelpin_auth.template/public/register.html and add the following code to add the SSO button:

    <a class="btn btn-default" href="{{ url_for("pixelpin_auth.auth", backend="pixelpin-openidconnect") }}">Register Using PixelPin</a>
    
  3. Finaly go to flask_pixelpin_auth/templates/users/members.html and add the following code into the jumbotron div class:

    <h2>User Data:</h2>
    <p>Username: {{ current_user.username }}</p>
    <p>Email: {{ current_user.email }}</p>
    <p>Full Name: {{ current_user.first_name }} {{ current_user.last_name }}</p>
    <p>Gender: {{current_user.gender}}</p>
    <p>Birthdate: {{current_user.birthdate}}</p>
    <p>Phone Number: {{current_user.phone_number}}</p>
    <p>Street Address: {{current_user.street_address}}</p>
    <p>Locality: {{current_user.locality}}</p>
    <p>Region: {{current_user.region}}</p>
    <p>Postal Code: {{current_user.postal_code}}</p>
    <p>Country: {{current_user.country}}</p>
    

Testing the module

The Python Flask example website login page should look something like this:

Test the plugin by pressing Sign in Using PixelPin.

Contributing

PixelPin Auth OpenID Connect 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 Core
  2. PixelPin Auth Flask
  3. PixelPin Auth Flask SQLAlchemy