FaceIO は、Web サイトやアプリが Web カメラを使用して顔で個人を認識できるようにするサービスです。
パスワードを入力したり指紋を使用したりする代わりに、ユーザーはカメラを見るだけで、アプリがユーザーを確認できます。
これは次の理由で役立ちます:
FaceIO には 2 つの主なアクションがあります:
FaceIO を使用するには、JavaScript ライブラリ (顔検出を行う特別なコード) を Web サイトに追加する必要があります。その方法は次のとおりです:
1.スクリプトを含めます:
FaceIO のライブラリを指すスクリプト タグを HTML ファイルに追加します:
<script src="https://cdn.faceio.net/fio.js"></script>
?このスクリプトにより、Web サイトで FaceIO の機能を使用できるようになります。
2.登録と認証のためのボタンを作成:
HTML に 2 つのボタンを追加します:
<button onclick="enrollNewUser()">Enroll New User</button> <button onclick="authenticateUser()">Authenticate User</button>
?ユーザーがこれらのボタンをクリックすると、登録 (顔を保存) または認証 (顔を確認) します。
新しいユーザーの顔を保存するプロセスは、登録と呼ばれます。その JavaScript コードは次のとおりです:
function enrollNewUser() {
const faceio = new faceIO("app-public-id"); // Replace with your app's ID
faceio.enroll({
locale: "en", // This sets the language to English
payload: {
email: "user@example.com" // Link this user's email or any other unique ID
}
}).then(userInfo => {
console.log("User enrolled successfully!");
console.log("User ID: " + userInfo.facialId);
console.log("Enrollment Date: " + userInfo.timestamp);
alert("Enrollment successful! Welcome, user.");
}).catch(err => {
handleError(err);
});
}
?♂️ このコードは何をしますか?
これは、ユーザーが顔を使用していると言う本人であるかどうかを確認する方法です:
<script src="https://cdn.faceio.net/fio.js"></script>
?♂️ このコードは何をしますか?
FaceIO で API キー (**アプリのパブリック ID とも呼ばれます) を取得するには、次の簡単な手順に従います。**
FaceIO にサインアップ:
新しいアプリケーションを作成します:
アプリのパブリック ID を検索します:
アプリのパブリック ID をコピーします:
例: JavaScript コードの「app-public-id」を実際のアプリのパブリック ID に置き換えます:
<button onclick="enrollNewUser()">Enroll New User</button> <button onclick="authenticateUser()">Authenticate User</button>
これで、アプリが FaceIO に接続され、顔認識機能を使用できるようになりました!
その前に、ライブサーバーで FaceIO を実行する方法を説明します。
ライブサーバーで実行中:
まず、node.js をコンピューターにインストールし、次に次のパッケージを FaceIO プロジェクトにインストールします。
<script src="https://cdn.faceio.net/fio.js"></script>
次に、次のコマンドで使用します:
<button onclick="enrollNewUser()">Enroll New User</button> <button onclick="authenticateUser()">Authenticate User</button>
これが vscode ターミナルのライブサーバーリンクです:
すべてが常にスムーズに進むわけではないため、エラーが発生した場合は対処する必要があります。これを行う関数は次のとおりです:
function enrollNewUser() {
const faceio = new faceIO("app-public-id"); // Replace with your app's ID
faceio.enroll({
locale: "en", // This sets the language to English
payload: {
email: "user@example.com" // Link this user's email or any other unique ID
}
}).then(userInfo => {
console.log("User enrolled successfully!");
console.log("User ID: " + userInfo.facialId);
console.log("Enrollment Date: " + userInfo.timestamp);
alert("Enrollment successful! Welcome, user.");
}).catch(err => {
handleError(err);
});
}
?♂️ このコードは何をしますか?
なぜこのコードをブラウザで通常のファイルとして開くのではなく、サーバー上で実行する必要があるのか疑問に思われるかもしれません。その理由は次のとおりです:
?? JavaScript とセキュリティ:
?️ FaceIO はサーバーと通信する必要があります:
FaceIO は、Web ベースの アプリケーション マネージャー を提供します。これは、アプリに関するすべてを制御できるダッシュボードのようなものです:
次の手順に従うことで、ユーザーが Web カメラを見るだけでログインできる Web サイトを作成できます。あなたはあなたの Web サイトを顔を認識する未来的なアプリに変え、面接官やクライアントを惹きつけるために、より使いやすく安全なものにしています!
この説明がお役に立てば幸いです! FaceIO の仕組みから設定、管理まですべてをカバーします。他にご質問がございましたら、お知らせください。
続きを読む: 6 か月でバックエンド開発者になるためのスキル (ロードマップ)
以上がWebサイトでパスワードレスの顔認証を実現！ (フェイシオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
