Webサイトでパスワードレスの顔認証を実現！ (フェイシオ)

FaceIO とは何ですか?なぜ使用するのですか? ?

FaceIO は、Web サイトやアプリが Web カメラを使用して顔で個人を認識できるようにするサービスです。

パスワードを入力したり指紋を使用したりする代わりに、ユーザーはカメラを見るだけで、アプリがユーザーを確認できます。

これは次の理由で役立ちます:

• ⚡ パスワードを入力するよりも高速です。
• ?その顔を持つ人だけがアプリにアクセスできるため、より安全です。
• ?ユーザーは複雑なパスワードを覚える必要はありません。

FaceIO の仕組み

FaceIO には 2 つの主なアクションがあります:

1. ⛳ ユーザーの登録: これは、ユーザーの顔を初めて記録することを意味します。
2. ?ユーザーの認証: カメラの前にいる人物が以前に登録した人物と同一であるかどうかを確認することを意味します。

Web ページで FaceIO をセットアップする ?️

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);
    });
}

?‍♂️ このコードは何をしますか?

• FaceIO から enroll() 関数を呼び出してプロセスを開始します。
• ロケール は、ユーザーが好む言語を意味します。
• ペイロード は、ユーザーに関する追加情報 (電子メールや ID など) です。
• 正常に動作すると、「登録が成功しました!」というメッセージが表示されます。ユーザーの ID や日付などの詳細をログに記録します。
• 機能しない場合は、handleError() 関数を呼び出して、何が問題だったかを確認します。

ユーザーを認証していますか?

これは、ユーザーが顔を使用していると言う本人であるかどうかを確認する方法です:

   <script src="https://cdn.faceio.net/fio.js"></script>

?‍♂️ このコードは何をしますか?

• FaceIO のauthenticate() メソッドを使用します。
• 成功すると、メッセージを記録し、ユーザーの復帰を歓迎します。
• そうでない場合は、handleError() を呼び出して問題を理解します。

FaceIO で API キー (**アプリのパブリック ID とも呼ばれます) を取得するには、次の簡単な手順に従います。**

1. FaceIO にサインアップ:

   • まだアカウントをお持ちでない場合は、FaceIO Web サイトにアクセスしてアカウントにサインアップします。
   • 新しいアカウントでログインします。

2. 新しいアプリケーションを作成します:

   • ログインしたら、ダッシュボードに移動します。
   • 「新しいアプリケーションの作成」をクリックします。
   • アプリの名前や説明などの必要な詳細を入力し、「作成」 をクリックします。

1. アプリのパブリック ID を検索します:

   • アプリを作成すると、ダッシュボードの「アプリケーション」セクションにそのアプリが表示されます。
   • ここに、アプリのパブリック ID があります。これは、Web サイトを FaceIO に接続するために JavaScript コードで使用する API キーです。

2. アプリのパブリック ID をコピーします:

   • アプリのパブリック ID の横にある コピー アイコン をクリックしてコピーします。
   • これで、このキーをコード内の「app-public-id」と書かれている場所に貼り付けることができます。

例: JavaScript コードの「app-public-id」を実際のアプリのパブリック ID に置き換えます:

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

これで、アプリが FaceIO に接続され、顔認識機能を使用できるようになりました!

その前に、ライブサーバーで FaceIO を実行する方法を説明します。

ライブサーバーで実行中:

• FaceIO では、JavaScript ファイルが file:// URL (ローカル ファイル) からではなく、ライブ HTTP サーバーから提供される必要があります。
• HTML ファイルがサーバー上で実行されていることを確認してください。 VS Code の Live Server 拡張機能や Node.js などのツールを使用できます。

まず、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);
    });
}

?‍♂️ このコードは何をしますか?

• エラー コードを取得し、それを特定のメッセージと照合します。
• たとえば、ユーザーがカメラへのアクセスを許可していない場合、カメラを有効にする必要があることが通知されます。
• 各エラーケースは、ユーザーが何が問題で、次に何をすべきかを理解するのに役立ちます。

FaceIO に HTTP サーバーが必要な理由は何ですか? ?

なぜこのコードをブラウザで通常のファイルとして開くのではなく、サーバー上で実行する必要があるのか​​疑問に思われるかもしれません。その理由は次のとおりです:

1. ?‍? JavaScript とセキュリティ:

   • JavaScript コードはブラウザー (クライアント側) で実行されます。ただし、セキュリティ上の理由から、送信元のサーバー以外のサーバーと直接通信することはできません。
   • これは、同一生成元ポリシーと呼ばれます。開いていない Web サイトからデータがアクセスされるのを防ぎます。

2. ?️ FaceIO はサーバーと通信する必要があります:

   • 顔を登録または認証すると、FaceIO ライブラリはデータを比較または保存するために情報をサーバーに送信します。
   • これを安全に行うには、コンピューター上のローカル ファイルからではなく、適切な Web アドレス (http://yourwebsite.com など) から送信される必要があります。

FaceIO コンソールを使用してアプリを管理しますか?

FaceIO は、Web ベースの アプリケーション マネージャー を提供します。これは、アプリに関するすべてを制御できるダッシュボードのようなものです:

• ?ユーザー管理: ユーザーを追加、編集、または削除します。
• ?グループ管理: ユーザーをグループに所属させて、より適切に管理します。
• ?権限管理: アプリ内で誰が何をできるかを決定します。
• ?分析のモニタリング: アプリを使用しているユーザーの数と、アプリとのやり取りを確認します。
• ?セキュリティ機能: 多要素認証などを使用してアプリをより安全にします。

重要なポイントのまとめ ♻️

1. FaceIO は、Web サイトが顔認識を使用してユーザーを認識するのに役立ち、ログインをより速く、より安全にします。
2. FaceIO を使用するには、JavaScript ライブラリを組み込み、ボタンを作成し、ユーザーの登録と認証のための機能を設定する必要があります。
3. エラー処理は、何か問題が発生したときにユーザーをガイドするために重要です。
4. ブラウザのセキュリティ ルールをバイパスし、FaceIO のサーバーと適切に通信するには、HTTP サーバーが必要です。
5. アプリケーション マネージャーは、ユーザー、設定、セキュリティの制御に役立ちます。

次の手順に従うことで、ユーザーが Web カメラを見るだけでログインできる Web サイトを作成できます。あなたはあなたの Web サイトを顔を認識する未来的なアプリに変え、面接官やクライアントを惹きつけるために、より使いやすく安全なものにしています!

---

この説明がお役に立てば幸いです! FaceIO の仕組みから設定、管理まですべてをカバーします。他にご質問がございましたら、お知らせください。

続きを読む: 6 か月でバックエンド開発者になるためのスキル (ロードマップ)

以上がWebサイトでパスワードレスの顔認証を実現！ (フェイシオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。