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<\/a>.<\/p>\n I came across an interesting way to authenticate users from WeChat Web. Their login process is as follows:<\/p>\n The WeChat website looks like this. A unique QR code is generated each time the website is refreshed.<\/p>\n 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<\/a>)[1.\u00a0This library recognizes different barcode formats, so instead of using a QR code, I could potentially do authentication using any of these:\u00a0UPC_A, UPC_E,\u00a0EAN_13,\u00a0EAN_8,\u00a0RSS_14,\u00a0CODE_39,\u00a0CODE_93,\u00a0CODE_128,\u00a0ITF,\u00a0CODABAR,\u00a0QR_CODE,\u00a0DATA_MATRIX,\u00a0PDF_417].I\u00a0could 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\u00a0of the QR code content.<\/p>\n Metadata type describes\u00a0the amount of\u00a0error correction embedded into the QR code. The 4 levels are:<\/p>\n Approximately every 5 minutes a new weblink is generated. I tried generating these QR codes on this website<\/a> to see if they’d look the same visually, but with no luck.<\/p>\n Although these two images encode the same content, visually it looks different. I have no idea why.<\/p>\n 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.<\/p>\n I did some googling and didn’t find how the handshaking works. There is an article<\/a>\u00a0on an app called SQRL (Secure QR Login), which describes it as:<\/p>\n 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.<\/p><\/blockquote>\n Keeping in mind how this works, I came up with the following authentication process.<\/p>\n 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\u00a0process, in two parts: An android application that reads a QR code and logs in Building a website that hosts this. The tutorial is written in a sequential fashion, because … Continue reading QR Authentication Tutorial<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-547","post","type-post","status-publish","format-standard","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/posts\/547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/comments?post=547"}],"version-history":[{"count":5,"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/posts\/547\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/posts\/547\/revisions\/555"}],"wp:attachment":[{"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunapi386.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Motivation<\/h1>\n
\n
![\"WeChat](\"https:\/\/sunapi386.ca\/wordpress\/wp-content\/uploads\/2015\/08\/wechatweb-266x300.png\")
<\/a><\/p>\nAndroid QR scanner<\/h1>\n
https:\/\/login.weixin.qq.com\/l\/oaW3V0XQpA==\r\nhttps:\/\/login.weixin.qq.com\/l\/lZ-ez97Vdg==\r\nhttps:\/\/login.weixin.qq.com\/l\/4YhG7Q3bBQ==<\/pre>\n
\n
\n
![\"QR](\"https:\/\/sunapi386.ca\/wordpress\/wp-content\/uploads\/2015\/08\/scan2-copy-300x180.jpg\")
<\/a>![\"QR](\"https:\/\/sunapi386.ca\/wordpress\/wp-content\/uploads\/2015\/08\/scan1-copy-300x180.jpg\")
<\/a>Website<\/strong><\/h1>\n
Handshaking Process<\/h1>\n
\n