First off, visualize cloning the ServiceNow OOB Login Widget. Picture it? Good. Now, let’s add a dash of the Webcam component to the Widget. The fun begins when we start splashing around with some fancy HTML and CSS.

With a click of a button, we call our Client-side script into action. This then captures the image data and sends it to Flow to call OpenCV’s Search API. In response, ServiceNow receives a prediction score and other user-related info.

Once we’ve received the response, our Widget Client-side Script springs into action, executing the function loginWithFace(). It’s like our OOB login function’s twin but with an extra trick up its sleeve: it establishes a session based on the user’s email.

(Client and Server-side script code snippet here)

client-side script:

c.captureImage = function() {

c.context.drawImage(c.video, 0, 0, 640, 480);

c.imageData = c.canvas.toDataURL('image/png');

c.server.get({ imageData: c.imageData }).then(function(response) {

loginWithFace(response.data.email);

});

};

Server-side script:

try {

var str = input.imageData;

var base64Data = str.substring(str.indexOf(',') + 1);

var inputs = {};

inputs['imagedata64encoded'] = base64Data;

var result = sn_fd.FlowAPI.getRunner().subflow('global.opencv_facerecognition_workflow').inForeground().withInputs(inputs).run();

var outputs = result.getOutputs();

email = outputs['email'];

prediction_score = outputs['prediction_score'];

} catch (ex) {

var message = ex.getMessage();

gs.error(message);

}

“But wait,” you may wonder, “what about the OOB Login script?” Don’t fret! We’ve overridden it to add a custom method for the User object, ditching the old-school username/password combo. And voilà! We’ve just upgraded our login system.

ta-da!!!