User Experience

Integrating new Smart-ID+, Smart-ID RP API v3 device link flows, into your web service you need to make some additional changes in User Interface (UI) layer. Also give instructions in case something went wrong.

Provide login options based on device

Detect if user is trying to use Smart-ID on mobile, tablet or computer and provide options (same-device, cross-device or both) based on that. Use method that make sense for you (ua-parser-js or similar).

Please note

browsers alter user-agent value when user asks desktop site from mobile device.

Phone: Provide both options

Tablet: Provide both options

Computer: Provide one option

default: same-device

static

"Open Smart-ID app"
"Scan QR code with another device"

default: cross-device

static

"Scan QR code with another device"
"Open Smart-ID app"

cross-device

static

"Sign in using Smart-ID QR code"

Show instructions
static

Finish authentication in Smart-ID app
in case of user moves back without finishing transaction
static

Scan the QR code with Smart-ID app to continue
This session is about to expire
Refresh QR code each second over 60 second period to leave time for the user to finish transaction in the app
Do not show QR code that is older than 3sec

User interaction

Smart-ID app is opened automatically

static

or fallback page is displayed

static

Page guides user with instructions

User opens Smart-ID app to scan QR code

static

After successful PIN entry

user is redirected back to e-service

static

user returns back to e-service

static

Web2app callback exceptions
static

In some cases user may end up in browser he/she did not start from and this results in session cookie verification failure.

Some known cases

  • user started in a web browser embedded in an app

  • user started from non-default browser (on an iOS device)

  • user is using incognito or private mode

Please try again from your default browser.

Sample video through the eyes of a user
IMPORTANT

At the end of authentication on same device flow (web2app) new tab is opened. We suggest closing old tab on the background when authentication has been finished on Smart-ID app.