サイキックな認証

遅ればせながら、アドベントカレンダー15日目のやつです。

12/23のアイマスハッカソン2018にてアドベントカレンダーネタにしようとしたものをちょうど作れたのでそちらについて書きたいと思います。

GitHub - kahun-mask/psychic-authn: web authentication flow code is based on https://github.com/fido-alliance/webauthn-demo

サイキック認証の裏側

今回サイキックという言葉で隠したのですが、お気づきかもしれないですが技術としてはWebAuthenticationAPIを使いました。 WebAuthenticationAPIに関しては何番煎じなんだってくらい記事は溢れているのでここではあまり説明しませんがざっくりとこんな感じです。

Web Authentication API公開鍵暗号を用いて強力な認証を可能にする Credential Management API拡張機能で、パスワードを用いない認証や、 SMS テキストを用いない二要素認証を実現します。

https://developer.mozilla.org/ja/docs/Web/API/Web_Authentication_API

インターフェース的にはシンプルで以下2つを抑えておけば、API部分については十分です。

  • navigator.credentials.create([options])
    • 新しい認証情報を作成します。
  • navigator.credentials.get([options])
    • 既存の認証情報と照合します。

Web Authentication APIについてはこのくらいの理解で十分です。

Web Authnの辛いところ

前述の通りWeb Authnに関しては2つのAPIの理解をしていれば十分なのですが、それだけでは認証解決するまでには遠くWeb Authnによって得られるPublicKeyCredentialを紐解く作業、つまりRelying Party Serverの実装がほぼ全てと言ってもいいでしょう。

このRelying Partyでは何をしているのか、ちょっとだけ説明すると以下のようなことをやっています。

(登録フロー)

  1. challengeを発行
  2. PublicKeyCredentialを取得 (Web Authn)
  3. challengeの照合
  4. originの照合
  5. CBOR(Concise Binary Object Representation)という形式でAuthenticatorAttestationResponseがシリアライズされているのでdecode
  6. 上記から認証器の情報を取得
  7. clientDataJSONのhashを作成
  8. AttestationStatementFormatを決定
  9. AttestationStatementFormatの検証手順を使用してattStmtが正しいかどうかを検証 ...

すべて説明するのも大変なのでこのフローもまた一部抜粋したものです。

仕様書のほうには詳細が記載されているのでそちらを見てみてください。

Web Authentication: An API for accessing Public Key Credentials - Level 1

ここで改めてよく目にする登録フローの図を見てみます。

Registration Flow
Registration Flow
画像引用元: https://w3c.github.io/webauthn/#api

お気づきだろうか、これだけ複雑な検証手順が上の図だと⑥にまとめられているのです。ちなみに実装の9割は⑥に含まれると言っても過言ではないです。

一見華やかに見えるWeb Authentication API、実のところRelying Partyというハードな見えないところの実装の努力があって初めてパスワード不要な認証が実現できていることがおわかりいただけただろうか。

見えないところでの努力。これってすごいアイドルを感じますよね。

そして謎に包まれた認証、すごくエスパーです。

Web Authentication APIに堀裕子みを感じてしまったのでこれは実装せざるを得ないと思い、先日のim@s_hack 2018にてサイキックな認証を作ってみた成果がこちらです。

https://psychic-authn.herokuapp.com

もちろんサイキックに対応したブラウザじゃないと見れないのでご注意を。

実装内容的には公式のそのままじゃ動かないデモを参考にしつつ、w3cの仕様を見ながら整合性を取るのに手間取りましたがなんとか認証解決できるところまでできました。

(認証情報に関しては個人情報の取り扱いが面倒なのである程度キャッシュさせたら削除させるようにします)

よかったら試してみてください。PC ChromeでYubikeyを使ってのみ動作検証をしていないので他環境での動作の保証はしませんのであしからず。

以上遅ればせながらアドベントカレンダー15日目の記事でした。来年は風邪を引かないようにがんばります。


アクセシビリティ的な観点でアイマス画像の代替テキストを考える

この記事はアイドルマスター Advent Calendar 16日目の記事になります。 adventar.org

去年のアドベントカレンダーのためにブログを開いてはや一年、一年ぶりの記事の更新になるのでまずは今年の振り返りを

2017年を振り返る

2017年、思い返してみればシンデレラの5thライブで全国各所を回りました。毎週のように長距離移動をして死にそうだった。。。特に最初の宮城公演から高速バスで東京に戻ってそのまま渡米したときの過酷さは未だに忘れられません笑。

でも毎公演、終わるたびにステージ上からたくさんの元気をもらって次の日の副業を頑張る活力になっていて、移動は辛らったけどツアーの期間は幸せだったなって思います。


a11y

話は変わって、皆さん画像にalt属性は入れていますか?

Web Accessibility Advent Calendar 2017 5日目の「入門者向けalt属性の書き方アドバイス」がとてもわかりやすい記事(スライド)で参考になると思ったので、早速実践ということで今年のアドベントカレンダーネタにしようと思います。

docs.google.com

実践

altには画像がなくても画像で伝えたい|伝えるべきことを代替テキストとして伝えるという役目があります。上で紹介したスライドでは地図を例にうまく代替テキストを書けていてなるほどなと感じたのですがでは、次のような画像にaltを付ける場合はどのようなテキストを入れればいいでしょうか。

アイコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女アイドルではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。非常に可愛い。

まずはシンプルなaltテキストを入れてみます。

<img src="yuko-hori.png" alt="画像:堀裕子" />

これだと堀裕子の画像であることはわかるが具体的な絵が想像できないので情報としてはまだ不足しています。

また画像というラベルのままでは普通のカード画像として連想されそうなので修正。

<img src="yuko-hori.png" alt="アイコン画像:[月夜見エスパー]堀裕子+" />

[月夜見エスパ−]堀裕子+の画像でかつアイコン画像だということが伝達できています。

しかしながらこのままではこの画像で伝えなければならない大事な情報が欠けています。ということで更に加筆。

<img src="yuko-hori.png" alt="アイコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女ではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。" />

イコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女ではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。

ここまで記述すれば、この画像で伝えたい情報、つまりアイドルの魅力が代替テキストで十分に表現できたのではないかと思います。

代替テキストの画像:(アイコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女ではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。)
こんな感じで代替テキストが表示される。

アクセシブルなコンテンツはWebのかなめ。 アクセシブルなマークアップをすることでアイマスの輪も広がってくれると信じてこれからも開発していきましょう。

といったところで、ここまで読んでいただいてありがとうございます! アイドルマスター Advent Calendar 2017 17日目はtwoterabytesさんの安部菜々にすくわれたかもしれない話です。

社会人だからプロデューサー予定表を毎朝Slackに通知させる

こんにちは!この記事はアイドルマスター Advent Calendar 2016 - Adventarの21日目の記事です。
初参加になりますがよろしくお願いします。

はじめに

こんにちは、堀裕子担当プロディーサーをしています @kahun_mask です。
「早くVRでユッコの実装してくれないかな...(でもクリスマスはVRで唯ちゃんと一緒にSnow Wings生活だ!)」など最近は考えて生きています。

突然ですがプロデューサーなら今日のスケジュールくらい毎朝チェックしなきゃだめですよね。

私は副業でエンジニアをしています。
正直毎朝プロデューサー予定表を見たり、予定表を見てカレンダーを都度更新するのもしんどいです。
更に言うと通知してくれるツールとかは一つにまとめたい。

ということで、今イケてる開発現場で使われてるコミュニケーションツールのSlackに集約することにしました。

※何番煎じかわからないですがプロデューサー予定表ネタです

続きを読む