Web向けのFace IDとTouch IDのご紹介

Web向けのFace IDとTouch IDのご紹介

Face IDやTouch IDはログインの際にスムーズなエクスペリエンスを提供するものですが、Web Authentication APIによってSafariで使用できるようになりました。この便利で安全なログインの新方式をWebサイトに追加する方法をご覧ください。

リソース
関連ビデオ

WWDC20
- Webデベロッパのための新機能
ダウンロード

こんにちは WWDCへようこそ “Web向けのFace IDとTouch IDのご紹介” WebKitチームのジーウェンです Web向けのFace IDとTouch IDについてお話ししますこのセッションではWebデベロッパ向けに Webサイトに追加可能な新機能を紹介します早速始めましょう私がスマホのアプリケーションを使う中でとても気に入っているのは Face IDやTouch IDを使用してアプリケーションにサインインし直すエクスペリエンスですお気に入りのデモアプリケーション Shinyでお見せしましょう Shinyは日常的に使えてすてきな写真を表示できるアプリケーションです初めてサインインする時はユーザー名とパスワードを入力する必要があります私はセキュリティに非常に敏感なので２要素認証を可能にしましたこの例では続行するために SMSからのコードを待つ必要があります SMS２要素認証コードを送信するとサインインができかわいい犬の写真が見れます iOSではAutoFillを使うとサインインが楽になりますがそれでも複数のステップや考えるべきことが多くあります Shinyでは数時間インアクティブのままだと再度サインインを求められます高度なセキュリティコンテンツが多くある場合に同様のポリシーを見かけます例えば銀行などですしかし今度はサインインの際にパスワードとSMSの２要素認証ではなく Face IDのみを使用しますこのように一瞬でサインインできます従来よりもずっと速くよりセキュアですこれをあなたのWebサイトにも適用する方法をご紹介します簡単な概略はこうですサインインボタンをクリックすると Safariが確認を要求しすぐにFace IDでサインインできますでは Webサイトへの追加方法を詳しく見ていきましょう Web上のFace IDとTouch IDが実装しているのは Web Authenticationと呼ばれる標準規格ですまずその標準について少し触れてからプラットフォーム認証と呼ばれる Appleの実装についてご説明します
次にこの新機能を採用するのに必要なことの基本をお話しします最後に重要なベストプラクティスをいくつかご紹介しますまずはWeb Authentication標準についてです Web AuthenticationはJavaScript APIで WebデベロッパにWeb上で公開鍵ベースの認証を利用可能にしますこのAPIは公開鍵暗号を用いて構築されており多くのユニークな機能を備えています高レベルのコンセプトから始めましょう最初に“証明書利用者”と呼ばれる概念に慣れる必要があります本質的にはあなたのWebサイトのことです２番目にAPIは公開鍵認証情報と呼ばれる JavaScriptオブジェクトを生成して利用しますそこには認証に必要な情報がすべて含まれています
３番目にすべての秘密鍵はユーザーのディレクトリではなく認証器と呼ばれるデバイスで管理されています認証器にはセキュリティキーか今見たようにiPhoneが使えますユーザーの代わりに Webブラウザが認証器と対話し認証器からの応答を Webサイトに橋渡しします４番目に認証器は必要であれば認証器証明と呼ばれるプロセスを介してその特性を暗号的に証明することができます聞き慣れない概念かもしれませんが本セッションを聞けばこれらをWebサイトに使えるようになります使いたくなる理由は何でしょうか
まずWeb Authenticationは公開鍵暗号化による強力な認証を提供しますそれはパスワードよりずっと強力で再利用や破ることはできませんさらにフィッシングに耐性があります SafariはこのAPIにより生成された公開認証情報のみをそのWebサイト内で使用できるようにします認証情報はそれが作成された認証器からエクスポートすることはできません公開認証情報が一度作成されたらユーザーがそれをうっかり他者に漏らすことはないのですすごいですよね？以上がWeb Authentication標準の概要です実際のAPIについては後ほどお話しします次はFace IDやTouch IDを有効にするため Appleが用意したユニークな機能を紹介します
iPhoneのような認証器はプラットフォーム認証器と呼ばれます認証器がプラットフォームに組み込まれているからです Appleの認証器には重要な特性が２つあります１つ目は今まで見てきたように Face IDとTouch IDですこれはユーザーの同一性の検証に使用されます
２つ目はSecure Enclaveと呼ばれすべての秘密鍵を管理しそれらがデバイスから外へ出ないことを保証します両者を組み合わせることで Face IDやTouch IDを用いたサインインは実質的に多要素認証となりますデバイスがWebサイトへ送り返す応答は２つの要素をカプセル化しますあなたが持っているものつまりiPhoneとあなたが何者かつまり生体認証ですしかもタップ１回でサインインできますこれはすごいことですしかし銀行のようなWebサイトでは多要素認証を強要するよう規制される可能性があります応答に含まれる情報だけでは不十分かもしれませんデバイスが優れた特性を保持していることをメーカーが追加証明する必要があります認証器証明と呼ばれる追加のセキュリティ機能でこれを行います認証器証明とは基本的にデバイスが本物でその機能が確かかどうかをデバイスのメーカーへ問い合わせるセキュアな方法ですこれは先ほど触れたようなケースで非常に有益です
しかし実装方法によってはユーザーのプライバシーを侵害する可能性があります例えば単一で一意の認証器証明の証明書を使用するようデバイスに指示ができますするとその一意な証明書は簡単な追跡媒介物になり認証されたユーザーの全アカウントを Web上でリンクできます Appleはユーザーのプライバシーを守るため独自の認証器証明サービスを作りましたすべての認証情報に対して一意な証明書を作成するので Webサイトはそれを使ってユーザーの追跡ができなくなりますそれがApple Anonymous Attestationと呼ばれるものでまだ利用できませんがもうすぐ登場しますこういった豊富な機能により Appleのプラットフォーム認証器は実にすばらしいものになっていますそれではWebサイトへの追加方法を見ていきましょう Webサイトで使用するには３つのメソッドが必要ですべてpromiseベースのAPIですまず現在のデバイスがこの機能をサポートしているかを確認します PublicKeyCredential.isUserVerifyingPlatform AuthenticatorAvailableを呼ぶことで行えますそれからユーザーが使用できるよう設定するため navigator.credentials.createを呼び出し必要な認証情報を含む PublicKeyCredentialオブジェクトを作成します最後にユーザーがサイトにサインインする時に検証可能な認証情報オブジェクトを返す navigator.credentials.getを呼び出しますこれでサーバー上でユーザー認証を行うことができますこれらはWeb Authentication APIへの入口ですそれではどうやってWebサイト上で Face IDやTouch IDを得るのか見てみましょう機能を検出するのは非常に簡単です PublicKeyCredential.isUserVerifyingPlatform AuthenticatorAvailableを呼ぶだけですブール値が返されこの機能が使用可能かどうか分かりますさて今度はユーザーオンボーディングですまずは昔ながらのパスワード資格情報を使いユーザーにサインインしてもらう必要がありますそしてユーザーへ通知文を出します “新機能を使って Face IDかTouch IDを利用すれば” “次回のサインイン時にユーザー名とパスワードが不要になります” “機能を有効にしますか？” 通知は全画面やバナーフローティングポップアップウィンドウなど Webサイトのスタイルに合わせてください私が作ったShinyのWebサイトでは全画面の通知にしましたこれが通知文です大体のユーザーはこの時点で“OK”を押すでしょうそしたらWeb Authentication APIを使って Touch IDを有効にするために次のスクリプトをWebサイトに用意します何よりもまずメソッドにパスするために optionsを構築します難しそうに見えますしかし分解してみると実はとても簡単だと分かります初めに何のWebサイトか書き出しますそれからユーザーに関する情報ですそして何の暗号を利用したいかを明示しますここでは暗号にchallengeを設定しますその後プラットフォーム認証器の利用をブラウザに設定しますこれが重要なオプションです最後は完全に任意です Shinyには特別なセキュリティがいくつか必要なので認証器証明を選んでいます簡単でしょう？ではこのoptionsを navigator.credentials.createにパスしますするとSafariがUIを処理して PublicKeyCredentialを戻しますユーザーが動かしているイベント内でこのメソッドを呼び出すのが重要です全体の流れをデモで見てみましょうまずは私の資格情報で Shinyにサインインしますすると通知が出るので承諾します
Safariは確認UIを表示します OKをクリックしたら Touch IDをして完了ですこれがユーザーオンボーディングのすべてですすばらしいですがまだ半分です今のはユーザーが直接関わる部分のエクスペリエンスですレスポンスを処理するために裏側でまだやることがあります
レスポンスの概要を見てみましょうまず今後特定の資格情報を参照するために保存すべきIDが書かれています続いて登録のためのresponseです利用者を有効にするためにブラウザが生成したメタデータをレスポンスで取得しますそしてこれがレスポンスの要点です attestationObjectには公開鍵のデータと認証器証明の証明書が含まれています認証器証明を受け取らない場合はnoneという attestation statementを受け取りますこれがレスポンスの概要ですサーバーの構成によってコードは難しくなる可能性がありますが次の確認リストの順番に従ってください初めにクライアントデータや認証器のデータなどすべてのメタデータを確認します次に認証器証明を選んだ場合には attestation statementを有効にします３番目に資格情報や公開鍵データを保存し今後サインインで使えるようにします最後に必要に応じてサーバー側のcookieを設定しそのデバイスで特定のアカウントに対して Face IDかTouch IDが可能であることを示しますこれで再認証の処理がより簡単になりますユーザーオンボーディングに必要なのはこれだけですではサインインに移りましょう登録時にTouch IDを有効にしたアカウントの cookieを保存した場合はそれがサインインの最速手段として記録されています Touch IDを最速手段として使うには次のスクリプトが必要です
サインインするための公式は登録の時とよく似ています他の公開鍵暗号と同様にここの入力必須項目はchallengeですそれから利用予定の正確な資格情報を Safariに登録しておくと便利ですそうすればSafariがユーザーに最適なUIを提供できます一番重要なのは transportsを明示することです
これらのoptionsを navigator.credentials.getへパスすると SafariはUIを処理し登録時のように PublicKeyCredentialを戻しますここでもユーザーが利用しているイベント内でこのメソッドを呼び出すことが大切です今の流れをデモで見てみましょう “Sign in”ボタンをクリックすると Safariが確認UIを表示します “Continue”をクリック Touch IDをして完了ですこんな簡単にサインイン時に Touch IDを使うことができます今度は裏側に注目してみますサインインの場合 PublicKeyCredentialの戻り値は少し異なります responseのタイプは AuthenticatorAssertionResponseですこのresponseで重要なのはsignatureですすべての公開鍵暗号で signatureを確認する必要がありますこれがresponseです
サインイン用の確認リストは登録時のものよりも簡単ですまずユーザーIDが確かにユーザーのうちの１つか検証しますそれから資格情報IDがそのユーザーIDにひもづくものか確認しますそれが完了したら他の全メタデータを検証します最後に署名を確認しますこれでユーザーがログインし完了です
以上がWeb上でFace IDとTouch IDを使うために必要なことでした３つのポイントを要約します初めに機能の存在を検出する必要があります次に典型的な仕組みでユーザーがサインインした直後に機能を有効にするかユーザーに確認する通知文を出しますそして今後サインインする際に Face IDかTouch IDを使えるように準備します
Web用のFace IDやTouch IDは Safariで利用可能です macOS iPadOSやiOSのSFSafariViewControllerや ASWebAuthenticationSessionと同様にです最後に実例を紹介しますこの機能はサインインの唯一の手段ではなく代替手段として利用することが何より大切です秘密鍵はデバイスにひもづいているため Webサイトにサインインする方法が１つだけだとユーザーはデバイスをなくした時に永遠にアカウントに入れなくなってしまいますユーザーエージェント文字列ではなく機能検出を使ってこの機能を見つけます
navigator.credentials.createと .getメソッドはユーザーが動かしているイベント内で呼び出しますこの機能がデバイスのアカウントに有効かを示すためにフラグを設定する場合にはサーバー側の安全な HttpOnly属性のcookieを利用してくださいそれで長期間保存されます最後に既にWeb Authenticationを使ってセキュリティキーを有効にしたWebサイトに関しセキュリティキーに加えてこの機能をユーザーに紹介する意味があるか考えるべきですエンドツーエンドのユーザーエクスペリエンスはとても難しいからです
今回はWebで利用する Face IDとTouch IDを紹介しましたフリクションレスなユーザーエクスペリエンスや強力な多要素認証の仕組みが提供されます Webサイトへ容易に統合ができユーザーのサインインを簡単にしますユーザーのセッション状態の管理方法を変更する必要はありません今日からこの機能を試していただき潜在的なバグがあればフィードバックアシスタントか bugs.webkit.orgで教えてくださいご視聴ありがとうございました

// Feature detection

const isAvailable = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();

if (isAvailable) {
    // Continue to enrollment or sign in
    // ...
}

8:42 - Enrollment

// Enrollment

const options = {
    publicKey: {
        rp: { name: "example.com" },
        user: {
            name: "john.appleseed@example.com",
            id: userIdBuffer,
            displayName: "John Appleseed"
        },
        pubKeyCredParams: [ { type: "public-key", alg: -7 } ],
        challenge: challengeBuffer,
        authenticatorSelection: { authenticatorAttachment: "platform" },
        attestation: "direct"
    }
};

const publicKeyCredential = await navigator.credentials.create(options);

11:42 - Sign in

// Sign in

const options = {
    publicKey: {
        challenge: challengeBuffer,
        allowCredentials: [{
             type: "public-key",
             id: credentialIdBuffer,
             transports: ["internal"]
        }]
    }
};

const publicKeyCredential = await navigator.credentials.get(options);

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC20