Usage

Use the new javascript sdk. Migration guide found here 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.

Camera Access Permission

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

Capture Selfie Screen

• 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.

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

ID Card Capture Screen

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

ID Card 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.