Edited at

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

More than 1 year has passed since last update.

ピクシブ株式会社 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 を有効にしているブラウザーは無さそうです。


サンプルコード

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


認証情報の登録

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: "john.p.smith@example.com",
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.
});

https://w3c.github.io/webauthn/#sample-registration


認証

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.
});

https://w3c.github.io/webauthn/#sample-authentication

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


デモサイト

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


今後の展望

各ブラウザーで開発が進んでおり、また、FIDO U2F に関しては Google、Facebook、Dropbox、GitHub などで導入されていたので、Web Authentication API が各 Web サービスで導入されるのは意外にもそう遠くない将来かもしれませんね。

ただ、FIDO 対応デバイスは普及しているとは言い難いので、生体認証自体には対応しているスマートフォンとタブレットでの利用が先行しそうです。


参考


最後に

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

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

明日の担当は @_pawa_ です。