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

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

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

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

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

FaceIO の仕組み

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

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

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

FaceIO を使用するには、JavaScript ライブラリ (顔検出を行う特別なコード) を Web サイトに追加する必要があります。その方法は次のとおりです:

1.スクリプトを含めます:
FaceIO のライブラリを指すスクリプト タグを HTML ファイルに追加します:

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

?このスクリプトにより、Web サイトで FaceIO の機(jī)能を使用できるようになります。

2.登録と認(rèn)証のためのボタンを作成:
HTML に 2 つのボタンを追加します:

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

?ユーザーがこれらのボタンをクリックすると、登録 (顔を保存) または認(rèn)証 (顔を確認(rèn)) します。

ユーザーを登録しますか?

新しいユーザーの顔を保存するプロセスは、登録と呼ばれます。その 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() 関數(shù)を呼び出してプロセスを開始します。
• ロケール は、ユーザーが好む言語を意味します。
• ペイロード は、ユーザーに関する追加情報(bào) (電子メールや ID など) です。
• 正常に動(dòng)作すると、「登録が成功しました!」というメッセージが表示されます。ユーザーの ID や日付などの詳細(xì)をログに記録します。
• 機(jī)能しない場合は、handleError() 関數(shù)を呼び出して、何が問題だったかを確認(rèn)します。

ユーザーを認(rèn)証していますか?

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

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

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

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

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

1. FaceIO にサインアップ:

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

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

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

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

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

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

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

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

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

これで、アプリが FaceIO に接続され、顔認(rèn)識(shí)機(jī)能を使用できるようになりました!

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

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

• FaceIO では、JavaScript ファイルが file:// URL (ローカル ファイル) からではなく、ライブ HTTP サーバーから提供される必要があります。
• HTML ファイルがサーバー上で実行されていることを確認(rèn)してください。 VS Code の Live Server 拡張機(jī)能や 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 ターミナルのライブサーバーリンクです:

エラーの処理?

すべてが常にスムーズに進(jìn)むわけではないため、エラーが発生した場合は対処する必要があります。これを行う関數(shù)は次のとおりです:

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

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

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

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

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

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

重要なポイントのまとめ ??

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

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

---

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

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

以上がWebサイトでパスワードレスの顔認(rèn)証を?qū)g現(xiàn)！ (フェイシオ)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。