Identity verification

Web SDK - Electronic ID

402 views December 3, 2019 March 25, 2020 0

Page overview:

Requirements

  • The web client requires HTTPS to function due to browser restrictions.
  • It also requires a browser with WebRTC protocol support (meaning that this SDK is not supported in Safari for iOS devices).
  • You must have the “authorization” token provided by the Assure API (during Step C: Create Process).

Import the SDK

The SDK is imported by directly embedding the JavaScript file URL in the web page.

Using the SDK

This is what you will need to do during Step D1: Launch provider SDK:

  • Redirect the end-user to an endpoint in your application where you present an HTML page which contains the web SDK.
  • Use the “authorization” token (<AUTHORIZATION_TOKEN>) you got during Step C: Create Process when starting the web VideoID handler.
  • Use the info from Step B: Get Document Types to know the “idType” number to use in the JavaScript code.
  • Write the code to handle the scenarios when the user has completed the process, or in case of an error.

The code below provides an example of this:

<!doctype html>
<html>
<head>
    <style>
        body, html, #video { margin: 0; padding: 0; height: 100%; }
    </style>
    <script src="https://etrust-sandbox.electronicid.eu/v2/js/videoid.js"></script>
</head>
<body>
 
    <div id="video">
    </div>
 
    <script>
        var videoId = EID.videoId('#video', {
            lang: "en",
        });
 
        videoId.on("completed",
            function (video) {
                videoId.turnOff();
                document.location.href = 'https://myserver.com/complete'
            });
 
        videoId.on("failed",
            function (error) {
                console.log(error);
                alert("VideoId Failed");
            });
 
        videoId.turnOn();
 
        /*
            138 = Norwegian passport
            For a full list of the idType for each type of
            document, please refer to the document-types
            endpoint in the Assure API
        */
        videoId.start({
            authorization: "<AUTHORIZATION_TOKEN>",
            idType: "138"
        });
 
    </script>
</body>
</html>

The end-user is now prompted to supply the necessary identity information, such as images from the front and back of the id document and selfie image.

Customization

Almost everything can be customized (backgrounds, fonts, sizes, colors, animations, etc).

Electronic ID adds their styles immediately before the styles of the client so your CSS will overwrite Electronic ID’s styles.

The flow is:

  1. You integrate Electronic ID’s SDK and HTML/JS in your Web site.
  2. You add your own style sheet (CSS) to the elements you want to change.
  3. Electronic ID’s library interprets those styles as a priority and overwrites their styles.

Fields that can be customized

Custom animation list
@keyframes highlightRoi
@keyframes scaleAnim
@keyframes perspective-anim
@keyframes notification
@keyframes stroke
@keyframes scale
@keyframes fill
@keyframes scanning
@keyframes rotation
@keyframes flash
@keyframes opacity
@keyframes dash
@keyframes dash-check
@keyframes loading
@keyframes loaded
@keyframes appear-from-bottom
Custom element list:
#eid-video
#videoid-overlay
#videoid-container
#eid-agent-video
#eid-agent-video video
#videoid-overlay .spinner
#videoid-overlay .spinner span
#videoid-overlay .spinner span:before
#videoid-overlay .spinner.active
#videoid-legend
#videoid-legend-step
#videoid-legend-step>div
#videoid-contextualhelp-title
#videoid-legend-step>div p
#videoid-legend-step>div div.contain
#videoid-containerNotification
#videoid-contextualhelp-video
#videoid-legend-step>div div.contain .controls
#videoid-legend-step>div div.contain.playing .controls
#videoid-contextualhelp-button
#videoid-legend a
#videoid-legend a:hover
#videoid-legend a#logo-eid
#videoid-legend a#volume
#videoid-legend a#volume.active
#videoid-legend a#help
#videoid-legend a.active
#videoid-legend.open
#videoid-legend-step.open
#videoid-legend-step.open>div h3
#videoid-legend-step.open>div p
#videoid-legend-step.open>div>div
#videoid-legend-step.open>div button
#videoid-legend.open #logo-eid
#videoid-legend.open #volume
#videoid-legend.open #volume.active
#videoid-container #video-loading
#videoid-container #video-loading p
#videoid-container #video-loading button
#videoid-container #video-loading #video-instructions
#videoid-container #video-loading #video-instructions img
#videoid-container #video-loading #video-instructions h3
#videoid-container #video-loading #video-instructions ul
#videoid-container #video-loading #video-instructions ul li
#videoid-container #video-loading #video-instructions ul li span
#videoid-container #video-loading.hide
#videoid-container #video-loading #video-instructions ul li:nth-child(1)
#videoid-container #video-loading #video-instructions ul li:nth-child(2)
#videoid-container #video-loading #video-instructions ul li:nth-child(3)
#videoid-container #video-loading #video-instructions ul li:nth-child(4)
#videoid-container #video-loading #videoid-progress-bar
#videoid-container #video-loading #videoid-progress-bar:after
#videoid-container #video-loading.loaded p
#videoid-container #video-loading.loaded button
#videoid-container #video-loading.loaded #videoid-progress-bar
#videoid-container #video-loading.loaded #videoid-progress-bar:after
#videoid-detection
#videoid-detection #frame-Scan
#videoid-detection #frame-Scan.hide
#videoid-mark-roi
#videoid-mark-roi.hologram
#videoid-container-text-notification
.videoid-notification,.videoid-notification
.videoid-notification.show,.videoid-notification.show,#videoid-container-text-notification.show
.videoid-notification.show.warning
.videoid-notification.show.success,.videoid-notification.show.success
#videoid-mark-roi #animation-scanned
#videoid-mark-roi #animation-scanned div
#videoid-mark-roi #animation-scanned div img
#videoid-mark-roi #animation-scanned #phase-check
#videoid-mark-roi #animation-scanned .checkmark__circle
#videoid-mark-roi #animation-scanned .checkmark
#videoid-mark-roi #animation-scanned .checkmark__check
#videoid-mark-roi #animation-scanned.hide
#videoid-mark-roi #animation-scanned:not(.hide)
#videoid-mark-roi #animation-scanned:not(.hide) div
#videoid-mark-roi #animation-scanned.flash
#videoid-mark-roi .spinner
#videoid-mark-roi.color
#videoid-mark-roi.color .spinner
#videoid-mark-roi.face
#videoid-mark-roi.top-right
#videoid-mark-roi.bottom-left
#videoid-mark-roi.bottom-right
#videoid-detection svg#roi-svg
#videoid-detection svg#roi-svg polygon
#videoid-detection svg#rectangle
#videoid-detection svg#rectangle line
#videoid-detection.flash
#videoid-container #document-scanned
#videoid-container #document-scanned #frame
#videoid-container #document-scanned.hide
#video-error
#video-error h2
#video-error p
#video-error button
#videoid-container.loading #video-loading
/* #videoid-container.loading #videoid-detection
#videoid-legend-step>div div.contain
.videoid-notification,.videoid-notification
#videoid-overlay .spinner
#videoid-overlay .spinner.active
#videoid-legend-step>div div.contain
#videoid-container #video-loading #video-instructions ul
#videoid-container #video-loading #video-instructions ul li
#videoid-container #video-loading #video-instructions ul li span
.videoid-notification , .videoid-notification
#videoid-mark-roi #animation-scanned div img
svg#phase-check .path
svg#phase-check .path.circle
svg#phase-check .path.line
svg#phase-check .path.check

How to implement in your code

To implement your own customization you must create a CSS file and do the desired changes in that file.

Important – Load CSS file at end of the HTML file

For your changes to override the default settings you must load your CSS file at the end of the HTML file.

Example of a custom “eid.css” file loaded at the end of the HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
    <link rel="icon" href="images/favicon.png" type="image/png">
</head>
<body>
<div id="close">
    <img src="close.png" alt="Close">
</div>
<div id="video"></div>
<div>
    <form id="redirect" action="redirect" method="post">
        <input type="hidden" id="session" name="session"/>
    </form>
</div>
<script src="https://etrust-sandbox.electronicid.eu/v2/js/videoid.js"></script>
<script>
    let videoId = EID.videoId('#video', {lang: "en"});
    videoId.turnOn();
    videoId.start({authorization: "x", idType: "147"});
    videoId.on("completed", function () {
        videoId.turnOff();
        document.getElementById('session').value = sessionStorage.getItem('accessToken');
        document.getElementById('redirect').submit();
    });
    videoId.on("failed", function (error) {
        alert("VideoId Failed");
    });
    document.getElementById('close').onclick = function() {
        videoId.turnOff();
        location.href = 'https://mydomain.com/assure-server/assure/return?provider=eid&dossierId=x&processId=y&status=cancel';
    };
</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="eid.css">

Customization examples

Video overlay

Over the webcam view but under the notification view.

#videoid-overlay {
    background-color: cyan;
}
Video ROI (region of interest)

Configure the ROI’s color and width:

#videoid-mark-roi.color {
    border-color: red;
    border-width: 15px;
}
Loading

Setup the loading bar with a static color and the moving bar with a gradient.

#videoid-container #video-loading #videoid-progress-bar #bar {
  background: blue;
  /* Old browsers */
  background: -moz-linear-gradient(left, blue 0%, green 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, blue 0%, green 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, blue 0%, red 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='blue', endColorstr='red', GradientType=1);
  /* IE6-9 */
}
 
 
#videoid-container #video-loading #videoid-progress-bar {
  background: green;
}
Error screen

Customized error screen background and text color:

#video-error {
  background: lime;
}

#video-error h2 {
  color: blue;
}
 
#video-error a {
    color: blue;
    border: 2px solid blue;
}
Notification

div.videoid-notification.notification-image h1 {
  color: red;
}
 
.videoid-notification {
    color: blue;
}
 
div.videoid-notification.notification-image {
  background-color: yellow;
}
 
div.videoid-notification.notification-image img {
  border-radius: 10%;
}
Notification text

.videoid-notification.notification-text {
  background: blue;
}
 
 
.videoid-notification.notification-text span {
    color: red;
}

Default CSS code used by Electronic ID

You can check the default customization code used by Electronic ID herehttps://etrust-sandbox.electronicid.eu/v2/js/assets/css/eid.css

Debugging Tips

You can use the Chrome Developer tools to debug the CSS:

  • Press the Chrome menu button
  • Press “More Tools”
  • Press “Developer Tools”

Use the “element inspector” to check each element:

Also, you can stop the script to checkout an element. To do that, press “Sources” and then “Pause”.

Was this helpful?