Build A Webpage to Extract Aadhaar Card Information

Feb 06, 2020
Build A Webpage to Extract Aadhaar Card Information

What is Aadhaar card

Aadhaar is a 12-digit unique identity number that can be obtained voluntarily by residents or passport holders of India, based on their biometric and demographic data. The data is collected by the Unique Identification Authority of India (UIDAI), a statutory authority established in January 2009 by the government of India. Aadhaar is the world’s largest biometric ID system.

The Aadhaar card consists of key information on the person such as the name, gender, and date of birth in plain text as well as a QR code. UIDAI has introduced a new Secure QR Code which contains demographic details of a resident like name, address, date of birth, gender and masked Aadhaar number as well as a photograph of the Aadhaar number holder.

The QR code, which contains very critical information regarding the cardholder, is used by the government, banks and other service agencies. With the vast adoption of Aadhaar ID, it covers 90% of the population in India, which is approximately 1.2 billion. The speed and accuracy of the QR code decoder are paramount.

This article is Part 1 in a 2-Part Series.

How to build an Aadhaar card reader

There are two ways to build an application that automatically extracts the biological and geological information about the cardholder: 

  • Using OCR technology to recognize the characters printed on the card
  • Use barcode recognition technology to decode the QR Code and then parse it into human-readable formats

Generally speaking, the latter is more accurate and cost-effective than the former. The encoded QRcode also provides more information than the human-readable characters printed on the card. Below we will take a look at two applications using barcode technology.

web addhaar card application

A Simple Web App for Decoding Aadhaar Card’s QR Code

Step 1. Download Dynamsoft JavaScript Barcode SDK

Get Dynamsoft JavaScript Barcode SDK via NPM command:

 npm i dynamsoft-javascript-barcode

Or include the CDN URL directly into your HTML page:

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script> 

Step 2. Get a Trial License

To make the SDK work, you also need to get a valid trial license.

Step 3. Load Image in HTML and Decode QR Codes

Create an index.html file:

<!DOCTYPE html>
<html>

<body>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"><script>
    <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif">
    <p id="results"></p>

    <script>
        Dynamsoft.DBR.BarcodeReader.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==";
        document.getElementById('uploadImage').addEventListener('change', async function () {
            $("#results").empty();
            var files = this.files;
            let reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
            let results = await reader.decode(files\[0\]);
            if (results.length == 0) {
                $("#results").append('No barcode detected!');
                return;
            }
            for (let result of results) {
                console.log(result.barcodeText);
            }
        });
    </script>

</body>

</html>

The code above demonstrates how to use an HTML button to load an image of the Aadhaar card and decode the relevant QR code. Here is a sample result:

<?xml version="1.0" encoding = "utf-8"?><PrintLetterBarcodeData uid="396244635778" name="Ranajit Mondal" gender="MALE" yob="1993" co="S/O: Ajoy Mondal" lm="" loc="" vtc="Dhobaghata Baman Chak" po="Satkhanda Sahebnagar" dist="Purba Medinipur" state="West Bengal" pc="721431" dob="25-12-1993"/>

Step 4. Extract Information from the XML

The next step is to extract the information from the XML-formatted result.

An easy way is to use the jQuery parseXML() function, which parses a string into an XML document. According to the sample result above, I need to find a node first and then output its attribute values. By referencing StackOverflow, my code is written as follows:

for (let result of results) {
                console.log(result.barcodeText);
                try {
                    xmlDoc = $.parseXML(result.barcodeText),

                        $(xmlDoc).each(function (i, obj) {
                            console.log(i);
                            console.log(obj.documentElement.nodeName);

                            $data = $(xmlDoc).find(obj.documentElement.nodeName);
                            $data.each(function () {

                                $.each(this.attributes, function (i, attrib) {
                                    var name = attrib.name;
                                    var value = attrib.value;

                                    console.log(name);
                                    console.log(value);

                                    info = '<div>' + name + ': ' + value + '</div>';
                                    $("#results").append(info);
                                });
                            });
                        });
                } catch (error) {
                    $("#results").append(error.message);
                }
            }

Don’t forget to use try…catch… in case the XML format of the QR result is invalid.  

Try the web app to scan an Aadhaar card.

Source Code

https://gist.github.com/yushulx/a5f07891d5b22cfd24f21a111c80a008

Take the Next Step

To see how Dynamsoft Barcode Reader performs with your specific barcode scenarios, please check out our online demo.

Start your Free 30-Day Trial