Created
October 5, 2022 05:04
-
-
Save hrishiksh/cc29a0ad0ed87eacb9b1c3225ae18944 to your computer and use it in GitHub Desktop.
FaceIO react tailwind
This file contains hidden or 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 handleRegister = async () => { | |
| try { | |
| let response = await faceio.enroll({ | |
| locale: "auto", | |
| payload: { | |
| email: "[email protected]", | |
| }, | |
| }); | |
| 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); | |
| } | |
| }; | |
| return ( | |
| <section className="w-full h-screen flex flex-col items-center justify-center"> | |
| <h1 className="font-sans font-bold text-xl mb-4"> | |
| Face Authentication by FaceIO | |
| </h1> | |
| <div className="flex flex-col justify-center items-center"> | |
| <button | |
| className="block px-4 py-2 outline-none bg-blue-500 rounded text-white mb-2" | |
| onClick={handleRegister} | |
| > | |
| register | |
| </button> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| export default App; |
This file contains hidden or 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 handleRegister = async () => { | |
| try { | |
| 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}`); | |
| } 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 className="w-full h-screen flex flex-col items-center justify-center"> | |
| <h1 className="font-sans font-bold text-xl mb-4"> | |
| Face Authentication by FaceIO | |
| </h1> | |
| <div className="flex flex-col justify-center items-center"> | |
| <button | |
| className="block px-4 py-2 outline-none bg-blue-500 rounded text-white mb-2" | |
| onClick={handleRegister} | |
| > | |
| register | |
| </button> | |
| <button | |
| className="block px-4 py-2 outline-none bg-blue-500 rounded text-white" | |
| onClick={handleLogIn} | |
| > | |
| Log-in | |
| </button> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| export default App; |
This file contains hidden or 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
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; |
This file contains hidden or 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"); | |
| }, []); | |
| } |
This file contains hidden or 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
| <body> | |
| <script src="https://cdn.faceio.net/fio.js"></script> | |
| <div id="root"></div> | |
| <script type="module" src="/src/main.jsx"></script> | |
| </body> |
This file contains hidden or 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
| /** @type {import('tailwindcss').Config} */ | |
| module.exports = { | |
| content: [ | |
| "./index.html", | |
| "./src/**/*.{js,ts,jsx,tsx}", | |
| ], | |
| theme: { | |
| extend: {}, | |
| }, | |
| plugins: [], | |
| } |
This file contains hidden or 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
| { | |
| "eventName":"String - Event Name", | |
| "facialId": "String - Unique Facial ID of the Target User", | |
| "appId": "String - Application Public ID", | |
| "clientIp": "String - Public IP Address", | |
| "details": { | |
| "timestamp": "Optional String - Event Timestamp", | |
| "gender": "Optional String - Gender of the Enrolled User", | |
| "age": "Optional String - Age of the Enrolled User" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment