symisc · February 7, 2025 02:54 · symisc · Jul 30, 2022 · symisc · Jun 9, 2023
diff --git a/faceio_integration_boilerplate.html b/faceio_integration_boilerplate.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>FACEIO Integration Boilerplate</title>
 <style>
 	.container {
 		text-align: center;
 	}
 	button {
 		padding: 10px 20px;
 		font-size: 18px;
 	}
 </style>
 </head>
 <body>
 <div class="container">
 	<h1>FACEIO Integration Boilerplate</h1><br>
 	<button onclick="enrollNewUser()" title="Enroll a new user on this FACEIO application">Enroll New User</button>
 	<button onclick="authenticateUser()" title="Authenticate a previously enrolled user on this application">Authenticate User</button>
 </div>
 <div id="faceio-modal"></div>
 <script src="https://cdn.faceio.net/fio.js"></script>
 <script type="text/javascript">
 	// Initialize the library first with your application Public ID.
 	// Grab your public ID from the Application Manager on the FACEIO console at: https://console.faceio.net/
 	const faceio = new faceIO("app-public-id"); // Replace with your application Public ID
 	function enrollNewUser() {
 		// Start the facial enrollment process
 		faceio.enroll({
 			"locale": "auto", // Default user locale
 			"userConsent": false, // Set to true if you have already collected user consent
 			"payload": {
 				/* The payload we want to associate with this particular user
 				* which is forwarded back to us on each of his future authentication...
 				*/
 				"whoami": 123456, // Example of dummy ID linked to this particular user
 				"email": "[email protected]"
 			}
 		}).then(userInfo => {
 			// User Successfully Enrolled!
 			alert(
 			`User Successfully Enrolled! Details:
 			Unique Facial ID: ${userInfo.facialId}
 			Enrollment Date: ${userInfo.timestamp}
 			Gender: ${userInfo.details.gender}
 			Age Approximation: ${userInfo.details.age}`
 			);
 			console.log(userInfo);
 			// handle success, save the facial ID, redirect to dashboard...
 			//
 			// faceio.restartSession() let you enroll another user again (without reloading the entire HTML page)
 		}).catch(errCode => {
 			// handle enrollment failure. Visit:
 			// https://faceio.net/integration-guide#error-codes
 			// for the list of all possible error codes
 			handleError(errCode);
 			
 			// If you want to restart the session again without refreshing the current TAB. Just call:
 			faceio.restartSession();
 			// restartSession() let you enroll the same or another user again (in case of failure) without refreshing the entire page.
 		});
 	}
 	function authenticateUser() {
 		// Start the facial authentication process (Identify a previously enrolled user)
 		faceio.authenticate({
 			"locale": "auto" // Default user locale
 		}).then(userData => {
 			console.log("Success, user recognized")
 			// Grab the facial ID linked to this particular user which will be same
 			// for each of his successful future authentication. FACEIO recommend
 			// that your rely on this ID if you plan to uniquely identify
 			// all enrolled users on your backend for example.
 			console.log("Linked facial Id: " + userData.facialId)
 			// Grab the arbitrary data you have already linked (if any) to this particular user
 			// during his enrollment via the payload parameter the enroll() method takes.
 			console.log("Associated Payload: " + JSON.stringify(userData.payload))
 			// {"whoami": 123456, "email": "[email protected]"} set via enroll()
 			//
 			// faceio.restartSession() let you authenticate another user again (without reloading the entire HTML page)
 			//
 		}).catch(errCode => {
 			// handle authentication failure. Visit:
 			// https://faceio.net/integration-guide#error-codes
 			// for the list of all possible error codes
 			handleError(errCode);
 			
 			// If you want to restart the session again without refreshing the current TAB. Just call:
 			faceio.restartSession();
 			// restartSession() let you authenticate the same user again (in case of failure) 
 			// without refreshing the entire page.
 			// restartSession() is available starting from the PRO plan and up, so think of upgrading your app
 			// for user usability.
 		});
 	}
 	function handleError(errCode) {
 		// Log all possible error codes during user interaction..
 		// Refer to: https://faceio.net/integration-guide#error-codes
 		// for a detailed overview when these errors are triggered.
 		switch (errCode) {
 			case fioErrCode.PERMISSION_REFUSED:
 				console.log("Access to the Camera stream was denied by the end user");
 				break;
 			case fioErrCode.NO_FACES_DETECTED:
 				console.log("No faces were detected during the enroll or authentication process");
 				break;
 			case fioErrCode.UNRECOGNIZED_FACE:
 				console.log("Unrecognized face on this application's Facial Index");
 				break;
 			case fioErrCode.MANY_FACES:
 				console.log("Two or more faces were detected during the scan process");
 				break;
 			case fioErrCode.FACE_DUPLICATION:
 				console.log("User enrolled previously (facial features already recorded). Cannot enroll again!");
 				break;
 			case fioErrCode.MINORS_NOT_ALLOWED:
 				console.log("Minors are not allowed to enroll on this application!");
 			break;
 			case fioErrCode.PAD_ATTACK:
 				console.log("Presentation (Spoof) Attack (PAD) detected during the scan process");
 				break;
 			case fioErrCode.FACE_MISMATCH:
 				console.log("Calculated Facial Vectors of the user being enrolled do not matches");
 				break;
 			case fioErrCode.WRONG_PIN_CODE:
 				console.log("Wrong PIN code supplied by the user being authenticated");
 				break;
 			case fioErrCode.PROCESSING_ERR:
 				console.log("Server side error");
 				break;
 			case fioErrCode.UNAUTHORIZED:
 				console.log("Your application is not allowed to perform the requested operation (eg. Invalid ID, Blocked, Paused, etc.). Refer to the FACEIO Console for additional information");
 				break;
 			case fioErrCode.TERMS_NOT_ACCEPTED:
 				console.log("Terms & Conditions set out by FACEIO/host application rejected by the end user");
 				break;
 			case fioErrCode.UI_NOT_READY:
 				console.log("The FACEIO Widget could not be (or is being) injected onto the client DOM");
 				break;
 			case fioErrCode.SESSION_EXPIRED:
 				console.log("Client session expired. The first promise was already fulfilled but the host application failed to act accordingly");
 				break;
 			case fioErrCode.TIMEOUT:
 				console.log("Ongoing operation timed out (eg, Camera access permission, ToS accept delay, Face not yet detected, Server Reply, etc.)");
 				break;
 			case fioErrCode.TOO_MANY_REQUESTS:
 				console.log("Widget instantiation requests exceeded for freemium applications. Does not apply for upgraded applications");
 				break;
 			case fioErrCode.EMPTY_ORIGIN:
 				console.log("Origin or Referer HTTP request header is empty or missing");
 				break;
 			case fioErrCode.FORBIDDDEN_ORIGIN:
 				console.log("Domain origin is forbidden from instantiating fio.js");
 				break;
 			case fioErrCode.FORBIDDDEN_COUNTRY:
 				console.log("Country ISO-3166-1 Code is forbidden from instantiating fio.js");
 				break;
 			case fioErrCode.SESSION_IN_PROGRESS:
 				console.log("Another authentication or enrollment session is in progress");
 				break;
 			case fioErrCode.NETWORK_IO:
 			default:
 				console.log("Error while establishing network connection with the target FACEIO processing node");
 				break;
 		}
 	}
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FACEIO Integration Boilerplate</title>
	<style>
	.container {
	text-align: center;
	}
	button {
	padding: 10px 20px;
	font-size: 18px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>FACEIO Integration Boilerplate</h1><br>
	<button onclick="enrollNewUser()" title="Enroll a new user on this FACEIO application">Enroll New User</button>
	<button onclick="authenticateUser()" title="Authenticate a previously enrolled user on this application">Authenticate User</button>
	</div>
	<div id="faceio-modal"></div>
	<script src="https://cdn.faceio.net/fio.js"></script>
	<script type="text/javascript">
	// Initialize the library first with your application Public ID.
	// Grab your public ID from the Application Manager on the FACEIO console at: https://console.faceio.net/
	const faceio = new faceIO("app-public-id"); // Replace with your application Public ID
	function enrollNewUser() {
	// Start the facial enrollment process
	faceio.enroll({
	"locale": "auto", // Default user locale
	"userConsent": false, // Set to true if you have already collected user consent
	"payload": {
	/* The payload we want to associate with this particular user
	* which is forwarded back to us on each of his future authentication...
	*/
	"whoami": 123456, // Example of dummy ID linked to this particular user
	"email": "[email protected]"
	}
	}).then(userInfo => {
	// User Successfully Enrolled!
	alert(
	`User Successfully Enrolled! Details:
	Unique Facial ID: ${userInfo.facialId}
	Enrollment Date: ${userInfo.timestamp}
	Gender: ${userInfo.details.gender}
	Age Approximation: ${userInfo.details.age}`
	);
	console.log(userInfo);
	// handle success, save the facial ID, redirect to dashboard...
	//
	// faceio.restartSession() let you enroll another user again (without reloading the entire HTML page)
	}).catch(errCode => {
	// handle enrollment failure. Visit:
	// https://faceio.net/integration-guide#error-codes
	// for the list of all possible error codes
	handleError(errCode);

	// If you want to restart the session again without refreshing the current TAB. Just call:
	faceio.restartSession();
	// restartSession() let you enroll the same or another user again (in case of failure) without refreshing the entire page.
	});
	}
	function authenticateUser() {
	// Start the facial authentication process (Identify a previously enrolled user)
	faceio.authenticate({
	"locale": "auto" // Default user locale
	}).then(userData => {
	console.log("Success, user recognized")
	// Grab the facial ID linked to this particular user which will be same
	// for each of his successful future authentication. FACEIO recommend
	// that your rely on this ID if you plan to uniquely identify
	// all enrolled users on your backend for example.
	console.log("Linked facial Id: " + userData.facialId)
	// Grab the arbitrary data you have already linked (if any) to this particular user
	// during his enrollment via the payload parameter the enroll() method takes.
	console.log("Associated Payload: " + JSON.stringify(userData.payload))
	// {"whoami": 123456, "email": "[email protected]"} set via enroll()
	//
	// faceio.restartSession() let you authenticate another user again (without reloading the entire HTML page)
	//
	}).catch(errCode => {
	// handle authentication failure. Visit:
	// https://faceio.net/integration-guide#error-codes
	// for the list of all possible error codes
	handleError(errCode);

	// If you want to restart the session again without refreshing the current TAB. Just call:
	faceio.restartSession();
	// restartSession() let you authenticate the same user again (in case of failure)
	// without refreshing the entire page.
	// restartSession() is available starting from the PRO plan and up, so think of upgrading your app
	// for user usability.
	});
	}
	function handleError(errCode) {
	// Log all possible error codes during user interaction..
	// Refer to: https://faceio.net/integration-guide#error-codes
	// for a detailed overview when these errors are triggered.
	switch (errCode) {
	case fioErrCode.PERMISSION_REFUSED:
	console.log("Access to the Camera stream was denied by the end user");
	break;
	case fioErrCode.NO_FACES_DETECTED:
	console.log("No faces were detected during the enroll or authentication process");
	break;
	case fioErrCode.UNRECOGNIZED_FACE:
	console.log("Unrecognized face on this application's Facial Index");
	break;
	case fioErrCode.MANY_FACES:
	console.log("Two or more faces were detected during the scan process");
	break;
	case fioErrCode.FACE_DUPLICATION:
	console.log("User enrolled previously (facial features already recorded). Cannot enroll again!");
	break;
	case fioErrCode.MINORS_NOT_ALLOWED:
	console.log("Minors are not allowed to enroll on this application!");
	break;
	case fioErrCode.PAD_ATTACK:
	console.log("Presentation (Spoof) Attack (PAD) detected during the scan process");
	break;
	case fioErrCode.FACE_MISMATCH:
	console.log("Calculated Facial Vectors of the user being enrolled do not matches");
	break;
	case fioErrCode.WRONG_PIN_CODE:
	console.log("Wrong PIN code supplied by the user being authenticated");
	break;
	case fioErrCode.PROCESSING_ERR:
	console.log("Server side error");
	break;
	case fioErrCode.UNAUTHORIZED:
	console.log("Your application is not allowed to perform the requested operation (eg. Invalid ID, Blocked, Paused, etc.). Refer to the FACEIO Console for additional information");
	break;
	case fioErrCode.TERMS_NOT_ACCEPTED:
	console.log("Terms & Conditions set out by FACEIO/host application rejected by the end user");
	break;
	case fioErrCode.UI_NOT_READY:
	console.log("The FACEIO Widget could not be (or is being) injected onto the client DOM");
	break;
	case fioErrCode.SESSION_EXPIRED:
	console.log("Client session expired. The first promise was already fulfilled but the host application failed to act accordingly");
	break;
	case fioErrCode.TIMEOUT:
	console.log("Ongoing operation timed out (eg, Camera access permission, ToS accept delay, Face not yet detected, Server Reply, etc.)");
	break;
	case fioErrCode.TOO_MANY_REQUESTS:
	console.log("Widget instantiation requests exceeded for freemium applications. Does not apply for upgraded applications");
	break;
	case fioErrCode.EMPTY_ORIGIN:
	console.log("Origin or Referer HTTP request header is empty or missing");
	break;
	case fioErrCode.FORBIDDDEN_ORIGIN:
	console.log("Domain origin is forbidden from instantiating fio.js");
	break;
	case fioErrCode.FORBIDDDEN_COUNTRY:
	console.log("Country ISO-3166-1 Code is forbidden from instantiating fio.js");
	break;
	case fioErrCode.SESSION_IN_PROGRESS:
	console.log("Another authentication or enrollment session is in progress");
	break;
	case fioErrCode.NETWORK_IO:
	default:
	console.log("Error while establishing network connection with the target FACEIO processing node");
	break;
	}
	}
	</script>
	</body>
	</html>