Demo Application

The code example can be downloaded by clicking the file link below

This is a code example that fully incorporates the Sybrin Identity Web SDK. To use the above example, please ensure the following:

You have an API key as provided by Sybrin
You have the backend API endpoints for authentication and data extraction as provided by Sybrin

Then follow these steps:

Download the sybrin-identity-websdk-demo-application.zip file linked above
Extract the zip file contents
Open index.js
In index.js, replace 'your-api-key-here' with the API key provided by Sybrin
In index.js, replace 'your-auth-endpoint-here' with your backend authorization API endpoint
In index.js, replace 'your-data-extraction-endpoint-here' with your backend data extraction API endpoint
Host the folder in any hostable environment, e.g. IIS

Please remember to supply your API key and endpoints to the configuration options in index.js.

For your convenience in formulating custom styling for all components, sybrin.identity.css is also provided as a base example below.

<!DOCTYPE html>
<html class="" lang="en" id="html">

<head>
    <title>
        Sybrin Identity
    </title>

    <base href="./" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script src="sybrin.identity.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css" media="screen" />
</head>

<body>
    <header>
        <div class="branding">
            <img class="logo"
                src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Sybrin-Logo-Horizontal-Blue.svg" />
        </div>
        <div class="branding">
            <span class="title">Sybrin Web SDK - Identity</span>
        </div>
        <div class="actions">
            <button onclick="openScanPassport()">Scan Passport</button>
            <button onclick="uploadPassport()">Upload Passport</button>
        </div>
    </header>
    <div id="viewport">
        <div class="sybrin-demo-loading"> Please wait. Loading... </div>
    </div>
</body>

</html>

var identity;

var openScanPassport = async function () {
    var result = await identity.openScanDocument({
        countryCode: 'ZAF',
        documentTypeName: 'passport'
    });

    console.log('Success: ', result.success);

    for (const property in result.data) {
        console.log('Value of ' + property + ' is ' + result.data[property]);
    }
}

var uploadPassport = async function () {
    var result = await identity.uploadDocument({
        countryCode: 'ZAF',
        documentTypeName: 'passport'
    });

    console.log('Success: ', result.success);

    for (const property in result.data) {
        console.log('Value of ' + property + ' is ' + result.data[property]);
    }
}

document.addEventListener('DOMContentLoaded', function (event) {
    var options = new Sybrin.Identity.Options({
        apiKey: 'your-api-key-here',
        authorizationEndpoint: 'your-auth-endpoint-here',
        dataExtractionEndpoint: 'your-data-extraction-endpoint-here',
    });

    identity = new Sybrin.Identity.Api();
    identity.initialize(options);
    identity.getVersionInfo().then(versionInfo => {
        document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Identity (version ' + versionInfo.webSdkVersion + ')';
    });
    identity.checkCompatibility(true);

    var wizardComponent = null;

    var initWizard = async () => {
        if (wizardComponent) {
            wizardComponent.destroy();
        }

        var clientInfo = await identity.getClientInfo();

        wizardComponent = new Sybrin.Identity.WizardComponent({
            id: 'viewport',
            api: identity,
            documentScanUseModal: (!clientInfo.isMobile)
        });

        wizardComponent.initialize();

        wizardComponent.onWizardDone = (result) => {
            alert(JSON.stringify(result));
        }

        wizardComponent.onScanError = (error) => {
            alert(error);
        }

        wizardComponent.onScanCancelled = () => {
            console.log('Operation cancelled');
        }
    }

    initWizard();
})

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #2d2d46;
    margin: 0;
    padding: 0;
}

header {
    background-color: white;
    margin-bottom: 50px;
    padding: 15px 60px;
    overflow: auto;
}

header .branding {
    float: left;
}

header .actions {
    float: right;
}

header img {
    height: 33px;
    padding-top: 3px;
}

header span.title {
    display: inline-block;
    line-height: 1;
    border-radius: 50rem !important;
    margin-left: 0.5rem !important;
    padding: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    background: rgba(0, 0, 30, 0.05) !important;
    color: rgba(0, 0, 30, 0.824) !important;
    margin-top: 4px;
}

header button {
    font: 300 1em/2em Roboto, sans-serif;
    padding: 0.25rem 1rem;
    border-radius: 50rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    border: none;
    color: #fff !important;
    background: linear-gradient(160deg, #00fafa 0, #3264fa 100%);
    box-shadow: 0 15px 30px -10px #3264fa !important;
    cursor: pointer;
}

@media screen and (max-width: 800px) {
    header {
        display: none;
    }
}

.sybrin-demo-loading {
    color: white;
    padding: 20px;
}

.sybrin-debug-button {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #3498db;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 27px;
    text-decoration: none;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid;
}

.sybrin-identity-document-select {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e4e5e8;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    width: calc(100% - 4px);
    max-width: 400px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    background-color: white;
}

.sybrin-identity-document-select .sybrin-identity-card {
    height: 50px;
    padding: 15px 10px;
    border: 1px solid #0078c8;
    border-radius: 5px;
    margin: 10px 20px;
    cursor: pointer;
}

.sybrin-identity-document-select .sybrin-identity-card:hover {
    box-shadow: 0 0 10px rgba(50, 50, 55, 0.6);
}

.sybrin-identity-document-select .sybrin-identity-card-image {
    float: left;
    height: 100%;
    width: 20%;
}

.sybrin-identity-document-select .sybrin-identity-card-image svg {
    height: 100%;
    max-width: 45px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(50, 50, 55, 0.4);
}

.sybrin-identity-document-select .sybrin-identity-card-text {
    float: right;
    text-align: left;
    width: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-identity-document-select .sybrin-identity-card-text p {
    margin: 5px;
}

.sybrin-identity-document-select .sybrin-identity-card .sybrin-identity-card-title {
    font-weight: bold;
}

.sybrin-identity-document-select .sybrin-identity-card .sybrin-identity-card-subtitle {
    color: rgba(50, 50, 55, 0.8);
}

.sybrin-identity-document-select-documents {
    margin: 25px 0;
    max-height: 370px;
    overflow: auto;
}

.sybrin-identity-document-scan {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e4e5e8;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    width: calc(100% - 4px);
    max-width: 400px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    background-color: white;
}

.sybrin-identity-document-scan-modal-commands button,
.sybrin-identity-document-scan button {
    border: none;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    font-size: 20px;
    font-weight: normal;
    background: #3498db;
    padding: 10px 35px;
    text-decoration: none;
    cursor: pointer;
}

.sybrin-identity-document-scan-modal-commands button:hover,
.sybrin-identity-document-scan button:hover {
    background: #3cb0fd;
    text-decoration: none;
}

.sybrin-identity-document-scan-image {
    position: relative;
    height: 300px;
}

.sybrin-identity-document-scan-image svg {
    height: 160px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(50, 50, 55, 0.4);
}

.sybrin-identity-document-scan-video {
    position: relative;
    width: 100%;
}

.sybrin-identity-document-scan a {
    text-decoration: none;
    color: rgba(50, 50, 55);
    border-bottom: 1px solid #3498db;
}

.sybrin-identity-document-scan-instruction {
    padding: 15px 10px;
    margin: 10px 20px;
}

.sybrin-identity-document-scan-instruction-icon {
    float: left;
    height: 25px;
    width: 30px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-identity-document-scan-instruction-icon svg {
    height: 100%;
}

.sybrin-identity-document-scan-instruction-text {
    float: right;
    text-align: left;
    width: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-identity-modal-backdrop,
.sybrin-identity-document-scan-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.sybrin-identity-modal,
.sybrin-identity-document-scan-modal {
    width: calc(100% - 32px);
    max-width: calc((100vh / 3 * 4) - 70px);
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.sybrin-identity-modal {
    width: 100%;
    max-width: 450px;
}

@media (orientation: portrait) {
    .sybrin-identity-document-scan-modal-narrow {
        width: calc(100% - 325px);
    }
}

.sybrin-identity-modal-message,
.sybrin-identity-document-scan-modal-video {
    position: relative;
    background-color: white;
    border-top: 2px solid #e4e5e8;
    border-left: 2px solid #e4e5e8;
    border-right: 2px solid #e4e5e8;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
}

.sybrin-identity-modal-message {
    padding: 20px 0;
}

.sybrin-identity-modal-commands,
.sybrin-identity-document-scan-modal-commands {
    background-color: white;
    border-bottom: 2px solid #e4e5e8;
    border-left: 2px solid #e4e5e8;
    border-right: 2px solid #e4e5e8;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 10px 0;
    width: 100%;
}

.sybrin-identity-modal-commands {
    padding: 0 0 20px 0;
}

.sybrin-identity-modal-commands button {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #3498db;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 27px;
    text-decoration: none;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid;
}

.sybrin-identity-country-select {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e4e5e8;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    width: calc(100% - 4px);
    max-width: 400px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    background-color: white;
}

.sybrin-identity-country-select .sybrin-identity-country-select-countries {
    max-height: 370px;
    overflow: auto;
}

.sybrin-identity-country-select .sybrin-identity-card {
    height: 30px;
    padding: 15px 10px;
    border: 1px solid #0078c8;
    border-radius: 5px;
    margin: 10px 20px;
    cursor: pointer;
}

.sybrin-identity-country-select .sybrin-identity-card:hover {
    box-shadow: 0 0 10px rgba(50, 50, 55, 0.6);
}

.sybrin-identity-country-select .sybrin-identity-card-image {
    float: left;
    height: 100%;
    width: 20%;
}

.sybrin-identity-country-select .sybrin-identity-card-image img {
    max-width: 45px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(50, 50, 55, 0.4);
}

.sybrin-identity-country-select .sybrin-identity-card-text {
    float: right;
    text-align: left;
    width: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-identity-country-select .sybrin-identity-card-text p {
    margin: 5px;
}

.sybrin-identity-country-select .sybrin-identity-card .sybrin-identity-card-title {
    font-weight: bold;
}

.sybrin-identity-result {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e4e5e8;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    width: calc(100% - 4px);
    max-width: 400px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    background-color: white;
}

.sybrin-identity-result .sybrin-result-field {
    padding: 2px 0;
    margin-bottom: 5px;
    font-size: 14px;
}

.sybrin-identity-result .sybrin-result-field label {
    display: block;
    text-align: left;
    margin-bottom: 2px;
    margin-left: 2px;
}

.sybrin-identity-result .sybrin-result-field input {
    width: 100%;
    padding: 8px 12px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid rgba(50, 50, 55, 0.2);
    border-radius: 4px;
    box-sizing: border-box;
}

.sybrin-identity-result-buttons button {
    border: none;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    background: #3498db;
    padding: 10px 27px;
    text-decoration: none;
    cursor: pointer;
    width: 34%;
}

.sybrin-identity-result-buttons .sybrin-identity-result-retry {
    color: #3498db;
    background: #ffffff;
    border: 1px solid;
}

.sybrin-identity-result-buttons button:hover {
    background: #3cb0fd;
    text-decoration: none;
}

.sybrin-identity-result-buttons .sybrin-identity-result-retry:hover {
    background: #3cb0fd;
    color: #ffffff;
    text-decoration: none;
}

.sybrin-identity-result-tab {
    overflow: hidden;
    text-align: center;
    margin: 0 15px;
}

.sybrin-identity-result-tab-button {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    border-left: 1px solid #0078c8;
    border-top: 1px solid #0078c8;
    border-bottom: 1px solid #0078c8;
}

.sybrin-identity-result-tab .sybrin-identity-result-tab-button:first-child {
    border-top-left-radius: 6px;
}

.sybrin-identity-result-tab .sybrin-identity-result-tab-button:last-child {
    border-top-right-radius: 6px;
    border-right: 1px solid #0078c8;
}

.sybrin-identity-result-tab-button:hover {
    background-color: #3cb0fd;
    color: #ffffff;
}

.sybrin-identity-result-tab-button-active {
    background-color: #0078c8;
    color: #ffffff;
}

.sybrin-identity-tab-item {
    display: none;
    padding: 5px 15px;
    border: 1px solid #e4e5e8;
    max-height: 310px;
    overflow: auto;
}

.sybrin-identity-tab-item {
    animation: fadeEffect 0.25s;
}

.sybrin-identity-tab-item-active {
    display: block;
}

.sybrin-identity-result-tab-content {
    margin: 0 15px;
}

.sybrin-identity-result-tab-content img {
    max-width: 100%;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sybrin-identity-result-image {
    color: #a8262b;
    height: 100px;
}

.sybrin-identity-result-image svg {
    height: 100%;
    width: 100%;
}

.sybrin-identity-wizard {
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin: auto;
}

.sybrin-identity-wizard-navigation {
    width: 100%;
    position: relative;
}

.sybrin-identity-wizard-back {
    color: #0078c8;
    position: absolute;
    border: none;
    left: 0;
    background: none;
    font-size: 24px;
    padding: 31px 20px 20px 30px;
    cursor: pointer;
    font-weight: bold;
}

.sybrin-identity-loader-wrapper {
    background-color: white;
    z-index: 6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sybrin-identity-loader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    top: 50%;
    transform: translateY(-50%);
}
.sybrin-identity-loader div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #0078c8;
    border-radius: 50%;
    animation: sybrin-identity-loader 1.2s linear infinite;
}
.sybrin-identity-loader div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
}
.sybrin-identity-loader div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22px;
    left: 62px;
}
.sybrin-identity-loader div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11px;
    left: 52px;
}
.sybrin-identity-loader div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7px;
    left: 37px;
}
.sybrin-identity-loader div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11px;
    left: 22px;
}
.sybrin-identity-loader div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22px;
    left: 11px;
}
.sybrin-identity-loader div:nth-child(7) {
    animation-delay: -0.6s;
    top: 37px;
    left: 7px;
}
.sybrin-identity-loader div:nth-child(8) {
    animation-delay: -0.7s;
    top: 52px;
    left: 11px;
}
.sybrin-identity-loader div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62px;
    left: 22px;
}
.sybrin-identity-loader div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66px;
    left: 37px;
}
.sybrin-identity-loader div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
}
.sybrin-identity-loader div:nth-child(12) {
    animation-delay: -1.1s;
    top: 52px;
    left: 62px;
}
@keyframes sybrin-identity-loader {
    0%,
    20%,
    80%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.sybrin-identity-prompt-container {
    z-index: 6; 
    position: absolute;
    left: 0;
    right: 0;
}

.sybrin-identity-prompt-container-top {
    top: 0;
    padding-top: 5px;
}

.sybrin-identity-prompt-container-bottom {
    bottom: 0px;
    padding-bottom: 5px;
}

.sybrin-identity-prompt {
    margin: auto;
    color: white;
}

.sybrin-identity-fullscreen-video-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    top: 0;
    left: 0;
    background-color: black;
}

.sybrin-identity-video {
    width: 100%;
    height: 100%;
    z-index: 4;
}

.sybrin-identity-video-mirrored {
    width: 100%;
    height: 100%;
    z-index: 4;
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}

Last updated 2 years ago