<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>
Secure Login Button Reference
Example
Here is an example Secure Login Button
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 |
---|---|---|
|
Required |
|
|
Required |
The client-id of your application |
|
Required |
A valid redirect URI for your application |
|
Required |
A space-delimited list of scopes that indicate which user data you intend to retrieve e.g. |
|
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. |
|
Optional |
Used to customize the style of the button see visual attributes values for valid values |
|
Optional |
Used to determine where to go when the user has clicked the button. Possible values are |
|
Optional |
Used to determine the authentication type on MYDIGIPASS. Current possible values are |
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 |
---|---|
|
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. |
|
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. |
|
Regular profile of the user |
|
The address of the user |
eID scope values
Scope value | Description |
---|---|
|
Electronic identity profile of a user with a valid eID card. |
|
The user’s home address as encoded on the electronic ID. |
|
The user’s photograph as encoded on the electronic ID. |
Visual attributes values
Attribute | Supported values | Default value | Description |
---|---|---|---|
|
|
|
The button style |
|
|
|
The image to be used on large & medium buttons |
|
|
|
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
:
From left to right: configured with a data-style
value of medium
and a data-text
value of sign-up
, connect
, secure-login
.
Configured with a data-style
value of small
and a data-text
value of secure-login
:
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 |
---|---|---|
class |
Required |
dpplus-logout |
data-client-id |
Required |
The |
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 thedp_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
.