NFCタグに実際にタッチしないと表示されない Webサイトを作る

以前に書いた NTAG424 DNA の記事が意外に好評でよくアクセスいただいているのですが、結局さー、何に使うん？　みたいな内容が無かったのでこちらに記載したいと思います。

NFCタグの使い方として一番多いのは、URLを書き込んでおいてスマホでタッチするとブラウザが起動してそのURLにアクセスできる所謂スマートポスター的な使い方だと思います。

ただそれだけですと QR と変わらないのですが、NTAG424 の機能を使うと実際にタグにタッチした時しかアクセスできない Webサイトを作ることができます。（ちなみに同様な機能を持つタグは他にもあります）

NTAG424 は NTAG213 などでも実装されている、UIDミラーとカウンターという機能があります。これはタグに書き込んだURLのパラメータ部分に、自身の UID と タッチされた回数 を自動で埋め込んでくれるというすばらしい機能です。

例）
書き込まれたURL
https://www.hayato.info/tag?uid=00000000000000&ctr=000000
スマホで読み取ったときのURL
https://www.hayato.info/tag?uid=04C767F2066180&ctr=000010

NTAG424 では、さらにこのパラメータ部分を AES暗号化してくれます。

スマホで読み取ったときのURL
https://www.hayato.info/tag?id=sja0tVH8IK3Y2NnpJlPDhq0HDKQcwxMucecXCvFYYb4=

こんな感じ

カウンタも含めて暗号化するというのがミソで、そのおかげでタッチする度に毎回異なるコードが生成されます。

ここからはサーバ側の処理になります。送られてきたパラメータ部分を復号し、UIDとカウンタの値を取得します。サーバ側ではアクセスしてきたUIDとカウンタをセットで記録するようにしておきます。

で、記録してあるカウンタと今送られて来たカウンタの値を比較して、記録してある値と同じか低い値であれば、今タグにタッチしてアクセスしてきたのではなく、過去にタッチされたときのURLでアクセスしてきたことがわかります。

上記を実際にAWSで実装した場合が以下になります。AWSで実装したらこうなるという話で、AWSじゃないと実現できないということではありません。

S3:　ここに最終的に表示させたいコンテンツを格納します。CloudFrontのOACを利用して、CloudFront経由でのみアクセスできるように設定しておきます。

CloudFront:　スマホからのアクセスはここで受けるようにします。Lambda@Edgeを使って、アクセス時にLambda関数を走らせます。

Lambda:　上記の復号とチェックを行います。古いURLとわかれば、それ用のHTMLを返すようにします。

DynamoDB:　UIDとカウンタの値を保存します。

これでタッチしないと表示されないWebサイトの完成です。もちろんタッチしてURLにアクセスせず、そのURLを他の場所に送ってそちらでアクセスするという抜け道もありますが、その場合でも実際にタッチしていることに変わりはありません。