Usage

After installing, and importing if required, you can use the web-component by following these steps:

Steps

1. Insert the following markup in your page / component

For Selfie Capture / Liveness Images only

<smart-camera-web>
</smart-camera-web>

For Selfie Capture / Liveness Images, and ID images

<smart-camera-web capture-id>
</smart-camera-web>

For Selfie Capture / Liveness Images, and ID images (front and back)

<smart-camera-web capture-id="back">
</smart-camera-web>

To Select the Document Capture Mode for ID images add the document-capture-modes attribute with one of camera, upload, or a comma separated combination like camera,upload.

<smart-camera-web capture-id="back" document-capture-modes="camera,upload">
</smart-camera-web>

2. The following image should show up on your web page, if installation, and import, was successful.

3. After granting access by clicking the button, you start by capturing a selfie and liveness images. You should see the capture screen below

  • Click on Take a Selfie and follow the prompts on the screen to take both the Selfie and Liveness images.

  • At the end of the selfie capture process, you should see the Selfie review screen.

If the Selfie you took is satisfactory, select "Yes, use this one" or select "Re-take selfie" the selfie again running through steps 3 to 5.

4. If you intend to also capture the ID card image and added the capture-id attribute, additional screens related to ID card capture are displayed in addition to the Selfie related screens

  • Capture your ID card photo

  • After taking the ID card photo, you should see the review screen

5. Handle the imagesComputed event in your page / component

On clicking the "Yes, use this one" button for the selfie / liveness images flow, or the "Approve" icon on the capture-id flow, an imagesComputed event will be published.

imagesComputed is a CustomEvent returning data — in e.detail — of the shape:

{
  partner_params: {
    libraryVersion: String,
    permissionGranted: Boolean, // expected to be `true`
  },
  images: [
    {
      file: '',
      image_type_id: Number, // as recommended here: https://docs.usesmileid.com/products/core-libraries#images-required
      image: String // base64 encoded string of image
    }
  ]
}

Here is a sample:

{
  partner_params: {
    libraryVersion: "1.0.0-beta.3",
    permissionGranted: true
  },
  images: [
    {
      image_type_id: 2,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."  // truncated base64 encoded string of image
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 3,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
  ]
}

We advise that the partner_params published be merged with other partner_params sent with your request. You can read more about image_type_id here.

Here, we handle the imagesComputed event by sending the data to an endpoint.

<script>
  const app = document.querySelector('smart-camera-web');

  const postContent = async (data) => {
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    };

    try {
      const response = await fetch('/', options)
      const json = await response.json();

      return json;
    } catch (e) {
      throw e;
    }
  };

  app.addEventListener('imagesComputed', async (e) => {

    try {
      const response = await postContent(e.detail);

      console.log(response);
    } catch (e) {
      console.error(e);
    }
  });
</script>

The sample endpoint is built using our NodeJS Server to Server library and ExpressJS. This is the code below:

const express = require('express');
const { v4: UUID } = require('uuid');

if (process.env.NODE_ENV === 'development') {
  const dotenv = require('dotenv');

  dotenv.config();
}

const SIDCore = require('smile-identity-core');
const SIDSignature = SIDCore.Signature;
const SIDWebAPI = SIDCore.WebApi;

const app = express();

app.use(express.json({ limit: '500kb' }));
app.use(express.static('public'));

app.post('/', async (req, res, next) => {
  try {
    const { PARTNER_ID, API_KEY, SID_SERVER } = process.env;
    const connection = new SIDWebAPI(
      PARTNER_ID,
      '/callback',
      API_KEY,
      SID_SERVER
    );

    const partner_params_from_server = {
      user_id: `user-${UUID()}`,
      job_id: `job-${UUID()}`,
      job_type: 4 // job_type is the simplest job we have which enrolls a user using their selfie
    };

    const { images, partner_params: { libraryVersion } } = req.body;

    const options = {
      return_job_status: true
    };
    
    const partner_params = Object.assign({}, partner_params_from_server, { libraryVersion });
    
    
    const result = await connection.submit_job(
      partner_params,
      images,
      {},
      options
    );

    res.json(result);
  } catch (e) {
    console.error(e);
  }
});

// NOTE: This can be used to process responses. don't forget to add it as a callback option in the `connection` config on L22
// https://docs.usesmileid.com/further-reading/faqs/how-do-i-setup-a-callback
app.post('/callback', (req, res, next) => {
});

app.listen(process.env.PORT || 4000);

You can also build this using any of the other Server to Server libraries.

PreviousInstallationNextNotes

Last updated