Vipps Login


Vipps Login for CraftCMS

This plugin is currently a test pilot (pre-release). It is very likely that you will encounter bugs or scenarios that are not yet supported.

Please keep up to date with updates as soon as they happen. They are very important in this pre-release period.

We encourage you to create an issue here if you require assistance or run in to a problem.

This plugin provides Vipps Login Integration for CraftCMS / CraftCommerce

Description

This is the official Vipps Login plugin for CraftCMS. It is owned by Vipps AS and maintained by Ellera AS.

With Vipps Login for CraftCMS you can

  • Get information about users and visitors via Vipps
  • Let users sign up and log in with Vipps
  • Link their existing account to Vipps

Getting started

Installation

Settings

Find the Settings Page

You can find the settings by navigating to Settings -> Vipps Login. Plugin Settings: Location

Add your credentials

Insert your credentials. You can find these in the Vipps Portal Plugin Settings: Credentials

Activate Vipps Login and add the redirect URI

In the Vipps Portal, activate Login with Vipps and add the Redirect URI as you find it under "Redirect URIs" in either "Login with Vipps" and/or "Continue with Vipps". Also adjust the scopes to suit your applications needs.

Setup Login

Plugin Settings: Credentials

Add Redirect URIs

Plugin Settings: Credentials

Locate Redirect URIs

Plugin Settings: CredentialsPlugin Settings: Credentials

Rendering the button

To render the login button anywhere you can utilize the loginButton.render() function of the component the plugin registers.

Note: All these options work for the continueButton as well

{{ craft.vippsLogin.loginButton.render() | raw }}

The button defaults to large (250px) rectangle formed button. If the language is not given by any of the language functions below, the plugin will used norwegian buttons if the current site language is nb, nn, nb-NO or nn-NO. If no language is given, and the current site language is something other than norwegian, english buttons will be used.

The button can be modified by adding functions between loginButton and render():

FunctionDescriptionExample
en or englishEnglish textcraft.vippsLogin.loginButton.en.render()
no or norwegianNorwegian text (Default)craft.vippsLogin.loginButton.no.render()
pillPill shapecraft.vippsLogin.loginButton.pill.render()
rect or rectangleRectangle shape (Default)craft.vippsLogin.loginButton.rect.render()
smallSmall size, 210pxcraft.vippsLogin.loginButton.small.render()
largeLarge Size, 250px (Default)craft.vippsLogin.loginButton.large.render()
continueChange the login button to Continuecraft.vippsLogin.loginButton.continue.render()
loginChange the continue button to Logincraft.vippsLogin.continueButton.login.render()
registerChange the button to Registercraft.vippsLogin.continueButton.register.render()

These functions can be combined;

{{ craft.vippsLogin.loginButton.en.pill.small.render() | raw }}

You can also add parameters to the <a> and <img> tag by providing a string in the render function: render(a, img)

Append the a tag:

{{ craft.vippsLogin.loginButton.render('rel="external"') | raw }}

Append the img tag:

{{ craft.vippsLogin.loginButton.render(null, 'title="Login with Vipps" class="btn"') | raw }}

Append to both:

{{ craft.vippsLogin.loginButton.render('rel="external"', 'title="Login with Vipps" class="btn"') | raw }}

Rendering your own button

You can also call the function craft.vippsLogin.getLoginUrl() or craft.vippsLogin.getContinueUrl() to just get the URL.

<a href="{{ craft.vippsLogin.getLoginUrl() }}">Log in with Vipps</a>
<a href="{{ craft.vippsLogin.getContinueUrl() }}">Continue with Vipps</a>

Getting user information from Vipps

As long as the user vipps token is not expired, you can access the user information with the session object.

{% if craft.vippsLogin.session %}
    <p>Hi, {{ craft.vippsLogin.session.getGivenName }}!</p>
{% else %}
    <p>Not logged in</p>
{% endif %}

Attributes of the Session object

AttributeTypeDescription
isExpiredbooleanIs the vipps session valid
getExpiresInintegerHow long til the vipps session expires
getAddressesarrayArray of registered addresses
getEmailstringUser email
isEmailVerifiedbooleanIs the email verified
getGivenNamestringUsers given name
getFamilyNamestringUsers family name
getNamestringUsers full name
getPhoneNumberstringUsers phone number
getSidstringReturns the Session ID
getSubstringUnique ID for this user
getNninstringReturns the Norwegian National Identification Number
getBirthdatestringReturns the users birth date

Showing error messages

This plugin utilizes Craft::$app->session->setFlash() for outputting error messages.

To show these messages in your template you need to look at the documentation and implement something similar to this:

{% set messages = craft.app.session.getAllFLashes(true) %}
{% for key, message in messages %}
    <p class="{{ key }}">
        {{ message }}
    </p>
{% endfor %}
TypeDescriptionMessage
dangerLogin failed in Vippserror_description from Vipps API
dangerLogin failed in Vipps without message'Something went wrong while logging you in. Please try again, if the error persists contact the site administrator.'

Changing the Password Verification template

When a user register/login with Vipps and an email that exists, they will be asked to confirm the password and the accounts will be linked.

If the setting under "Verification Template" under the "Log In with Vipps" tab is empty, our example template vendor/vippsas/vipps-login-craft/src/templates/verify.twig is used. To make your own, make a new twig file in your templates folder and update the setting.

If your template is located in templates/vipps/verify set the "Verification Template" option to vipps/verify. Use our example template to see the logic and forms that needs to be present.

Password verification and connecting to existing accounts

When a user attempts to sign up with an email that already exist they are redirected to a password verification page. When they confirm their password the existing account is linked to the vipps account and the user can log in using Vipps.

The password verification template provided by the plugin is just an example and can be found in vendor/vippsas/src/templates/verify.twig. Use this template as a starting point for implementing your own design. Update the field in Settings -> Log In with Vipps -> Verification Template with the new template path.

Ex. if your template is templates/vipps/verification.twig the settings field should be vipps/verification.

Events

The plugin triggers different events based on the user actions. These can be used to inject logic.

Example code

use yii\base\Event;
use vippsas\login\events\LoggedInEvent;
use vippsas\login\VippsLogin;

...

Event::on(
    VippsLogin::class,
    VippsLogin::EVENT_USER_LOGGED_IN,
    function(LoggedInEvent $e) {
        // Implement your own logic here
        // using the $e variable to access 
        // User and Session classes
        die(var_dump([
            'message' => 'User logged in',
            'user' => $e->getUser(),
            'session' => $e->getSession()
        ]));
    }
);

Events

EventNameFunctionsDescription
vippsas\login\events\LoggedInEventVippsLogin::EVENT_USER_LOGGED_INgetUser(), getSession()Triggers when a user is logged in with vipps.
vippsas\login\events\ContinueEventVippsLogin::EVENT_USER_CONTINUEDgetSession()Triggers when a user continues with vipps.
vippsas\login\events\RegisterEventVippsLogin::EVENT_USER_CREATEDgetUser(), getSession()Triggers when a user registers with vipps.
vippsas\login\events\ConnectEventVippsLogin::EVENT_USER_CONNECTED_ACCOUNTgetUser(), getSession()Triggers when a user connects an existing account to vipps.

Example Code

Have a look at the twig template located in docs/examples/frontend.twig for some usage examples. The twig template uses Bulma CSS from a CDN and should work right out of the box if the plugin is installed correctly.

How can I get help if I have any issues?

For Craft-related issues you should use the resources and communities available here.

For Plugin-related issues you should create a new issue in the official repository.

For Vipps-related issues you should contact Vipps Integration


Free

Package Name

To install this plugin, search for its package name on the Plugin Store and click “Install”.


Information

  • Version 1.0.0
  • Last Update 11/2/2020
  • Active Installs 3
  • Compatibility Craft 3
  • License MIT
  • Categories Utilities, Integrations

Report an issue