「自分のサイトに、ちょっと凝った仕組みを取り入れてみたい」
そう思ったことはありませんか？今回は、SFの世界のような「顔認証」を、JavaScriptだけで手軽に実装できる配布用キット「tf-face-auth-kit」をご紹介します。サーバー不要・無料で、あなたのサイトに新しい体験をプラスしてみましょう。
そもそも「顔認証キット」って何ができるの？
このキットは、PCやスマホのカメラを使って「画面の前にいるのが本人かどうか」を判別する仕組みをまとめたツールです。 例えば以下のような使い方ができます。
- 特定のボタンを押したときにカメラを起動し、照合を行う
- 本人だと確認できたときだけ、特別なコンテンツを表示する
- パスワードの代わりに「顔」を鍵にする（デモやポートフォリオに最適）
🚀 tf-face-auth-kit 3つの特徴
プライバシーへの配慮
解析はすべて利用者のブラウザ内で行われます。画像がサーバーへ送信されることはなく、安心して導入できます。
サーバー設定不要
特別なバックエンドは必要ありません。静的なHTMLサイトでも、このフォルダを置くだけで動作します。
一瞬で導入可能
専用スクリプトを読み込み、表示したい場所にタグを置くだけ。驚くほど簡単に設置が完了します。
導入ガイド：簡単3ステップ
自分の顔IDを登録
ツールで発行した「顔ID」をコピーし、キット内の `config.json` に貼り付けます。これが「鍵」となります。
"allowed_ids": [
"ここにコピーした顔IDを貼り付け"
]HTMLに記述
あとは自分のHTMLの好きな場所にタグを記述するだけです。
<!-- スクリプトの読み込み -->
<script src="tf-face-auth-kit/face-auth-kit.js"></script>
<!-- 表示させたい場所 -->
<div id="tf-face-auth"></div>高度なカスタマイズ
認証に成功したあと「別のページへ飛ばす」といった処理も簡単です。`face-auth-kit.js` を開くと一番下にカスタマイズ用のエリアが用意されています。
▼ JavaScriptイベントでも受け取れます
document.addEventListener('authSuccess', () => {
alert('ようこそ！本人確認が完了しました');
});おわりに
「顔認証」という一見難しそうな技術も、ブラウザの進化によってここまで手軽に扱えるようになりました。 ぜひ、あなたのポートフォリオやプロジェクトの「スパイス」として、モダンな体験を取り入れてみてください。