Created
July 28, 2022 08:23
-
-
Save hrishiksh/bf76c98e05f6e85eb46d7e736bae351d to your computer and use it in GitHub Desktop.
FaceIO reactjs gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, | |
| *::before, | |
| *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: "Poppins", sans-serif; | |
| } | |
| section { | |
| height: 100vh; | |
| width: 100vw; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| button { | |
| border: none; | |
| background-color: rgb(97, 97, 255); | |
| padding: 10px 50px; | |
| border-radius: 5px; | |
| color: whitesmoke; | |
| margin-top: 20px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "./App.css"; | |
| import { useEffect } from "react"; | |
| function App() { | |
| let faceio; | |
| useEffect(() => { | |
| faceio = new faceIO("fioa414d"); | |
| }, []); | |
| const handleSignIn = async () => { | |
| try { | |
| let response = await faceio.enroll({ | |
| locale: "auto", | |
| payload: { | |
| email: "example@gmail.com", | |
| pin: "12345", | |
| }, | |
| }); | |
| console.log(` Unique Facial ID: ${response.facialId} | |
| Enrollment Date: ${response.timestamp} | |
| Gender: ${response.details.gender} | |
| Age Approximation: ${response.details.age}`); | |
| } catch (error) { | |
| console.log(error); | |
| } | |
| }; | |
| const handleLogIn = async () => { | |
| try { | |
| let response = await faceio.authenticate({ | |
| locale: "auto", | |
| }); | |
| console.log(` Unique Facial ID: ${response.facialId} | |
| PayLoad: ${response.payload} | |
| `); | |
| } catch (error) { | |
| console.log(error); | |
| } | |
| }; | |
| return ( | |
| <section> | |
| <h1>Face Authentication by FaceIO</h1> | |
| <button onClick={handleSignIn}>Sign-in</button> | |
| <button onClick={handleLogIn}>Log-in</button> | |
| </section> | |
| ); | |
| } | |
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>FaceIO auth</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" | |
| rel="stylesheet" | |
| /> | |
| </head> | |
| <body> | |
| <script src="https://cdn.faceio.net/fio.js"></script> | |
| <div id="root"></div> | |
| <script type="module" src="/src/main.jsx"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Friend, Thanks for the article and it helps. However, what @Archibeque was asking also is the faceIO that you get an error that it is not defined as below:
ERROR in [eslint]
src\App.jsx
Line 8:17: 'faceIO' is not defined no-undef
Search for the keywords to learn more about each error.
webpack compiled with 1 error and 1 warning