さわりだけ知るWebAuthn

2024/11/13に公開

対象

  • そもそもログイン機能の仕組みを知りたい人
  • WebAuthnの仕組みが知りたい人
    - WebAuthnを使った処理を実装したい人

認証・認可の違い

ログイン機能は、認証と認可という2つの機能によって成立しています。
つまり、パスワードによるログインも、Googleのアカウントを使ったログインも
この2つの機能によって成立しています。つまり、基礎です。

名称 意味
認証 通信相手が誰であるかの確認をとる
認可 通信相手に対して特定の権限を与える

認証・認可の例

コンビニでの酒類購入

区分 内容
認証 お酒を売る相手(客)が20歳以上であることを確認
認可 客がお酒を買うことを許可(認可)する

ログイン処理

区分 内容
認証 ログインしようとしたユーザーが、そのユーザ本人であることを確認
認可 本人しか見れないページにアクセスする権限を付与

WebAuthnとは?

概要

WebAuthnは、

公開鍵暗号を用いて強力な認証を可能にする資格情報管理APIの拡張機能で、パスワードレス認証や、SMSテキストを用いない安全な二要素認証を実現します[2]

というもの。
ちょっと待てぃ!資格情報管理APIってなんやねんってなると思うので、これも軽く触れます。

資格情報管理API(CredentialManagement API)は、公開鍵を扱うためのAPIです。公開鍵を扱う認証の機能を持つAPIであるWebAuthnは、資格情報管理APIに支えられて実現しているといっても過言ではないということです。

結局どういうものなの?

以下のような認証・認可の仕組みを提供する仕組みやAPIのことを指します

区分 内容
認可 公開鍵暗号の技術を用いた認証情報によってユーザ本人であることを確認
認証 何かしらの個人に関する情報の閲覧・変更権限などが与えられる(開発者の匙加減)

余談

デモページを触ってみよう

さて、このWebAuthnで構築されたログイン機能のデモのURLを貼ります
https://webauthn.io/
このページで、ユーザネームを入力して、Registerをクリックすると、
指紋認証か顔認証を求められると思います。
指紋認証か顔認証を終えて、Authenticateをクリックして、再度、Registerをクリックしたときと同じ方法で認証すると、You're logged in!と記載されているページにジャンプします。

また、別のデモページを見てみましょう。
https://webauthn.me/

サインアップとログインがどのような処理で行われているかが目で見てわかるので、
勉強目的でデモを触りたいならこっちの方をお勧めします。

脚注
  1. https://zenn.dev/tomokumo/articles/675e35e2b39ff2 ↩︎

  2. https://developer.mozilla.org/ja/docs/Web/API/Web_Authentication_API ↩︎

Discussion