“Develop a passion for learning. If you do, you will never cease to grow.” — Anthony J. D’Angelo
As a ServiceNow Architect, I’m no stranger to charting new technological territories. This time, I packed my bags, grabbed my virtual passport, and embarked on an exciting adventure to bring facial recognition into ServiceNow’s login process. By harnessing the power of OpenCV’s Search API, we’re setting the stage for a login experience.
So buckle up, tech enthusiasts! We’re about to dive into the nitty-gritty.
Let’s delve a bit into the technical aspects now,
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:
// This function captures an image from the webcam and sends it to the server.
// The server then uses the image data to log the user in.
c.captureImage = function() {
// Draw the webcam image onto the canvas.
// The image is drawn at position (0,0) and with dimensions 640x480.
c.context.drawImage(c.video, 0, 0, 640, 480);
// Get the image data from the canvas.
// The toDataURL method is used to convert the canvas image into a base64 encoded png format.
c.imageData = c.canvas.toDataURL('image/png');
// Send the image data to the server.
// The image data is sent as an object with a property named 'imageData'.
c.server.get({ imageData: c.imageData }).then(function(response) {
// Log the user in with the email address from the server response.
// The server is expected to return an object with a property 'data',
// which in turn should have a property 'email'.
// This email is then used to log the user in.
loginWithFace(response.data.email);
});
};
Server-side script:
try {
// Extract the 'imageData' property from the 'input' object.
var str = input.imageData;
// Get the Base64 encoded image data by removing the prefix up to the comma.
// This assumes that the image data is prefixed with data specifying the format, like 'data:image/png;base64,'.
var base64Data = str.substring(str.indexOf(',') + 1);
// Prepare the inputs for the 'opencv_facerecognition_workflow' subflow.
// This includes the base64 encoded image data.
var inputs = {};
inputs['imagedata64encoded'] = base64Data; // String
// Execute the subflow 'opencv_facerecognition_workflow' synchronously, i.e. wait until it finishes before proceeding.
// The inputs prepared above are provided to the subflow.
var result = sn_fd.FlowAPI.getRunner().subflow('global.opencv_facerecognition_workflow').inForeground().withInputs(inputs).run();
// Retrieve the outputs from the execution of the subflow.
// This can only be done when executing synchronously.
var outputs = result.getOutputs();
// Get the 'email' and 'prediction_score' from the subflow's outputs.
email = outputs['email']; // String
prediction_score = outputs['prediction_score']; // String
} catch (ex) {
// Catch any exceptions that occur during the execution of the above code.
// Log the error message to the system log.
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!!!
But is this the end? Not even close!
I’m still navigating the labyrinth of OpenCV APIs and ServiceNow’s GlideQuery API, all in a bid to speed up this integration and prevent data from being stored on the OpenCV server. So, stay tuned, fellow explorers, the adventure continues!
Links:
LinkedIn: Vivek Verma | LinkedIn
OpenCV API : OpenCV Face Recognition — Swagger UI
ServiceNow Developer: ServiceNow Developers
2 Comments
