こんにちは。Web フロントエンドのテックリードの小原です。 今回は社内のフロントエンドユニットというチームの活動で、パスキーについて調査して社内勉強会で発表したことについて紹介します。
パスキーとは
パスキーはパスワードなしにオンライン認証を実現するための新しい方法・認証システムのことです。
2022 年 5 月に Apple, Google, Microsoft がパスキーの対応およびモバイルデバイスを使って近くにある PC などのデバイスでログインできるよう対応を推進していくことを 発表しました。その後 iOS 16 や Google Chrome 108 からパスキーが使えるようになってきたことから、最近注目を集めています。
パスキーには、パスワードと併用またはパスワードに代わる認証手段として
- ユーザーがパスワードを覚えなくていい
- Web サイト側からデータが漏れても比較的安心
- フィッシング攻撃に耐性がある
などの特徴があります。
パスキーを理解するための資料として https://passkeys.dev/ がわかりやすく、信頼できるかと思います。
参考:
- passkeys.dev - Home
- Apple、Google、Microsoft が FIDO 標準のサポート拡大にコミット、パスワードレス認証の普及を促進 （国際版の日本語訳）｜ FIDO Alliance のプレスリリース
- Apple「passkey」、iOS 16 と macOS Ventura で利用可能に-パスワードのない未来へ | TECH+（テックプラス）
- パスキーの概要 - Apple Developer
- Android Developers Blog: Bringing passkeys to Android & Chrome
- Passkeys.io – A Passkey Authentication Demo
調べることになった経緯
フェンリルでは大部分のエンジニアが部や課の所属とは別に、「テックチーム」というエンジニアだけで構成される組織にも属しています。テックチームは専門分野ごとに 7 つのユニットに分かれるのですが、そのうちの 1 つに「フロントエンドユニット」という Web フロントエンド技術を専門とするチームがあります。
フロントエンドユニットの活動で、iOS 16 で新しく使えるようになった技術のうち注目すべきものについて調査しようということになりました。iOS 16 では新しくパスキーを使えるようになったため、ダービス (id:dimda) と小原 (id:KoharaKazuya) の 2 名でパスキーについて調べることにしました。
調査の流れと社内勉強会
事前に知っていることがほぼなかったため、そもそもパスキーとは何なのか、などをキーワードを辿りながら調べていきました。
幸いなことにキーワードで検索すると上記のような分かりやすくまとめられた資料が見つかったので、これらを読みつつ簡単な実装を試し、おおまかに理解していきました。
苦労したのは「パスキーとは？」という定義を追求したときに、意外と一言でズバッと示してくれる資料が見当たらなかったことです。 FIDO アライアンスの資料で、
FIDO 認証資格情報がマルチデバイス対応資格情報である場合、一部の企業は製品の実装において FIDO 認証資格情報を「パスキー」と呼んでいます。
という記述を見つけるまで、実体を掴めないモヤモヤを感じていました。
また、FIDO や WebAuthn などの関連知識が不足していた点で苦労しました。
パスキーの概要を理解できたところで「これは今後の Web やスマホアプリにおいて重要な知識になりそうだ」と判断し、社内メンバーに広く伝えるため勉強会を実施しました。
実装する際に役立ちそうなもの
開発者がパスキーに関するシステムを開発する上で役立ちそう、と思えるものを列挙しておきます。
パスキーの関連用語の意味や関連する資料などを探すにあたっては https://passkeys.dev/ が参考になります。ライブラリや環境ごとの対応状況などもまとめられています。
Web サイトの実装で参考になるのは https://web.dev/ の Create a passkey for passwordless logins と Sign in with a passkey through form autofill がわかりやすいかと思います。
実際に使ってみたい場合は https://passkeys.io/ のようなデモサイトを使うか、すでにパスキーを導入している Web サイトに iPhone などでアクセスしてみましょう。一例ですが、ヌーラボアカウントで使用できます (https://nulab.com/ja/blog/nulab/nulab-account-passkeys/ より)。
パスキーでの認証を実現する際に JSON などのフォーマットに変換したくなると思うのですが、その際には WebAuthn API の変換用の API を使うと楽です。ただ、私が試した時点では Safari では実装されていなかったので、@github/webauthn-json というポニフィルを代わりに使うとよさそうでした。
おわりに
個人的には、MacBook の Touch ID をパスワードの代わりに使っているとすごく快適に感じるので、オンラインシステムでもユーザーにこの快適さを提供したいな、と思います。パスキーをいろんなところで使っていけるといいですね。
