Secure Login Button Reference

Example

Here is an example Secure Login Button

<a  title="Log in with MYDIGIPASS.COM"
    href="#"
    class="dpplus-connect"
    data-client-id="{CLIENT_ID}"
    data-redirect-uri="https://developer.mydigipass.com"
    data-scope="profile email"
    data-action="login"
    data-state="3625235475896327207589632720"
    data-auth-type="sso">
Log in with MYDIGIPASS.COM
</a>
<script src="https://static.mydigipass.com/en/dp_connect.js" type="text/javascript"></script>

As you can see a Secure Login Button is created via a link (the <a> tag) with specific attributes and loading our Javascript. Our JavaScript will be applied to the DOM element with the dpplus-connect class.

In the following sections you will learn how you can setup & customize this button to your own needs. You will then see how to setup the javascript part.

Button attributes

There are more attributes that one can set on an MYDIGIPASS button. Note that the mandatory fields are flagged as Required and must absolutely be present on your button. In development: feel free to update any of these attributes, refresh your page for your changes to apply.

E.g. change the data-style attribute, reload and watch your changes apply on the button.

Attribute Info Value

Attribute	Info	Value
`class`	Required	`dpplus-connect` `dpplus-logout` if you are building a logout button
`data-client-id`	Required	The client-id of your application
`data-redirect-uri`	Required	A valid redirect URI for your application
`data-scope`	Required	A space-delimited list of scopes that indicate which user data you intend to retrieve e.g. `profile email`. Use an empty value if you only need authentication. See scope values.
`data-state`	Required	Opaque value used by your application to maintain state between the initial request and the callback on your redirect_uri. Use it to track state, e.g. to remember that a user pressed the Secure Login Button on your application’s user profile page. YOU MUST INCLUDE SOME RANDOMNESS TO PREVENT CSRF ATTACKS.
`data-text`, `data-style`	Optional	Used to customize the style of the button see visual attributes values for valid values
`data-action`	Optional	Used to determine where to go when the user has clicked the button. Possible values are `login` or `sign-up` and defaults to login. If signup has been chosen, the user is immediately redirected to the signup page.
`data-auth-type`	Optional	Used to determine the authentication type on MYDIGIPASS. Current possible values are `sso` (default) or `no_sso`. Choosing `sso` means that a session is kept at MYDIGIPASS to allow for Single-Sign-On. On the other hand `no_sso` will destroy the MYDIGIPASS session after redirect to your application.

class

Required

dpplus-connect

dpplus-logout if you are building a logout button

data-client-id

Required

The client-id of your application

data-redirect-uri

Required

A valid redirect URI for your application

data-scope

Required

A space-delimited list of scopes that indicate which user data you intend to retrieve e.g. profile email. Use an empty value if you only need authentication. See scope values.

data-state

Required

Opaque value used by your application to maintain state between the initial request and the callback on your redirect_uri. Use it to track state, e.g. to remember that a user pressed the Secure Login Button on your application’s user profile page.

YOU MUST INCLUDE SOME RANDOMNESS TO PREVENT CSRF ATTACKS.

data-text, data-style

Optional

Used to customize the style of the button see visual attributes values for valid values

data-action

Optional

Used to determine where to go when the user has clicked the button. Possible values are login or sign-up and defaults to login. If signup has been chosen, the user is immediately redirected to the signup page.

data-auth-type

Optional

Used to determine the authentication type on MYDIGIPASS. Current possible values are sso (default) or no_sso. Choosing sso means that a session is kept at MYDIGIPASS to allow for Single-Sign-On. On the other hand no_sso will destroy the MYDIGIPASS session after redirect to your application.

data-scope values

The data-scope attribute determines which user data can be retrieved with an OAuth Access Token. Configure it with a list of space-delimited scope values e.g. data-scope="email phone address"

If you only want to authenticate users, you must provide an empty value for this attribute, i.e. data-scope="". In that case users will not be asked to grant permissions to your application to retrieve their user data.

There are 2 types of data scopes : User data scopes or eID scopes.

User data scope values

Scope value Description

Scope value	Description
`email`	The user’s confirmed e-mail address. You might not receive the users' email when the user has not yet confirmed his/her e-mail address.
`phone`	The user’s confirmed phone number. You might not receive the users' phone number when the user has not yet confirmed his/her phone number.
`profile`	Regular profile of the user
`address`	The address of the user

email

The user’s confirmed e-mail address. You might not receive the users' email when the user has not yet confirmed his/her e-mail address.

phone

The user’s confirmed phone number. You might not receive the users' phone number when the user has not yet confirmed his/her phone number.

profile

Regular profile of the user

address

The address of the user

eID scope values

Scope value Description

Scope value	Description
`eid_profile`	Electronic identity profile of a user with a valid eID card.
`eid_address`	The user’s home address as encoded on the electronic ID.
`eid_photo`	The user’s photograph as encoded on the electronic ID.

eid_profile

Electronic identity profile of a user with a valid eID card.

eid_address

The user’s home address as encoded on the electronic ID.

eid_photo

The user’s photograph as encoded on the electronic ID.

Visual attributes values

Attribute Supported values Default value Description

Attribute	Supported values	Default value	Description
`data-style`	`default`, `large`, `medium`, `small`, `false`	`default`	The button style
`data-text`	`secure-login`, `connect`, `sign-up`	`connect`	The image to be used on large & medium buttons
`data-help`	`true`, `false`	`false`	Show an info icon next the the MYDIGIPASS button that shows more information when clicked

data-style

default, large, medium, small, false

default

The button style

data-text

secure-login, connect, sign-up

connect

The image to be used on large & medium buttons

data-help

true, false

false

Show an info icon next the the MYDIGIPASS button that shows more information when clicked

From left to right: configured with a data-style value of default and a data-text value of sign-up, connect, secure-login:

Secure Login with MYDIGIPASS.COM Connect with MYDIGIPASS.COM Signup with MYDIGIPASS.COM

From left to right: configured with a data-style value of medium and a data-text value of sign-up, connect, secure-login.

Secure Login with MYDIGIPASS.COM Connect with MYDIGIPASS.COM Signup with MYDIGIPASS.COM

Configured with a data-style value of small and a data-text value of secure-login:

Secure Login with MYDIGIPASS.COM

Code examples

On a login page: Secure Login with MYDIGIPASS

<a data-text="secure-login" data-style="large" class="dpplus-connect"  data-client-id="CLIENT_ID" data-redirect-uri="REDIRECT_URI" title="MYDIGIPASS.COM Secure Login" href="#">Secure Login with MYDIGIPASS.COM</a>

On a user profile page: Connect with MYDIGIPASS

<a data-text="connect" data-style="large" class="dpplus-connect"  data-client-id="CLIENT_ID" data-redirect-uri="REDIRECT_URI" title="Connect with MYDIGIPASS.COM" href="#">Connect with MYDIGIPASS.COM</a>

On a signup page: Sign up with MYDIGIPASS

<a data-text="sign-up" data-style="large" class="dpplus-connect"  data-client-id="CLIENT_ID" data-redirect-uri="REDIRECT_URI" title="Signup with MYDIGIPASS.COM" href="#">Signup with MYDIGIPASS.COM</a>

Logout button

MYDIGIPASS can remind your users that they still have an active session on MYDIGIPASS when they log out of your application.

When users log out, they will be prompted with a popup to also close their MYDIGIPASS session. If the user does nothing, the MYDIGIPASS session will be terminated automatically after 10 seconds. He can also choose to continue his MYDIGIPASS session and continue to his launch pad.

You can configure your own logout button or link by adding the appropriate data attributes. Doing so will not apply any styling to your logout link, but it will attach an event handler that opens the MYDIGIPASS logout dialog.

Attribute Info Description

Attribute	Info	Description
class	Required	dpplus-logout
data-client-id	Required	The `client_id` assigned to your application during registration.

class

Required

dpplus-logout

data-client-id

Required

The client_id assigned to your application during registration.

Applying the javascript

You have 2 options to apply the javascript on the html link:

Add a <script> tag pointing to the static url of the dp_connect.js file after the button is created.

<script src="https://static.mydigipass.com/{LANGUAGE_CODE}/dp_connect.js" type="text/javascript"></script>

Note	Place the script at the end of your login page before the closing `</body>` tag to avoid your page load to be interrupted.

If you’d like to control when the button is transformed :
- Include the same <script> tag in your regular document <head>
- When the html link is loaded on your page make this javascript call to transform it into an MYDIGIPASS button

MYDIGIPASS.buttons.initialize();

Changing language

By changing the javascript source you can set the language of the button: Replace LANGUAGE_CODE in https://static.mydigipass.com/{LANGUAGE_CODE}/dp_connect.js with one of the supported language codes : en, fr, de, nl or it.