Webアプリ向け生体認証ログイン

FACEIO ウィジェットを使い、パスワード入力をブラウザー上の顔認証に置き換えます。ユーザーはライブ撮影でサインインし、バックエンドが返された Facial ID を検証します。ネイティブアプリや専用ハードウェアは不要です。ユーザージャーニー全体でのステップアップ検証については、Web アプリ向け生体認証を参照してください。

FACEIO Consoleでアプリケーションを作成し、APIを管理し、登録、認証、Facial IDイベント用のWebhooksを設定できます。

コンバージョンとセキュリティの両立

ブラウザー上の顔認証がログインフローをどのように変えるかを説明します。

パスワードログインでは、復旧や認証情報の管理が必要になることがあります。ブラウザー上の生体認証ログインは、パスワード入力をライブ顔認証に置き換えながら、セッションの制御をバックエンドに残します。

ログイン時の負担を軽減

カメラを見るだけのフローは、パスワード忘れ、OTPメッセージの遅延、フォームの再入力といった離脱要因を減らせます。再訪ユーザーの利用が重要なアプリでは、より速いログインがセッション完了率の向上につながります。

認証情報への攻撃を低減

生体認証ログインでパスワード入力を置き換えると、盗まれた認証情報や転送されたOTPコードだけでは、そのログインフローを完了できません。顔認証では新しい撮影を行い、バックエンドが返された結果と独自のアカウントルールに基づいてセッションを発行するか判断します。

パスワード欄をカメラによる認証チェックに置き換えることで、アプリのサインインを速くし、共有シークレットへの依存を減らせます。

カメラ対応ブラウザーで利用可能

従来、生体認証の導入には専用センサーやネイティブアプリ基盤が必要で、管理対象デバイスや制御された環境に展開が限られていました。

FACEIOは、fio.js SDKを使用してブラウザー上で顔認証を提供します。ユーザーには、対応する最新ブラウザーと標準的な前面カメラが必要です。ネイティブアプリのラッパー、ブラウザープラグイン、ハードウェアトークン、専用の生体認証センサーは必要ありません。

Chrome デスクトップとモバイル
Safari iOSとmacOS
Firefox デスクトップとモバイル
Edge WindowsとmacOS

ミドルレンジの Android スマートフォンでもノートパソコンでも、ブラウザーで同じ生体認証ログインフローを利用できます。実装の詳細は統合ガイドとスタートガイドを参照してください。

UI変更を最小限にした統合

既存のログインページとセッション基盤に、生体認証ログインを追加できます。fio.js SDKはフロントエンドで動作し、返されたFacial IDは、登録時に指定したpayloadを介してユーザーレコードに紐付けられます。

1 埋め込みと初期化

<!-- SDKを読み込む -->
<script src="https://cdn.faceio.net/fio.js"></script>

<!-- 初期化 -->
<script>
const faceio = new faceIO('app-id-here');
</script>

2 ログインボタンで起動

// パスワードと併用または置き換え
faceio.authenticate({ locale: 'auto' })
  .then((data) => {
    // バックエンドへ送信してセッションを発行
    sendToBackend(data.facialId, data.payload);
  })
  .catch((err) => handleError(err));

ウィジェットはブラウザー内で開き、カメラ権限、顔の撮影、ライブネスチェック、認証を処理します。バックエンドはFacial IDとpayloadを受け取り、該当するユーザーレコードに紐付け、アカウントルールを適用して、セッションを発行するか判断します。詳細はREST APIとWebhooksのバックエンドパターンを参照してください。

リスク管理とプラットフォームセキュリティ

カメラによる生体認証ログインは、写真、再生動画、合成メディアなどの一般的な回避攻撃に対抗できて初めて有効です。FACEIOは認証イベントでプラットフォーム側の対策を行いますが、サーバー側の検証とアカウントポリシーはアプリケーションの責任です。

  • ライブネス検出とアンチスプーフィング

    写真、印刷画像、動画や画面の再生、合成メディアによる試行に関連するライブネスと提示攻撃の指標を評価します。すべての試行を識別できる検出層はありません。本番環境の制御についてはセキュリティのベストプラクティスガイドをご覧ください。

  • Facial IDと生体認証ハッシュ

    アプリケーションが保存するのは返された Facial ID であり、顔の生データではありません。選択した顔認証エンジンは、アプリケーション所有者の設定、同意フロー、削除ポリシーに従って、復元できない生体認証ハッシュまたはアプリケーションインデックスを保存します。詳細はFacial IDとプライバシーのベストプラクティスを参照してください。

  • サーバー側検証とレート制限

    バックエンドは返されたFacial IDをユーザーレコードに紐付け、独自のセッションルールと認可ルールを適用します。プライベートREST APIキーはサーバー側で管理してください。プラットフォームのレート制御と、デフォルトで有効なPIN Code検証により、反復的または不審な認証試行に追加のチェックを適用できます。

ステップアップ認証

金融取引や権限昇格など、標準ログインに加えて認証チェックが必要な操作では、アプリケーションからauthenticate()をステップアップチェックとしてもう一度呼び出せます。生体認証チェックを必要な箇所に適用し、標準のセッション処理は変更しません。ポリシーの例については、生体認証モデルを参照してください。

生体認証ログインが最も効果を発揮する場面

生体認証ログインは、ブラウザーからカメラにアクセスできるWebアプリに追加できます。パスワード入力や再利用可能な認証情報への依存を減らしたい場合に検討できます。

SaaSプラットフォーム

頻繁に利用するユーザーが多いサービスでは、ログイン速度が日々の利用に直結します。顔認証ログインはパスワード入力の負担を減らし、共有アカウントの悪用を難しくします。詳しくはSaaS と Web アプリのパターンを参照してください。

フィンテックと銀行

金融アカウントへのログインでパスワードへの依存を減らし、指定した操作の前にバックエンドから新しい顔認証を要求できます。詳しくはフィンテック向け顔認証フローを参照してください。

医療ポータル

患者のデバイスにハードウェアトークン、専用の生体認証センサー、ネイティブアプリを要求せず、ポータルへのアクセスに顔認証を追加できます。認可ルールとコンプライアンス要件は、医療機関が引き続き管理します。

Eコマース

再訪ユーザーのログインに顔認証を使用するか、特定の高額操作の前に新しいキャプチャを要求します。いつ認証を求め、処理を続行するかはバックエンドが決定します。詳しくはE コマースのリスク管理を参照してください。

業界や導入環境に関する質問は、コミュニティフォーラムとサポートチームをご利用ください。

Webアプリケーションに生体認証ログインを追加

FACEIO アプリケーションを作成し、Public ID をコピーして fio.js を読み込み、生体認証ログインの結果をバックエンドのセッションフローに接続します。

標準ブラウザーのカメラ
フレームワーク非依存SDK
サーバー側検証