#daiizメモ

Cosenseに夢中

トップ > 作品 > 傾き認証

傾き認証

作品 tech

Device Orientation Event

ブラウザ（主にスマホのブラウザを想定）の Device Orientation Event の内容を読むと，端末の傾き情報などを取得できる．例えば DeviceOrientationEvent.beta の値は，スマホを縦長に持ったときの，手前 or 奥方向への倒れ角を表している．端末を水平な机上に置いた状態だと 0 ，垂直に持った状態だと90や-90のような角度値（傾き）となる．

概要

今回は，この「傾き」の値をパスワードの代わりに使ってメッセージをゆるく保護するデモ（デモページのURLは記事末尾に記載）を作った． 投稿者は以下のような投稿画面で，メッセージ本文に加えて端末の傾きをサーバに送信する．端末の傾きはボタンを3回タップして設定する．角度値が安定していれば登録に成功する．

f:id:daiiz:20161212014019p:plain
f:id:daiiz:20161212014028p:plain


サーバではメッセージに固有のURLを割り当てて，本文と傾き値を保管する．発行されたURLをSNSなどでシェアすることで「URLを知っている人全員」がメッセージにアクセスできるようになる．

f:id:daiiz:20161212014044p:plain

URLのページにアクセスすると，以下のような「傾き認証」の画面が表示される．端末角度を安定させて「傾きを送信」ボタンを押して認証リクエストを送信する．このときに投稿時に設定された傾きと誤差1度未満で一致した場合のみ認証が通る．これで「URLと端末の傾きを知っている人全員」がメッセージを読めるようになった．

f:id:daiiz:20161212014321p:plain
f:id:daiiz:20161212014335p:plain
f:id:daiiz:20161212014343p:plain

端末を一周ぶん回せばいつかは当たると思うけれど，なんとなくメッセージを保護できる．

  • 一度開封（認証成功）したら，二度と開封できないようなオプション「URLと端末の傾きを知っていて，かつ，はじめてアクセスした人」
  • 保存した場所（地理的な意味での場所）の付近でないと開かないオプション

などを実装したらより強固になるかもしれない．今後検討したい．

投稿者，受信者（メッセージ読者）ともに，端末の傾きを手で調整するのは難しいと思うので，以下のようなスマホ置き台に置いて使うと快適になる．家族やカップルでお揃いの台を買ってやりとりしても良いかもしれない．

f:id:daiiz:20161212014542j:plain


Anker® タブレット用スタンド 角度調整可能 iPad・iPad mini・Nexus 7等に最適

Anker® タブレット用スタンド 角度調整可能 iPad・iPad mini・Nexus 7等に最適

MyArmor カメラホルダー カメラマウント カメラスタンド バイクホルダー スマホホルダー スマホマウント スマホスタンド 自由雲台 三脚 はさみ込式（カメラマウント+スマホクランプ）

MyArmor カメラホルダー カメラマウント カメラスタンド バイクホルダー スマホホルダー スマホマウント スマホスタンド 自由雲台 三脚 はさみ込式（カメラマウント+スマホクランプ）

Arjan スマホ タブレット スタンド フレーム アーム iPad air mini iPhone 360度回転 ホルダー ホワイト 65ｃｍ

Arjan スマホ タブレット スタンド フレーム アーム iPad air mini iPhone 360度回転 ホルダー ホワイト 65ｃｍ

デモ

根気よく傾け続ければいつかは解錠されることに気をつけて，どうぞ遊んでみてください！

Android Chrome v54 で動作を確認していますが，それ以外の端末（ブラウザ）ではまだ動作確認をしていません．Device Orientation Event のブラウザ実装状況 を見る限りでは， Android 3.0+，Firefox Mobile 6+，Safari Mobile 4.2+ のモバイルブラウザでは対応しているようです．