How to Decode QR Code Information from Aadhaar Card

In India, the Aadhaar card is used to store people’s biometric and demographic data. This article shares how to create a simple web app to decode the QR code printed on the Aadhaar card using Dynamsoft JavaScript SDK, as well as how to extract the information from the barcode results.

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

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@7.2.2-v2/dist/dbr.js" data-productKeys="LICENSE-KEY"></script> 

To make the SDK work, you also need to get a valid trial license, and then update the data-productKeys attribute.

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@7.2.3-v2/dist/dbr.js"
        data-productKeys="LICENSE-KEYscript>
    <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif">
    <p id="results"></p>

    <script>
        document.getElementById('uploadImage').addEventListener('change', async function () {
            $("#results").empty();
            var files = this.files;
            let reader = await Dynamsoft.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>

Use Web Server for Chrome to host the HTML file. 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 that I got from Google:

<?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"/>

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.

Aadhaar card QR code

Source Code

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