Credenatial Management APIの発表聞いたメモ

技術系日記 メモ

developers.google.com

僕はchrome使いなのですが、まあモダンなブラウザを使っている皆様ならばだいたいログインフォームに入力したあとに「このログイン情報を保存しますか？」系のダイアログが出るのをご存知かと思います。
インターネットの普及に伴い様々なサービスをwebで享受することが可能になりました。webを見るのはだいたいブラウザでしょうし、各ブラウザベンダーとしてはwebサービスが増えていること、webサービスを使う人が増えていること、webサービスが扱う情報がより重要なものになっていることなどからブラウザでのログイン、セキュリティまわりもよくしていかないといけないよね、という問題意識があるような気がします[要出典]。
またスマートフォンの普及にともなって1人の人間が使うデバイスが複数あることが一般的になりました。そうするとPCでのchromeとandroidのchromeでログイン情報を同期したいというのはユーザーの要望として当然のことですし、webサービスとしてはユーザー体験を損なわないように努力する価値があるところでしょう。

というわけで Credential Management API はwebサービス開発者として結構気になる内容なのでトークをざっと聞いてみました。
以下そのまとめとメモです。
メモは話していたことを雑にメモってあって、 memo: で始まるのが僕が思ったことです。

まとめ

  • Sign-UpにCredential Management APIを使うのはめちゃくちゃよさそう
  • 一方でweb標準なのか？という疑問が残る
  • ブラウザに寄せたい人にはいいけどそうでない人はどうするのがいいんだろうなーという懸念がある

メモ

主な関心事は3つ。Sign-In, Sign-Up, AuthN1
Sign-Inがサインイン・ログイン時の話で、ある登録済みユーザーがあるサービスを利用開始するときの話。
Sign-Upは初回登録時の話。
AuthNは認証の話。特に2FAにフォーカスしてた気がする。

memo: AuthNが一番よくわからんかった

Sign-In

chromeのパスワードマネージャがうまく動かない理由トップ3

  • マークアップが壊れている、アノテーションがおかしいなどHTMLレベルの問題
  • サインインフォームである、サインインに成功したとchromeが検知できない
    • chromeは遷移後の画面にまたフォームがあるとログイン失敗とみなす
    • fetch APIなど画面遷移を伴わない場合は history を操作することで navigation が発生したとみなしてくれる
  • HTTPとHTTPSが混ざってる
    • HTTPなページにHTTPSなフォームがあっても insecure である
    • HTTPページの改ざんの可能性があるのでjsを仕込んでpasswordを別サイトにも送信、とかができちゃう
    • 当然HTTPなページにHTTPSのiframe仕込んでもダメ

chromeがランダム生成した文字列をパスワードにしてくれる機能がつく2。ランダム生成したものをchromeに覚えさせるので推測されにくくなる。自分で覚えてないからフィッシング詐欺にも遭いにくくなる。

memo: これいつデフォルトでオンになるんだか言ってたっけかなあ

Sign-Up

Credential Management APIでやるといろいろいいいことがある

  1. アカウント選択画面が画面が出てワンタップしたらログインみたいになる
  2. 規格に対応している認証情報提供元ならどれでも使える
  3. 入力のめんどうがない
    • ECサイトとかの事例で登録率とかコンバージョン率がめっちゃ改善した例が載ってた
    • memo: こういうの、UIの改善も同時に行ってそうな気はするのでほんとに独立な結果なのかわからんというかそうでない気がするが、フォーム入力の完了率を気にすることがなくなるのでマジで重要っぽい

こんな感じで使う

let settings = {
  password: true,
  federated: {
    providers: [
      "https://accounts.google.com"
    ],
  },
};
navigators.credentials
  .get(settings)
  .then(credentials => {
    // ユーザーに「これ使っていい？」あるいは「どれ使う？」ってダイアログが出る
    // ユーザー操作で選ばれたらresolveされるっぽい
  });

memo: これweb standardになるのかなあ。そのへんがよくわからん

AuthN

memo: けっこーはやくちなのでツラかった

いま2FAといえばOTPだけどsecurity keyというのを使うようにしたい。
security keyはデバイスに挿して使うやつでワンタップすることで二段階認証OKということにできるっぽい。
memo: 仕様としてはFIDO Universal 2nd Factorというやつっぽい。

  1. AutheNtication(認証)の略。AuthZ(AuthoriZation, 認可)との区別のために使う略語だと思う。認証とは「ユーザーが確かにこのアカウトであるか」という本人確認のこと。認可は「このユーザーならこの情報は見てもいいよ」などの許可だと思ってればよさそう。↩

  2. Chrome 59だとまだデフォルトではオンでないっぽい。 chrome://flags でいじれる。参考 -> How to Automatically Generate Random Secure Passwords in Google Chrome?↩