웹사이트에서 비밀번호 없는 얼굴 인증! (FACEIO)

FaceIO란 무엇이며 왜 사용합니까? ?

FaceIO는 웹사이트와 앱이 웹캠을 이용해 사람의 얼굴을 인식할 수 있게 해주는 서비스입니다.

사용자는 비밀번호를 입력하거나 지문을 사용하는 대신 카메라를 바라보기만 하면 앱에서 사용자가 누구인지 확인할 수 있습니다.

다음과 같은 이유로 도움이 됩니다.

• ⚡ 비밀번호를 입력하는 것보다 빠릅니다.
• ? 해당 얼굴을 가진 사람만 앱에 접근할 수 있기 때문에 더욱 안전합니다.
• ? 사용자는 복잡한 비밀번호를 기억할 필요가 없습니다.

FaceIO는 어떻게 작동하나요?

FaceIO에는 두 가지 주요 작업이 있습니다.

1. ⛳ 사용자 등록: 처음으로 사용자의 얼굴을 녹화하는 것을 의미합니다.
2. ? 사용자 인증: 카메라 앞에 있는 사람이 앞서 등록한 사람과 동일한지 확인하는 것을 의미합니다.

웹 페이지에서 FaceIO 설정 ?️

FaceIO를 사용하려면 웹사이트에 JavaScript 라이브러리(얼굴 인식을 수행하는 특수 코드)를 추가해야 합니다. 방법은 다음과 같습니다.

1. 스크립트 포함:
FaceIO 라이브러리를 가리키는 스크립트 태그를 HTML 파일에 추가하세요.

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

? 이 스크립트를 사용하면 웹사이트에서 FaceIO의 기능을 사용할 수 있습니다.

2. 등록 및 인증을 위한 버튼 만들기:
HTML에 다음 두 개의 버튼을 추가하세요.

   <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() 함수를 호출하여 프로세스를 시작합니다.
• locale은 사용자가 선호하는 언어를 의미합니다.
• 페이로드는 사용자에 대한 추가 정보(예: 이메일 또는 ID)입니다.
• 정상이라면 "등록 성공!"이라는 메시지가 뜹니다. 사용자 ID, 날짜 등의 세부정보를 기록합니다.
• 작동하지 않을 경우에는 handlerError() 함수를 호출하여 무엇이 잘못되었는지 확인합니다.

사용자 인증 ?

다음은 사용자가 자신의 얼굴을 사용하고 있다고 말하는 사람인지 확인하는 방법입니다.

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

?‍♂️ 이 코드의 역할은 무엇인가요?

• FaceIO의 authenticate() 메소드를 사용합니다.
• 성공하면 메시지를 기록하고 사용자의 복귀를 환영합니다.
• 그렇지 않은 경우 문제를 이해하기 위해 handlerError()를 호출합니다.

FaceIO에서 API 키(**앱 공개 ID라고도 함)를 얻으려면 다음 간단한 단계를 따르세요.**

1. FaceIO에 가입:

   • 아직 계정이 없다면 FaceIO 웹사이트에 가서 회원가입을 하세요.
   • 새 계정으로 로그인하세요.

2. 새 애플리케이션 만들기:

   • 로그인 후 대시보드로 이동하세요.
   • "새 애플리케이션 만들기"를 클릭하세요.
   • 앱 이름, 설명 등 필수 세부정보를 입력한 다음 "만들기"를 클릭하세요.

1. 앱 공개 ID 찾기:

   • 앱을 만든 후 대시보드의 '애플리케이션' 섹션에 해당 앱이 표시됩니다.
   • 여기에서 앱 공개 ID를 찾을 수 있습니다. 이는 귀하의 웹사이트를 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 코드는 브라우저(클라이언트 측)에서 실행됩니다. 하지만 보안상의 이유로 원래 서버가 아닌 서버와 직접 통신할 수는 없습니다.
   • 이를 동일출처정책이라고 합니다. 귀하가 열지 않은 웹사이트에서 귀하의 데이터에 접근하지 못하도록 안전하게 보호합니다.

2. ?️ FaceIO는 서버와 통신해야 합니다:

   • 얼굴을 등록하거나 인증하면 FaceIO 라이브러리는 데이터를 비교하거나 저장하기 위해 서버로 정보를 보냅니다.
   • 이 작업을 안전하게 수행하려면 컴퓨터의 로컬 파일뿐만 아니라 올바른 웹 주소(예: http://yourwebsite.com)에서 가져와야 합니다.

FaceIO 콘솔로 앱을 관리하시나요?

FaceIO는 웹 기반 애플리케이션 관리자를 제공합니다. 이는 앱에 대한 모든 것을 제어할 수 있는 대시보드와 같습니다.

• ? 사용자 관리: 사용자를 추가, 편집, 삭제합니다.
• ? 그룹 관리: 사용자를 그룹에 넣어 더욱 효과적으로 관리할 수 있습니다.
• ? 권한 관리: 앱에서 누가 무엇을 할 수 있는지 결정하세요.
• ? 모니터링 분석: 앱을 사용하는 사용자 수와 앱과 상호 작용하는 방식을 확인하세요.
• ? 보안 기능: 다단계 인증과 같은 기능을 사용하여 앱을 더욱 안전하게 만드세요.

핵심 내용 요약 ♻️

1. FaceIO는 웹사이트에서 얼굴 인식을 통해 사용자를 인식하여 더 빠르고 안전하게 로그인할 수 있도록 도와줍니다.
2. FaceIO를 사용하려면 JavaScript 라이브러리를 포함하고, 버튼을 생성하고, 사용자 등록 및 인증을 위한 기능을 설정해야 합니다.
3. 오류 처리는 문제가 발생했을 때 사용자를 안내하는 데 중요합니다.
4. 브라우저 보안 규칙을 우회하고 FaceIO 서버와 제대로 통신하려면 HTTP 서버가 필요합니다.
5. 애플리케이션 관리자를 사용하면 사용자, 설정, 보안을 제어할 수 있습니다.

다음 단계를 따르면 사용자가 웹캠을 보기만 해도 로그인할 수 있는 웹사이트를 만들 수 있습니다! 귀하의 웹사이트를 얼굴을 인식하는 미래 지향적인 앱으로 바꾸고 면접관이나 고객의 관심을 끌 수 있도록 더욱 사용자 친화적이고 안전하게 만들고 있습니다!

---

이 설명이 도움이 되었기를 바랍니다! FaceIO의 작동 방식부터 설정 및 관리까지 모든 내용을 다룹니다. 더 궁금한 점이 있으면 알려주세요!

자세히 보기: 6개월 안에 백엔드 개발자가 되기 위한 기술(로드맵)

위 내용은 웹사이트에서 비밀번호 없는 얼굴 인증! (FACEIO)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!