100 Days of Code: Paper Auth

Overview

I gave up life as a full time coder about 9 years ago to pursue IT leadership positions. For context, at the time I made the switch my life revolved around IBM's 4690OS and SCO. Recently, I have been managing a couple large integrations, one traditional EDI and another bridging a partner's API to ours. Working through these projects was a blunt reminder of just how much rust had formed over the last decade.

So, last fall I decided to try the 100 Days of Code challenge to get back in practice and pick up a few new skills. At the time I was thinking about the concept of Authentication by Newspaper - holding up a recent newspaper in prove the authenticity of a photo. Newspaper authentication can prove you took a photo after the newspaper was printed, but it cannot prove a specific date or time. And Photoshop. That's a problem too. Not to mention actually finding a newspaper.

I was musing about how best to prove the exact date/time of a photo and decided to turn that into my project.

Goals

My overarching goal was to make a functioning web application that serves as a digital version of newspaper authentication but can also authenticate a specific date/time and has protection against faking.

My specific coding goals were to:

• Gain some experience with the Heroku platform - deploying and managing apps, dynos, add-ons and all that fun stuff.
• Be better at using Git - it was Visual SourceSafe back in my day...
• Get hand-on with writing code to interact with web APIs.
• Embrace PDO for database interactions - apparently folks stopped using the mysql_ extension years and years ago.
• Write better, more concise CSS.

The Plan

My plan was to create a web interface that allows users to enter their own headline. The headline is combined with other pieces of random data retrieved from APIs and assembled into a unique "newspaper" page.

The data is logged to a database and a QR code is generated containing a URL with a token to retrieve the entry data.

Scanning the QR code loads a webpage that shows the original date/time the newspaper page was generated and all of the data components that should be present. Authenticity is confirmed by comparing the timestamp and data elements on the confirmation page with the timestamp and data elements in the original image.

To use the app, a user enters their headline on a device (typically a phone) and hold up the rendered newspaper page while taking a photograph. Someone viewing the photo can scan the QR code to validate the image authenticity. 

What I Built

https://paperauth.herokuapp.com

Web app front end

A simple front end to collect the user's headline.

"Newspaper" page

The rendered newspaper page includes:

• User headline.
• Timestamp.
• User location.
• Random article from NewsAPI.org.
• Random image from Unsplash.
• QR code from goQR.me.

Successful validation

Scanning a valid QR code will result in a Valid Entry response. The response contains all the original information, which can be compared to the photo containing the newspaper page to confirm validation.

Failed validation

Scanning an invalid QR code will result in an Invalid Entry response.

What I Learned

• I really enjoy working with the Windows Subsystem for Linux (WSL). I hosted my web app locally in a Ubuntu LAPP stack running on WSL and deployed it to Heroku with Git.
• I also really enjoy working with Heroku. Their free tier PHP dyno and Postgres add-on were all I needed to get my project live on the interwebs.
• Git is easy...what was I worried about?
• PDO is also easy once you unlearn the old MySQL way of doing things. Luckily I had forgotten almost all of it anyway. Side note - it's amazing how many irrelevant, decade-old tutorials are still sitting at the top of the Google search results.
• I learned a lot more about APIs and how invaluable Postman is for testing.
• I learned I am still terribly inefficient with CSS. My style sheet is currently 474 lines, but I have a sneaking suspicion it could be under 100 if was better at grouping my HTML tags.

Wrap-up

I had a great time with the 100 Days of Code challenge. I got to shake off some of the rust and learned several new skills. Unfortunately, I ended up wrapping my project around day 30, which happened to fall right before my family's Disneyland vacation.

Rather than pick up where I left off, when we returned I started up my second challenge, a Beer Quiz. I am currently in the middle of my second challenge, which includes learning MongoDB and D3.js.

Cheers!