QR Authentication Tutorial

Tutorial on how to setup a QR Authentication web server and android app. This documents me trying to replicate the WeChat web login process, in two parts:

1. An android application that reads a QR code and logs in
2. Building a website that hosts this.

The tutorial is written in a sequential fashion, because I’ll add to this tutorial as I go. All my code is on https://github.com/sunapi386/qrauth.

Motivation

I came across an interesting way to authenticate users from WeChat Web. Their login process is as follows:

1. The website has a QR image which the users scans with his WeChat app.
2. User clicks “Log In” in the WeChat app to authenticate.
3. User is now logged in.

The WeChat website looks like this. A unique QR code is generated each time the website is refreshed.

Android QR scanner

First thing I want to do is see what this QR code is. I use a library which reads QR codes (https://github.com/dm77/barcodescanner)[1. This library recognizes different barcode formats, so instead of using a QR code, I could potentially do authentication using any of these: UPC_A, UPC_E, EAN_13, EAN_8, RSS_14, CODE_39, CODE_93, CODE_128, ITF, CODABAR, QR_CODE, DATA_MATRIX, PDF_417].I could have taken a screenshot of the QR code and fed it to an online QR code reader, but I wanted to make an app that lets me authenticate in a similar fashion WeChat does. I made a simple android activity that used the library, based on the tutorial. Here are two examples of the QR code content.

https://login.weixin.qq.com/l/oaW3V0XQpA==
https://login.weixin.qq.com/l/lZ-ez97Vdg==
https://login.weixin.qq.com/l/4YhG7Q3bBQ==

• The format is QR_CODE.
• Type is a URI.
• Metadata type H.

Metadata type describes the amount of error correction embedded into the QR code. The 4 levels are:

1. L – Approximately 7% error correction
2. M – Approximately 15% error correction
3. Q – Approximately 25% error correction
4. H – Approximately 30% error correction

Approximately every 5 minutes a new weblink is generated. I tried generating these QR codes on this website to see if they’d look the same visually, but with no luck.

Although these two images encode the same content, visually it looks different. I have no idea why.

Website

The website generates a new QR code each time the page is refreshed. Our first goal is to setup a web server. I’ll go with Rails, reason being I like Ruby and Rails is a good framework. May extend it to something more fun later without doing a rewrite.

Handshaking Process

I did some googling and didn’t find how the handshaking works. There is an article on an app called SQRL (Secure QR Login), which describes it as:

On your phone, a SQRL app would contain a secret 256-bit blob of data. This would be your randomly generated secret code, which is never divulged to anybody else. The QR code itself would contain a URL, including the domain name of the site you’re trying to connect to. When you scan the code, your app would create a public and private key pair from your master key and the domain name of the site, using an HMAC hashing function. Then, the app would communicate with the site directly, sending the public key as your identity (the equivalent of a username), and the encrypted QR code as your authentication (the equivalent of a password). Since your master code, the secret blob of data, never changes, the resulting public key wouldn’t change either. That means the website would know it’s you. And by encrypting the QR code of the site with your private key, the site can verify that you indeed possess the matching private key, without actually having it, thanks to the beauty of public key cryptography.

Keeping in mind how this works, I came up with the following authentication process.

• Keep a secret in the phone app.
• The QR encodes a link causes

https://askubuntu.com/questions/917030/how-to-install-pydot-and-graphviz

 

Notice how nice some of the graphs are in textbooks (for example, from AIMA 3rd ed.)?

Well you could draw them too with graphviz (dot language).

Get dot here http://www.graphviz.org/Download..php

And generate the above graph by putting this in a file, e.g. simple_neural_network_diagram.dot

digraph G {
rankdir=LR
splines=line
node [fixedsize=true, label=""];
subgraph cluster_0 {
color=white;
node [style=solid,color=blue4, shape=circle];
x1 x2 x3;
label = "layer 1 (Input layer)";
}
subgraph cluster_1 {
color=white;
node [style=solid,color=red2, shape=circle];
a12 a22 a32;
label = "layer 2 (hidden layer)";
}
subgraph cluster_2 {
color=white;
node [style=solid,color=seagreen2, shape=circle];
O;
label="layer 3 (output layer)";
}
x1 -> a12;
x1 -> a22;
x1 -> a32;
x2 -> a12;
x2 -> a22;
x2 -> a32;
x3 -> a12;
x3 -> a22;
x3 -> a32;
a12 -> O
a22 -> O
a32 -> O
}


And generate it

dot -Tpng simple_neural_network_diagram.dot -o network.png