-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
194 lines (181 loc) · 7.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face login</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="coseclause.png" >
</head>
<body class="body">
<div class="center">
<form class="form">
<p class="title">Face login </p>
<p class="message">Signup now and get full access to our app. </p>
<div class="flex">
<label>
<input required="" placeholder="" type="text" class="input">
<span>Firstname</span>
</label>
<label>
<input required="" placeholder="" type="text" class="input">
<span>Lastname</span>
</label>
</div>
<label>
<input required="" placeholder="" type="email" class="input">
<span>Email</span>
</label>
<label>
<input required="" placeholder="" type="password" class="input">
<span>Password</span>
</label>
<label>
<input required="" placeholder="" type="password" class="input">
<span>Confirm password</span>
</label>
<button class="submit" onclick="enrollNewUser()" title="Enroll a new user on this FACEIO application">Enroll New User</button>
<button class="submit" onclick="authenticateUser()" title="Authenticate a previously enrolled user on this application">Authenticate User</button>
</form>
</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("fioa28b3"); // 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...
}).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 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 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()
}).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.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>