ホームページ ウェブフロントエンド jsチュートリアル Webサイトでパスワードレスの顔認証を実現! (フェイシオ)

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

Oct 26, 2024 am 06:12 AM

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

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

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

Passwordless Facial Authentication on Websites! (FACEIO)

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

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

FaceIO の仕組み

Passwordless Facial Authentication on Websites! (FACEIO)

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

  1. ⛳ ユーザーの登録: これは、ユーザーの顔を初めて記録することを意味します。
  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 とも呼ばれます) を取得するには、次の簡単な手順に従います。**

  1. FaceIO にサインアップ:

    • まだアカウントをお持ちでない場合は、FaceIO Web サイトにアクセスしてアカウントにサインアップします。
    • 新しいアカウントでログインします。
  2. 新しいアプリケーションを作成します:

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

Passwordless Facial Authentication on Websites! (FACEIO)

  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>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

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

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

  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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles