Webサイトでパスワードレスの顔認証を実現！ (フェイシオ)-jsチュートリアル-php.cn

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

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

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

Passwordless Facial Authentication on Websites! (FACEIO)

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

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

FaceIO の仕組み

Passwordless Facial Authentication on Websites! (FACEIO)

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

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

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

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

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

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

ログイン後にコピー

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

Passwordless Facial Authentication on Websites! (FACEIO)

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

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

ログイン後にコピー

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

Passwordless Facial Authentication on Websites! (FACEIO)

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

新しいユーザーの顔を保存するプロセスは、登録と呼ばれます。その 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 とも呼ばれます) を取得するには、次の簡単な手順に従います。**

FaceIO にサインアップ:
- まだアカウントをお持ちでない場合は、FaceIO Web サイトにアクセスしてアカウントにサインアップします。
- 新しいアカウントでログインします。
新しいアプリケーションを作成します:
- ログインしたら、ダッシュボードに移動します。
- 「新しいアプリケーションの作成」をクリックします。
- アプリの名前や説明などの必要な詳細を入力し、「作成」 をクリックします。

Passwordless Facial Authentication on Websites! (FACEIO)

アプリのパブリック ID を検索します:
- アプリを作成すると、ダッシュボードの「アプリケーション」セクションにそのアプリが表示されます。
- ここに、アプリのパブリック ID があります。これは、Web サイトを FaceIO に接続するために JavaScript コードで使用する API キーです。
アプリのパブリック ID をコピーします:
- アプリのパブリック ID の横にある コピーアイコン をクリックしてコピーします。
- これで、このキーをコード内の「app-public-id」と書かれている場所に貼り付けることができます。

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

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

ログイン後にコピー

Passwordless Facial Authentication on Websites! (FACEIO)

これで、アプリが 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>

ログイン後にコピー

Passwordless Facial Authentication on Websites! (FACEIO)

次に、次のコマンドで使用します:

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

ログイン後にコピー

これが vscode ターミナルのライブサーバーリンクです:

Passwordless Facial Authentication on Websites! (FACEIO)

エラーの処理?

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

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 サーバーが必要な理由は何ですか? ?

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

?‍? JavaScript とセキュリティ:
- JavaScript コードはブラウザー (クライアント側) で実行されます。ただし、セキュリティ上の理由から、送信元のサーバー以外のサーバーと直接通信することはできません。
- これは、同一生成元ポリシーと呼ばれます。開いていない Web サイトからデータがアクセスされるのを防ぎます。
?️ FaceIO はサーバーと通信する必要があります:
- 顔を登録または認証すると、FaceIO ライブラリはデータを比較または保存するために情報をサーバーに送信します。
- これを安全に行うには、コンピューター上のローカルファイルからではなく、適切な Web アドレス (http://yourwebsite.com など) から送信される必要があります。