ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

公開 ヤフーにおける WebAuthn と Passkey のUXの紹介と考察 ヤフー株式会社 サービス統括本部ID本部 服部 夢⼆ Copyright (C) 2020 Yahoo © Yahoo Japan Japan Corporation. All Rights Reserved.

公開資料 ⾃⼰紹介 服部 夢二 ヤフー株式会社 サービス統括本部ID本部 業務内容 ヤフーでID関連のしごとをしています。 最近は生体認証やSMS認証周りのバックエンドシステムがメイン © Yahoo Japan 2

公開資料 注意点 • サービス操作画像が⼀部検証⽤のUIになっていることがあります © Yahoo Japan 3

公開資料 アジェンダ 1. ヤフーの認証UX 2. Passkeys登場によるヤフーUXへの影響 3. WebAuthnにおけるベターなUXの考察 © Yahoo Japan 4

公開資料 1.ヤフーの認証UX ヤフーの認証UX WebAuthn SMS認証 認証を自動的に発動 設定済の認証方法から独自のロジックで選択 （前回成功の認証方法 / 認証方法の設定状況によって判断） © Yahoo Japan 5

公開資料 1.ヤフーの認証UX WebAuthnが有効なアカウントのUX課題 アカウントの WebAuthnが 有効？ YES クレデンシャルを 登録した端末の場合 NO 別の 認証方法 が発動 クレデンシャルを 登録していない端末の場合 OSの失敗ダイヤログが 表示されてしまう © Yahoo Japan 6

公開資料 1.ヤフーの認証UX 理想系 アカウントの WebAuthnが 有効？ YES NO 端末内に有効な クレデンシャルが 存在する？ YES NO 別の 認証方法 が発動 © Yahoo Japan 7

公開資料 1.ヤフーの認証UX 理想系 WebAuthn APIでは 提供されていない アカウントの WebAuthnが 有効？ YES NO 端末内に有効な クレデンシャルが 存在する？ YES NO 別の 認証方法 が発動 © Yahoo Japan 8

公開資料 1.ヤフーの認証UX 未登録端末による認証失敗の背景 要約: credentials.exists(credentialId) のプライバシーの問題とは？ 1. super-cookieとしてユーザ追跡に利用できてしまうこと （プライバシーモードでもクレデンシャル登録できるので） 2. 外部認証器などは常に端末に接続されていないので必ずしも判断できないこと → 確実なクレデンシャル存在確認は難しい © Yahoo Japan https://github.com/w3c/webauthn/issues/1749 9

• https://github.com/w3c/webauthn/issues/1749

公開資料 1.ヤフーの認証UX 理想系 WebAuthn APIでは 提供されていない → サービス側で推測する アカウントの WebAuthnが 有効？ YES NO 端末内に有効な クレデンシャルが 存在する？ YES NO 別の 認証方法 が発動 © Yahoo Japan 10

公開資料 1.ヤフーの認証UX ヤフーのクレデンシャル登録済み推測 ユーザーDBで クレデンシャル登録済のOS を保管 Android: 登録済 iOS: 未登録 © Yahoo Japan ※ OS判定はリクエストのUserAgentを参照 11

公開資料 1.ヤフーの認証UX ヤフーのクレデンシャル登録済み推測 Android: 登録済 iOS: 未登録 © Yahoo Japan 12

公開資料 1.ヤフーの認証UX ヤフーのクレデンシャル登録済み推測 Android 端末 WebAuthn発動 Android: 登録済 iOS: 未登録 © Yahoo Japan 13

公開資料 1.ヤフーの認証UX ヤフーのクレデンシャル登録済み推測 Android 端末 WebAuthn発動 Android: 登録済 iOS: 未登録 iOS 端末 WebAuthn未発動 （PW, SMSなどを発動） © Yahoo Japan 14

公開資料 アジェンダ 1. ヤフーの認証UX 2. Passkeys登場によるヤフーUXへの影響 3. 現状の課題と展望 © Yahoo Japan 15

公開資料 2. Passkeys登場によるヤフーUXへの影響 Passkeys登場による課題（１） iCloud上で 共有 iOS 端末 Passkey(Apple)によって iCloud経由で各Apple系OS間で クレデンシャルが共有できるように Mac 端末 © Yahoo Japan 16

公開資料 2. Passkeys登場によるヤフーUXへの影響 Passkeys登場による課題（１） iOS : 登録済 Mac: 未登録 © Yahoo Japan 17

公開資料 2. Passkeys登場によるヤフーUXへの影響 Passkeys登場による課題（１） iOS 端末 WebAuthn発動 iOS : 登録済 Mac: 未登録 © Yahoo Japan 18

公開資料 2. Passkeys登場によるヤフーUXへの影響 Passkeys登場による課題（１） iCloud上で 共有 iOS 端末 WebAuthn発動 iOS : 登録済 Mac: 未登録 Mac 端末 クレデンシャルは存在するのに WebAuthn未発動 OS間共有のため 既存のロジックでは判定が不可能になってしまった © Yahoo Japan 19

公開資料 2. Passkeys登場によるヤフーUXへの影響 課題（１）への応急対応 BackupState (以下、BS) authenticatorData.flagsに含まれるフラグ このflagが立っている場合はクレデンシャルが 複数デバイス間で共有されている可能性がある。 例) iCloudを通じて他端末(iOS/MacOS/iPadOS)でも利用可能なクレデンシャル ※ BSはサービス側がクレデンシャルの可用性を判断して追加のクレデンシャル登録や再登録を促すためが本来の用途 © Yahoo Japan 20

公開資料 2. Passkeys登場によるヤフーUXへの影響 課題（１）への応急対応 iCloud上で 共有 iOS 端末 WebAuthn発動 iOS Credential （BS○） iOS : 登録済 Mac: 未登録 Mac 端末 iOS(BS○)なので WebAuthn発動 一時的にプラットフォーム間共有には対応が可能 ※ MacOS16/iPadOS16配信後、順次機能開放予定 © Yahoo Japan 21

公開資料 2. Passkeys登場によるヤフーUXへの影響 Passkeys登場による課題（２） ハイブリッド BLE経由で 認証情報の 共有 caBLEによる プラットフォームを越えた クレデンシャルの登録/認証 iOS 端末 登録/認証 リクエスト 現状ヤフーではサポート外 Windows 端末 © Yahoo Japan 22

公開資料 2. Passkeys登場によるヤフーUXへの影響 Passkeys登場による課題（２） 登録ユースケース BLE経由で 認証情報の 共有 iOS 端末 登録リクエスト Windows 端末 UA: Windows iOSクレデンシャル iOS: 未登録 Windows : 登録済 リクエスト元がWindowsのため WindowsOSのクレデンシャルとして登録 © Yahoo Japan 23

公開資料 2. Passkeys登場によるヤフーUXへの影響 Passkeys登場による課題（２） iOS 端末 クレデンシャルがあるのに WebAuthn未発動 iOS: 未登録 Windows : 登録済 Windows 端末 © Yahoo Japan 24

公開資料 アジェンダ 1. ヤフーの認証UX 2. Passkeys登場によるヤフーUXへの影響 3. WebAuthnにおけるベターなUXの考察 © Yahoo Japan 25

公開資料 3. WebAuthnにおけるベターなUXの考察 他社の事例（例: ebay） ID クレデンシャルを 登録したブラウザ？ （Cookieで判断?） 次へ 指紋センサーに タッチしてください ID 次へ それ以外？ PW ログイン © Yahoo Japan 26

公開資料 3. WebAuthnにおけるベターなUXの考察 サービスとしての理想系 クレデンシャルが 存在する端末 サービス側で ユーザにWebAuthnの利用を サジェストしたい クレデンシャルが 存在しない端末 © Yahoo Japan 27

公開資料 3. WebAuthnにおけるベターなUXの考察 サービスとしての現状 クレデンシャルが 存在する端末 サービス側で ユーザにWebAuthnの利用を サジェストしたい しかし サービス側が アクセスしたユーザ端末 利用可能なクレデンシャルが 存在するか判定できない クレデンシャルが 存在しない端末 © Yahoo Japan 28

公開資料 3. WebAuthnにおけるベターなUXの考察 Passkeysへ完全対応するための⽅法の例（１） © Yahoo Japan 29

公開資料 3. WebAuthnにおけるベターなUXの考察 Passkeysへ完全対応するための⽅法の例（１） ユーザーによる認証方法の選択必須化（例: GitHub） ID 次へ ID入力画面 生体認証を利用 生体認証を利用 SMSで認証 SMSで認証 Mailで認証 Mailで認証 認証方法 選択画面 WebAuthn 発動 © Yahoo Japan 指紋センサーに タッチしてください 30

公開資料 3. WebAuthnにおけるベターなUXの考察 Passkeysへ完全対応するための⽅法の例（１） ユーザーによる認証方法の選択必須化 生体認証を利用 SMSで認証 Mailで認証 大半のユーザは クレデンシャルの利用可否に関わらず このボタンを押すはず そして利用できない端末では 認証に失敗してしまいガッカリ体験に やっぱり利用できる端末でのみWebAuthnを発動するUXにしたい © Yahoo Japan 31

公開資料 3. WebAuthnにおけるベターなUXの考察 Passkeysへ完全対応するための⽅法の例（２） Conditional UI パスワードの自動入力のように 端末に保存されているクレデンシャルを選択して WebAuthnを実施するUI （現在はChromeCanaryで検証可能） © Yahoo Japan https://github.com/w3c/webauthn/wiki/Explainer:-WebAuthn-Conditional-UI 32

公開資料 3. WebAuthnにおけるベターなUXの考察 Conditional UI クレデンシャルが 存在する Touch IDを使用 ID入力 クレデンシャルが 存在しない 従来のPWのみ UI出典: https://webauthn-conditional-ui-demo.glitch.me/ © Yahoo Japan 33

• https://webauthn-conditional-ui-demo.glitch.me/

公開資料 3. WebAuthnにおけるベターなUXの考察 Conditional UI クレデンシャルが 存在する Touch IDを使用 クレデンシャルが... 存在するなら サジェスト or 存在しないなら サジェストしない ID入力 クレデンシャルが 存在しない 従来のPWのみ UI出典: https://webauthn-conditional-ui-demo.glitch.me/ © Yahoo Japan まさに やりたかったこと 34

• https://webauthn-conditional-ui-demo.glitch.me/

公開資料 3. WebAuthnにおけるベターなUXの考察 Conditional UI formのautocomplete属性 に “webauthn”を追加すると 選択UIが表示 UI出典: https://webauthn-conditional-ui-demo.glitch.me/ © Yahoo Japan 35

• https://webauthn-conditional-ui-demo.glitch.me/

公開資料 3. WebAuthnにおけるベターなUXの考察 Conditional UI 認証器 ユーザ操作 サーバ ブラウザ ページ表示 + challenge発行 • 事前にchallengeを発行しておく 認証要求 • ユーザ操作が実施されると navigator.credentials.get が実行 Assertion生成 認証リクエスト送信 UI出典: https://webauthn-conditional-ui-demo.glitch.me/ © Yahoo Japan 36

• https://webauthn-conditional-ui-demo.glitch.me/

公開資料 3. WebAuthnにおけるベターなUXの考察 Source出典: https://webauthn-conditional-ui-demo.glitch.me/ Conditional UI Conditional UI 対応判定 © Yahoo Japan 37

• https://webauthn-conditional-ui-demo.glitch.me/

公開資料 3. WebAuthnにおけるベターなUXの考察 Source出典: https://webauthn-conditional-ui-demo.glitch.me/ Conditional UI ← ここでUI操作がくるまでwait ← UI操作されるまえにChallengeを取得しておく ← conditional指定 © Yahoo Japan 38

• https://webauthn-conditional-ui-demo.glitch.me/

公開資料 3. WebAuthnにおけるベターなUXの考察 Conditional UI の課題 • サービス側のクレデンシャル削除時の挙動 • サービス内の操作によるクレデンシャル削除 • サービス側のオペレーションによるクレデンシャル削除（不正利用対策など） 端末では利用できるがサービス側が受け付けなくなる → 認証が失敗してしまうガッカリ体験が発生 対応方法は現在検討中の状態 https://github.com/w3c/webauthn/issues/1637 © Yahoo Japan 39

• https://github.com/w3c/webauthn/issues/1637

公開資料 3. WebAuthnにおけるベターなUXの考察 ベターなUX （ログアウト後） 新規ログイン ユースケース 再認証 ユースケース WebAuthnが 確実に成功する Cookieの認証履歴 等 YES WebAuthn 自動発動 NO WebAuthnが 成功する可能性が高い Conditional UI, OS別 登録状況 等 完全新規ログイン ユースケース （caBLEなどを想定） NO WebAuthnが 成功する可能性が低い YES WebAuthn 自動発動/サジェスト © Yahoo Japan （消極的） WebAuthn 選択画面 40

公開資料 まとめ • ヤフーではWebAuthnを自動発動 • プラットフォーム/端末間の WebAuthn発動/サジェスト条件に課題を感じている • UXについてW3Cのコミュニティ内でも議論中であり しばらくはサービス側の工夫が必要 © Yahoo Japan 41

公開資料 EOS 本日の発表アジェンダ •ヤフーの認証UX •Passkeys登場によるヤフーUXへの影響 •WebAuthnにおけるベターなUXの考察 © Yahoo Japan 42

公開資料 Q&A 現状の挙動 Passkeyの機能はまだ 開放できていません Beta版OSでのWebAuthnは 認証/登録に失敗します © Yahoo Japan 43

公開資料 Q&A 認証時の挙動（Passkey対応前） iCloud上で 共有 iOS 端末 WebAuthn発動 iOS : 登録済 Mac: 未登録 Mac 端末 クレデンシャルは存在するのに WebAuthn未発動 © Yahoo Japan 44

公開資料 Q&A 認証時の挙動（Passkey対応前） iCloud上で 共有 iOS 端末 WebAuthn発動 allowCredentials iOS : 登録済 Mac: 未登録 Mac 端末 WebAuthn未発動 empty allowCredentials © Yahoo Japan allowCredentialsのkeyIDを リクエストUAで出し分け 45

公開資料 Q&A 登録時の挙動（Passkey対応前） iOS 端末 empty excludeCredentials iOS : 未登録 Mac: 未登録 © Yahoo Japan 46

公開資料 Q&A 登録時の挙動（Passkey対応前） iCloud上で 共有 iOS 端末 excludeCredentials iOS : 登録済 Mac: 未登録 Mac 端末 登録済み エラー excludeCredentials © Yahoo Japan excludeCredentialsの 出し分けはしていない 47