30,088 測定値

Web アプリケーションで顔認識を介してユーザーを認証する方法

に Hrishikesh Pathak10m2022/07/22

長すぎる; 読むには

顔認証は、Web アプリケーションの非常に重要な側面です。顔認識を使用してユーザーを認証する方法を示すために、単純なアプリケーションを構築しています。顔認識は、従来の認証手段よりも高速です。顔認証の最も重要な機能は、ソーシャルプラットフォームでのなりすましを防止できることで、多くの人が誰かになりすまして偽のアカウントを作成します。顔認証技術の唯一の要件はデフォルトでカメラであり、唯一の要件はカメラの使用です。このプロジェクトには、プロジェクトについて知る必要があるすべてのビットとビットとすべての部分が含まれています。

Companies Mentioned

Coin Mentioned

featured image - Web アプリケーションで顔認識を介してユーザーを認証する方法

認証は、Web アプリケーションの非常に重要な側面です。ユーザーにサービスを提供したり、製品を販売したりする場合は、後で参照できるようにユーザーを追跡する必要があります。これはすべて、認証システムが整っている場合にのみ可能です。

しかし、仕事に適したツールを使用することも非常に必要です。以前は、電子メールとパスワードベースの認証が最も人気があり、広く使用されていました。しかし時が経つにつれ、OAuth と呼ばれる新しい概念が導入され、大規模な技術者が巨大なユーザーベースを獲得するようになりました。サイトの所有者として OAuth プロバイダーを信頼してユーザーを認証すると、OAuth プロバイダーはユーザーの詳細を提供します。

OAuth ベースの認証は、ユーザーにとってシンプルです。 OAuth プロバイダーで 1 つのアカウントを維持するだけでよく、このアカウントを使用して他のすべての Web サイトにログインできます。しかし、OAuth プロセスには常に信頼が関係しています。

しばらくして、パスワードレス認証が登場しました。このプロセスでは、ユーザー名または電子メールを入力すると、リンクがメールで送信されます。リンクをブラウザに貼り付けると、自動的に認証され、ログインされます。パスワードを使用しない認証の最も一般的な例は、マジックリンクの送信をクリックしてhackernoon.comにログインする場合です。

人工知能 (AI) と機械学習 (ML) の進歩により、顔認識技術は非常に人気が高まっています。時間が経つにつれて、データセットが大きくなるにつれて、AI モデルの精度も向上します。最近では、顔認識技術を使用して、Web アプリケーションでユーザーを認証することもできます。

この記事では、顔認識を使用してユーザーを認証する方法を示すために、簡単なアプリケーションを作成します。このプロセスでは、FaceIO API を使用します。

顔認証ベースの認証が必要な理由

顔認識の必要性は多岐にわたります。ここでいくつかのポイントを簡潔にまとめようとしています。記事を最後まで読んで、完全な概念の理解と詳細な実装のチュートリアルを取得してください。

従来の方法よりも高速: 顔認証方法は、従来の認証方法よりも非常に高速です。ボタンをクリックして認証プロセスを開始するだけで、数ミリ秒以内に完了します。従来の電子メールパスワードベースの方法では、詳細を 1 行ずつ追加する必要があります。ログインに成功すると、キャプチャが表示されることがあります。なんていらいらするのでしょう。
特殊なハードウェアを必要としない: 顔認証技術の唯一の要件はカメラです。現在、すべてのスマートフォンにはデフォルトでカメラが搭載されています。すべてのデスクトップには、ある種の Web カメラも搭載されています。したがって、ユーザーはこのサービスを使用するために特別なハードウェアを必要としません。
ソーシャルプラットフォームでのなりすましを減らす: 顔認証の最も重要な機能は、なりすましを防止できることです。ソーシャルプラットフォームでは、多くの人が誰かになりすまして偽のアカウントを作成します。偽のアカウント所有者が何らかのデジタル犯罪を犯した場合、これは非常に危険です。顔認識の助けを借りて、ソーシャルプラットフォームは、誰かがアクセスしようとしているアカウントが実際にそのアカウントに属しているかどうかを認識できます。
ボットと自動化されたスクリプトを減らす: ボットと自動化されたスクリプトが導入され、反復的なタスクをなくすことができます。しかし、人々はそれらを別の方法で使用して、他の人にスパムを送りました.デジタルライフの中で、気付かない、または気付いていないボットや自動化されたスクリプトに毎日出くわします。これを防ぐために、一部の Web サイトではキャプチャを使用しています。顔認識を使用すると、ボットには認証する顔がないため、この問題も解決できます 😄.
プライバシー重視: プライバシーは、私たち全員にとって非常にデリケートなトピックです。誰かがあなたの顔データを使用して認証するように頼むと、私たちは皆少し心配になります.ただし、このチュートリアルでは FaceIO を使用しているため、認証プロセスは完全にエンドツーエンドで暗号化されます。バックエンドでは、顔の特徴のハッシュのみを保存します。 GDPR と CCPA に完全に準拠しています。そのため、データを安全に保管することを信頼できます。

顔認証プロジェクトを作る

次に、顔認証 Web アプリケーションを作成します。このプロジェクトには、Web アプリケーションに顔認識ベースの認証を実装する方法について知っておく必要があるすべての要素とすべてが含まれています。

そのプロセスを順を追って説明しています。完全なソースコードはこちらから入手できます。先に進むために、必ず無料のAPI キーを取得してください。

必要な依存関係のインストール

空のディレクトリを作成し、その中にindex.htmlファイルを作成します。別の CSS ファイルを追加することもできますが、簡単にするために、必要最小限にとどめます。

開発に VSCode を使用している場合は、ライブサーバーを使用して静的ファイルを提供できます。

まず、 index.html内に、この基本的な HTML マークアップを追加します。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>

FaceIO は、AI モデルと対話するための非常に便利な JavaScript ライブラリを提供します。これにより、ほんの数行のコードを使用して顔認識機能を実装できるようになり、私たちの生活はとても楽になります。 FaceIO JavaScript ライブラリを追加するには、HTML ドキュメントの body タグ内で CDN (コンテンツ配信ネットワーク) を使用します。

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

ここで、ファイルindex.jsを作成し、FaceIO CDN の後に body タグ内でファイルをリンクします。

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

次に、開発プロセスを容易にする 2 つのヘルパー関数を作成しましょう。 1 つはユーザーの登録用 (サインアップ機能など) で、もう 1 つは認証用 (ログイン機能など) です。

ユーザーの登録

FaceIO が提供する JavaScript ライブラリにより、ユーザーの登録は非常に簡単です。 HTML マークアップ内にid="enroll"のボタンを追加します。 getElementbyIDメソッドを使用して、javascript ファイル内のこのボタンにアクセスします。

ここで、 index.js内の FaceIO オブジェクトを初期化します。 FaceIO プロジェクトのパブリック ID を追加する必要があります。プロジェクトダッシュボードに一覧表示されているパブリック ID を取得できます。

 const faceio = new faceIO("<Your Public ID here");

登録ボタンにイベントリスナーを追加しましょう。誰かがボタンをクリックすると、faceIO オブジェクトの enroll メソッドが実行されます。この登録方法は、さまざまなオプションのパラメーターを取ります。

localeは、ユーザーのローカル言語です。
permissions timeoutは、ユーザーがカメラへのアクセスを許可するまで待機する秒数に対応します。
termsTimeoutは、ユーザーが FaceIO の利用規約に同意するまで待機する秒数です。
idleTimeoutは、顔を認識しようとしている間に待機する合計秒数です。
replyTimeoutは、処理された顔データを FaceIO ノードから受信するまで待機する秒数です。
userConcentは、ユーザーが自分の顔をスキャンすることに同意するかどうかを表すブール値です。ユーザーからすでに同意を得ている場合は、値をtrueに設定できます。
payload : 登録関数内で、選択したペイロードを追加できます。ペイロードはキー値オブジェクトである必要があります。このペイロード機能を使用して、電子メールアドレスまたはユーザーに関連するその他の情報を添付できます。

私たちの場合、登録関数は次のようになります。

 enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "[email protected]", pin: "12345", }, }); console.log(` Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age}`); });

この機能を実行すると、ユーザーの前にポップアップが表示されます。このポップアップには利用規約が含まれています。ユーザーが利用規約に同意すると、カメラへのアクセスが求められます。ユーザーがカメラへのアクセスを許可すると、FaceIO は顔をスキャンします。

FaceIO モデルは、ユーザーを他のユーザーと区別する独自の顔の特徴を探します。完了したら、顔データに添付されている PIN を追加する必要があります。この PIN はユーザーにとって非常に重要であり、安全な場所に保管してください。

これらの手順がすべて完了すると、FaceIO はuserInfoオブジェクトをユーザーに返します。このオブジェクトには、普遍的に一意の識別子であるユーザーの顔 ID、性別、および年齢が含まれています。性別と年齢は、AI モデルによって予測されるため、あまり正確ではありません。

この faceID をバックエンドに保存できます。ユーザーがログインする場合、この faceID を照合してユーザーを認証できます。

ワークフロー中にエラーが発生した場合、FaceIO には広範なエラーメッセージのリストがあります。ユーザーがカメラへのアクセスを許可しない場合、 fioErrCode.PERMISSION_REFUSEDエラーがスローされます。

ユーザーが利用規約のポップアップに同意しない場合、 fioErrCode.TERMS_NOT_ACCEPTEDエラーがサーバーによってスローされます。

ユーザーの認証

認証フローを開始するには、HTML マークアップにid="authenticate"でボタンを追加します。 getElementbyIDメソッドを使用して、 index.js内のこのボタンにアクセスします。

ユーザーがこのボタンを押すと、認証フローが開始されます。認証機能は非常にシンプルです。

認証関数は、前のenroll()関数と同様に、 permissionTimeout 、 idleTimeout 、 replyTimeout 、およびlocaleパラメーターを受け取ります。コードは次のようになります。

 authenticate.addEventListener("click", async () => { let response = await faceio.authenticate({ locale: "auto", }); console.log(` Unique Facial ID: ${response.facialId} PayLoad: ${response.payload} `); });

ユーザーが認証ボタンを押すと、登録機能の場合と同様の画面がポップアップします。カメラへのアクセスを取得し、顔をスキャンします。スキャンすると、登録時に入力した PIN の入力を求められます。

正しい PIN を指定すると、FaceIO は登録プロセスで指定した FaceData とペイロードを返しました。

サーバーの faceID を照合することで、認証フローを再確認することもできます。

これで認証フローは完了です。メールパスワード認証フローを実装するよりも簡単であることがわかります。面倒な作業はすべて FaceIO サーバーとその AI モデルによって行われます。開発者はアプリケーションロジックを追加して、認証フローとそのエクスペリエンスを変更するだけです。

プライバシー機能

FaceIO には、堅牢なプライバシー保護システムがあります。それらのいくつかを挙げてみましょう。

GDPR および CCPA に準拠しています: FaceIO サービスは、GDPR および CCPA に完全に準拠しています。 GDPR は、一般データ保護規則の略です。これは 2018 年に採用され、すべての企業がユーザーの個人データとプライバシーを保護することを要求しています。

CCPAは、カリフォルニア州消費者保護法の略で、ユーザーがデータをより詳細に制御できるようにします.これらの地域で事業を行っている場合は、心配する必要はありません。
ハッシュのみを保存します: FaceIO は顔の特徴のハッシュのみを保存します。プレーンなデータは保存せず、最小限の情報しか保存しません。クライアント側のライブラリとウィジェットは、生体認証データを処理しません。すべてのプロセスはバックエンドで行われます。

よくある質問

FaceIO ブラウザは不可知ですか?

FaceIO は完全にブラウザーに依存しません。 chrome、firefox、safari など、どのブラウザでも実行できます。すべての処理はサーバーで行われるため、FaceIO を実行するにはカメラへのアクセスのみが必要です。

JavaScript を無効にしてプライバシーブラウザを使用している場合は、必ず有効にしてください。 FaceIO はサーバーと通信するために JavaScript を使用する必要があるためです。

モデルをゼロから構築することはできませんか?

はい、モデルをゼロから構築し、Web アプリに顔認証機能を実装できます。ただし、そのためには、人工知能と機械学習のプロセスを深く理解している必要があります。

ほとんどの Web 開発者はこのようなバックグラウンドを持っていないため、車輪を再発明するのではなく、他のサービスを使用して機能を実装することは賢明な方法です。

調査できる他のソリューションが市場に存在します。 1 つは AWS Rekognition です。このサービスは AWS によって提供され、FaceIO と非常によく似た動作をします。興味深いのは、FaceIO ダッシュボード内で AWS Rekognition を選択できることです。

はい、可能です。あなたは今、あなたが望むものを選んで、それを手に入れることができます.

公開 ID を非表示にする

コーディング部分でわかるように、FaceIO オブジェクトの開始時に公開 ID を指定する必要があります。必要に応じて、環境変数を使用して非表示にすることができます。フロントエンドフレームワークまたはビルドシステムを使用している場合は、ビルド時にこれらの値を動的に追加できます。

NextJS を使用している場合は、 .env.localファイルを使用して機密性の高い資格情報を保存できます。

フレームワークを使用していない場合は、Vite を使用できます。 Vite は環境変数をサポートしています。デプロイを高速化するために、バニラ js プロジェクトをビルドおよび圧縮します。 .envファイルを作成し、そこにすべての資格情報を入力するだけで完了です。 .envファイルを.gitignoreリストに入れることを忘れないでください。