QRコード+スマートフォンでログインさせる機能を実装してみた

こんにちは、ritouです。

前にこんなエントリを書きました。
GoogleのQRコードログインのしくみを勝手に想像する - r-weblife

OpenID ConnectのDemo OPで使えるようにしてみました。
OpenID Connectの仕様とは全く関係ありません。

やりたいこと

セキュリティに微妙に興味を持っているユーザーがいます。

  1. パブリックなPCで見たいサービスがあるけどEmail/PWの入力はしたくない。
  2. PCのブラウザに表示されたQRコードをお手持ちのスマートフォン的な何かで読み込む
  3. スマートフォンではログイン済もしくは安心してログイン
  4. スマートフォン上にPINが表示される
  5. PCのブラウザにPINを入力

という感じです。
スマートフォン的な何かで最初から見れば(ry みたいなことは言わないでください。


使い方

Demo OP : https://openidconnect.info/
ログインが必要なProfile画面へのリンクをクリックします。

すると、ログイン画面が出てきます。
今回追加した「use Phone-Based Login」のリンクをクリックします。

QRコードが表示されます。
画面はそのままにして、これをスマートフォン的な何かで読み込んでください。

読み込んだ後、スマートフォン側でログインしていない場合はログインします。
リモートの端末にログインしますよ的な画面が出てきます。

PINコードが表示されます。

表示されたPINコードをPCのブラウザのフォームに入力します。

スマートフォンでログインしていたユーザーでログイン完了し、プロフィールの画面が表示されます。

こんなところでしょうか。

思ったこと

  • この手の話はQRコード以外にEmailでURL送信とかもありだろう
  • "試験的な実装"はそんなに難しくない
  • 厳密にセッション管理しておいてリモートログアウトもできたほうが良いね
  • 使わせるには若干のリテラシー教育?が必要でしょう

この手のやり方で気を付けること

難しかったこと

  • 英語の文言

ではまた。