もうすぐ来る? Web Authentication APIについて調べてみた

ピクシブ株式会社 Advent Calendar 2017 の 23 日目担当の syoichi です。
去年の 2 月にエンジニアとして入社しました。去年の Advent Calendar の時から変わらずプレミアムチームに所属しており、主に PHP / JavaScript / CSS で開発しています。直近では pixiv の決済基盤のシステムで Scala に触れる機会もありました。

さて、今回は現在各ブラウザーで開発中で、Edge で先行実装され、Firefox でリリースの目処が立ちつつある、Web Authentication API について簡単に調べてみました。

何ができるのか

端的に言うと、FIDO 2.0 に基いて、FIDO 対応デバイスによって指紋や顔などを照合する生体認証が Web から利用できるようになります。
活用例としては、生体認証によってパスワード無しで素早く Web サービスにログインできるようにするといったことが考えられます。既にスマートフォンやタブレットなどの一部のネイティブアプリで利用されているログイン方式に似ていますね。

FIDO とは

Fast IDentity Online の略で、生体認証などを利用して素早くオンライン認証をする為の標準仕様の 1 つです。これまでの
FIDO 1.0 では UAF (Universal Authentication Framework) と U2F (Universal Second Factor) に別れていましたが、FIDO 2.0 ではそれらが統合された形になりました。

これは PWA の API なのか

Progressive Web App Checklist には記載されていないですが、Web Authentication API の仕様では PWA の API の 1 つである Credential Management API との連携について言及されています。

ブラウザーの対応状況

Edge では Windows Hello を用いて対応しているようですが、まだ最新の仕様に基づいた形で API を有効にしているブラウザーは無さそうです。

• Chrome: 開発中
  • 主な実装: third_party/WebKit/Source/modules/credentialmanager/, third_party/WebKit/public/platform/modules/webauth/, content/browser/webauth/
    • third_party/WebKit/Source/modules/credentialmanager/では Credential Management API の実装と併存した形になっている
• Firefox: 開発中だが、リリースの目処が立ちつつある
  • 主な実装: dom/webauthn
  • 何故か Firefox Platform Status に記載されていない
• Edge: vendor prefix 付きで先行実装済みだが、最新の仕様に対応するかは不明
• Safari: まだ実装するか検討中のようだが、対応に向けた動きがある

サンプルコード

現在も仕様が活発に更新されている為、サンプルコードも短期間で陳腐化しそうですが、仕様に記載されているサンプルコードの内、認証情報の登録と認証に関するものが以下になります。

認証情報の登録

if (!PublicKeyCredential) { /* Platform not capable. Handle error. */ }

var publicKey = {
  // The challenge must be produced by the server, see the Security Considerations
  challenge: new Uint8Array([21,31,105 /* 29 more random bytes generated by the server */]),

  // Relying Party:
  rp: {
    name: "Acme"
  },

  // User:
  user: {
    id: Uint8Array.from(window.atob("MIIBkzCCATigAwIBAjCCAZMwggE4oAMCAQIwggGTMII="), c => c.charCodeAt(0)),
    name: "[e-mail]",
    displayName: "John P. Smith",
    icon: "https://pics.acme.com/00/p/aBjjjpqPb.png"
  },

  // This Relying Party will accept either an ES256 or RS256 credential, but
  // prefers an ES256 credential.
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7 // "ES256" as registered in the IANA COSE Algorithms registry
    },
    {
      type: "public-key",
      alg: -257 // Value registered by this specification for "RS256"
    }
  ],

  timeout: 60000,  // 1 minute
  excludeCredentials: [], // No exclude list of PKCredDescriptors
  extensions: {"loc": true}  // Include location information
                                           // in attestation
};

// Note: The following call will cause the authenticator to display UI.
navigator.credentials.create({ publicKey })
  .then(function (newCredentialInfo) {
    // Send new credential info to server for verification and registration.
  }).catch(function (err) {
    // No acceptable authenticator or user refused consent. Handle appropriately.
  });

認証

if (!PublicKeyCredential) { /* Platform not capable. Handle error. */ }

var options = {
                // The challenge must be produced by the server, see the Security Considerations
                challenge: new Uint8Array([4,101,15 /* 29 more random bytes generated by the server */]),
                timeout: 60000,  // 1 minute
                allowCredentials: [{ type: "public-key" }]
              };

navigator.credentials.get({ "publicKey": options })
    .then(function (assertion) {
    // Send assertion to server for verification
}).catch(function (err) {
    // No acceptable credential or user refused consent. Handle appropriately.
});

navigator.credentials.create()とnavigator.credentials.get()は Credential Management API のメソッドです。このように Web Authentication API は Credential Management API と連携した形で利用することになりそうです。

デモサイト

FIDO 対応デバイスがあれば以下のデモサイトで動作を確認できるようです。

• https://webauthn.io/
• https://webauthn.bin.coffee/

今後の展望

各ブラウザーで開発が進んでおり、また、FIDO U2F に関しては Google、Facebook、Dropbox、GitHub などで導入されていたので、Web Authentication API が各 Web サービスで導入されるのは意外にもそう遠くない将来かもしれませんね。
ただ、FIDO 対応デバイスは普及しているとは言い難いので、生体認証自体には対応しているスマートフォンとタブレットでの利用が先行しそうです。

参考

• News ＆ Trend - 認証標準化団体が「FIDO 2.0」のWeb API仕様をW3Cに提案、パスワードレス普及へ一歩：ITpro
• パスワードに代わる強固なウェブ認証実現に向けたW3Cの「Web Authentication」 - ZDNet Japan
• Dev guide - Web authentication - Microsoft Edge Development | Microsoft Docs
• Web Authentication API 紹介 (Windows Hello を使った Edge 開発) | Tsmatz
• Webでの生体認証をヤフーさまとともに - Windows Blog for JapanWindows Blog for Japan
• Yahoo! JAPAN各サービスで、パスワードを使わないログイン方法の導入を開始 / プレスルーム - ヤフー株式会社

最後に

ピクシブ株式会社ではクリエイターに向けてサービスを作っていきたいエンジニアを募集しています!

それでは、明日からも引き続きピクシブ株式会社 Advent Calendar 2017 をお楽しみください。
明日の担当は @_pawa_ です。