Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Read Emirates ID in a web application, using JavaScript, chrome extension and desktop application
Introduction
As of writing this document, the only applicable way to read emirates ID is to have a desktop application. The official SDK provided
by Emirates ID authority included some Java applet examples which will not work anymore on recent browsers. But everyone is
going now to web applications instead of desktop applications, so how can we design a workaround to achieve this?
Background
For security reasons, Java applet is obsolete in recent browsers, and this does not end here. In Chrome, you cannot run a client
EXE from your web application. You cannot access the clipboard... Ok! you cannot directly, but you can using extensions.
https://www.codeproject.com/Articles/1265249/Read-Emirates-ID-in-a-Web-Application?display=Print 1/7
06/12/2018 Read Emirates ID in a Web Application - CodeProject
1. reads Emirates ID
2. serializes it into JSON format
3. pushes it to clipboard
4. then closes
I will not go through the creation of the EXE application, as you can find the source code on github. Also, this article is not to explain
how we read the Emirates ID from a desktop application. However, this application must use the official SDK from the Emirates ID
Authority.
Code sample:
[STAThread]
static void Main(string[] args)
{
var model = Controller.CreateFromEIDReader();
if (model.HasData)
{
Clipboard.SetText(Newtonsoft.Json.JsonConvert.SerializeObject(model));
}
else
Clipboard.SetText("NO DATA");
}
Quote:
%~dp0 is the current folder from where you run the command.
Quote:
Hey chrome... you can run the application ae.eid.chrome, and to know how please check the file
ae.eid.chrome.json
{
"name": "ae.eid.chrome",
"description": "chrome extension to read EID",
"path": "EIDSampleConsole.exe",
"type": "stdio",
"allowed_origins": [
"chrome-extension://elgjklijpoecdfbjejecncdpggdphnle/"
]
}
The background process is isolated from the web pages opened in Chrome. This means it cannot contact the Chrome tabs
directly. It has to go through the content_script. content_script can contact both the background process
and the pages opened in Chrome. Being isolated, the background process can call an EXE, and read the Clipboard data.
Both functions are not allowed directly in Chrome.
Quote:
In my case, the background file is eid.js, the content_script is content_script.js, and since I use jquery, I
also add the jquery
manifest.json
Any Chrome extension will have a manifest.json file. It lists the behavior and the permissions of the extension. The most important
permissions required are nativeMessaging and clipboardRead. It's here also where we specify the content_script
files and the background file. You can notice the listing of jquery because I'm using some jquery in the content_script file, and
not only JavaScript.
https://www.codeproject.com/Articles/1265249/Read-Emirates-ID-in-a-Web-Application?display=Print 3/7
06/12/2018 Read Emirates ID in a Web Application - CodeProject
{
"name": "EID Reader",
"version": "1.0",
"manifest_version": 2,
"description": "Read Emirates ID",
content_script.js
This file is playing a role of translator. It can listen to whatever happens in your web pages, and transfer these actions to the
background process by sending messages. It can also receive messages from background process and transfer it again to the web
pages. Keep in mind that your web pages cannot access the background process directly, and it has to be through
content_script.
Technically, content_script will contain two listeners: one to receive messages from web pages, and another one to receive
messages from background process.
eid.js
https://www.codeproject.com/Articles/1265249/Read-Emirates-ID-in-a-Web-Application?display=Print 4/7
06/12/2018 Read Emirates ID in a Web Application - CodeProject
This is where we do the main processes. Here, we will call the EXE application, and here is where we read the clipboard. Here is
also where we send the data back to content_script, which will parse it and push it to web pages.
Technically, this will have a listener to receive messages from content_script. Once received, it calls the EXE application
asynchronously, and will wait until the EXE finish his task (Read Emirates ID, and put it in clipboard). Once finished, an event will be
fired, to read the clipboard and send it to content_script to parse it and push it to the web page.
function SendResponse() {
//create a textarea, focus on it,
//and make a "paste" command to get the clipboard,
//then send the pasted value back to the content_script
bg = chrome.extension.getBackgroundPage();
bg.document.body.innerHTML = ""; // clear the background page
var helper = null;
if (helper == null) {
helper = bg.document.createElement("textarea");
helper.style.position = "absolute";
helper.style.border = "none";
document.body.appendChild(helper);
}
Quote:
Remember to copy the extension id and put it in the file ae.eid.chrome.json to authorize this extension to
execute the exe application.
<body>
<div class="form-group">
https://www.codeproject.com/Articles/1265249/Read-Emirates-ID-in-a-Web-Application?display=Print 5/7
06/12/2018 Read Emirates ID in a Web Application - CodeProject
<a class="btn btn-primary" href="javascript:readeid();">Read EID</a>
</div>
<div class="form-group">
<label for="txtNumber">Number</label>
<input type="text" class="form-control" id="txtNumber" placeholder="Number">
</div>
<div class="form-group">
<label for="txtName">Name</label>
<input type="text" class="form-control" id="txtName" placeholder="Name">
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input type="email" class="form-control" id="txtEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="txtPassport">Passport</label>
<input type="text" class="form-control" id="txtPassport" placeholder="Passport">
</div>
<script>
var readeid = function () {
var event = document.createEvent('Event');
event.initEvent('EID_EVENT');
document.dispatchEvent(event);
}
</script>
</body>
Summary
Remember, this is a workaround, not a native solution. Native solution must come from the SDK developers.
License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile Article Copyright 2018 by Omar Mallat
Web01 | 2.8.181205.1 | Last Updated 1 Nov 2018 Everything else Copyright © CodeProject, 1999-2018
https://www.codeproject.com/Articles/1265249/Read-Emirates-ID-in-a-Web-Application?display=Print 6/7
06/12/2018 Read Emirates ID in a Web Application - CodeProject
https://www.codeproject.com/Articles/1265249/Read-Emirates-ID-in-a-Web-Application?display=Print 7/7