ログインページに FACEIO を追加する

既存の Web ログインページへ、明確な登録フロー、fio.js ウィジェット、バックエンドのアカウント処理、代替の復旧手段を備えた顔認証を追加します。

ナレッジセンターに戻る
FACEIO Engineering Team 更新

ログインページ統合の実装フロー

FACEIO は既存のアカウントシステムを置き換えずに追加できます。登録、認証、バックエンドのアカウント処理を分けて実装します。

カメラ撮影、ライブネス、PIN、ユーザー操作はブラウザウィジェットで処理し、最終的なアクセス判断はバックエンドで行います。

このガイドは既存のログインページを前提とします。最初から構築する場合は スタートガイド で FACEIO アプリを作成し、 FACEIO Console ↗から公開 App ID を取得してください。

実装手順

次の手順で FACEIO を追加します。各項目から関連リファレンスを確認できます。

  1. FACEIO アプリを作成する。 FACEIO Consoleを開いてアプリを作成し、公開 App ID をコピーします。この ID をブラウザの fio.js で使用します。
  2. fio.js SDK を読み込む。 ログインページと登録ページへ fio.js の script tag を追加します。顔撮影が必要なページだけで読み込んでください。
  3. 新規ユーザーを登録する。 アカウント作成と同意の後に enroll() を呼び出して顔を撮影し、 Facial IDを作成します。Facial ID をバックエンドのユーザーアカウントへ関連付けて保存します。
  4. 既存ユーザーを認証する。 authenticate() を顔ログインまたは追加認証で呼び出します。SDK は結果をブラウザへ返します。
  5. バックエンドでログインを完了する。 返された Facial ID と必要なコンテキストをバックエンドへ送り、対象アカウントへ関連付けてセッションと認可ルールを適用します。 CHECKFACIALID は Facial ID が登録中か確認する必要がある場合だけ使用します。
  6. エラーと代替手段を処理する。 fio.js エラーコード を処理し、再試行ガイドまたはパスワード、OTP、サポートなどの代替手段を提供します。

ログインページに表示する内容

新規ユーザー向け

製品ポリシーに応じて、アカウント作成後の任意または必須の手順として顔登録を提示します。カメラの前に同意を表示し、プライバシー情報へリンクします。

既存ユーザー向け

パスワードフォームの横または代わりに顔認証を表示します。“顔でログイン”など明確なラベルと、カメラや権限の問題に備えた代替手段を用意します。

UX パターンは顔認識ログインのベストプラクティスを参照してください。プライバシー通知、同意、導入計画については、導入チェックリストとプライバシーのベストプラクティスを使用してください。

バックエンドのアカウントとセッション

authenticate()が返す認証結果を受け取っても、アカウントの選択とセッションの発行はバックエンドで行います。

  1. 認証結果と必要なリクエストコンテキストをサーバーのエンドポイントで受信します。
  2. 返された Facial IDに関連付けられたアカウントを検索し、クライアントからのユーザー ID は使用しません。
  3. アカウント状態、テナント、要求された操作、その他のアプリケーション制御を確認します。
  4. ユーザーに関連付けた有効期間の短いセッショントークンを発行します。
  5. 日時、Facial ID、App ID、結果を記録し、検証メディア、顔画像、生体認証ハッシュは保存しません。

API チェックリスト、 REST API リファレンス、 Webhook ドキュメント、 セキュリティのベストプラクティス で詳細を確認してください。クライアント側の状態だけでアカウント選択やアクセス許可を行わないでください。

ログイン統合の開発者向けリソース

FACEIO ドキュメントでログインフロー、Facial IDs とアカウントの関連付け、Webhook、アプリ設定を確認します。

スタートガイド FACEIO アプリを設定し、Web プロジェクトに必要な ID を取得します。 統合ガイド 登録と認証を既存のログインページへ接続します。 開発者ガイド 認証結果をバックエンドのアカウント処理と復旧フローへ接続します。 REST API Facial IDs、payload、PIN、削除、バックエンド側の確認を管理します。 Webhooks 登録と認証のイベントをサーバーで受信します。 FACEIO Console App ID を作成し、ログインページの認証設定を管理します。

よくある質問

既存のパスワードログインを削除する必要がありますか？

いいえ。FACEIO は既存のログインと併用できます。顔認証を代替手段または追加要素として提供し、移行中はパスワードも維持できます。 Web アプリ向け生体認証ログイン の UX を参照してください。

FACEIO の追加にはどのくらいかかりますか？

クライアント側の統合はスタートガイドを使うと短時間で行えます。本番導入にはバックエンドのアカウントとセッション、エラー、復旧、同意、テストも必要です。公開前に導入チェックリストを確認してください。

fio.js はどのフレームワークに対応していますか？

fio.js は Vanilla JavaScript、React、Vue、Angular、Next.js、Nuxt、Svelte、Ember で使用できます。統合ガイドのフレームワーク別情報を参照してください。

カメラを利用できないユーザーにはどう対応しますか？

パスワード、OTP、サポートなどの代替手段を用意します。復旧手段を定めず、顔認証だけをアカウント復旧方法にしないでください。 ログインのベストプラクティス で詳しく説明しています。

関連ガイド

Web サイトに顔ログインを追加する

バックエンドで Facial ID をアカウントへ関連付け、セッションを発行するか判断します。セキュリティのベストプラクティス、プライバシーのベストプラクティス、導入チェックリストも参照し、FACEIO Console でアプリを作成して環境内でフローをテストしてください。

FACEIO Console を開く 始める