@richard.fadiora/liveness-detection 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +193 -0
- package/dist/index.es.js +4320 -452
- package/dist/index.umd.js +29 -7
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
# Liveness Detection Component
|
|
2
|
+
|
|
3
|
+
A React-based liveness detection component that performs randomized user challenges and verifies real-user presence via a backend anti-spoofing API.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 📌 Overview
|
|
8
|
+
|
|
9
|
+
This component strengthens identity verification by combining:
|
|
10
|
+
|
|
11
|
+
- Randomized challenge-response validation
|
|
12
|
+
- Strict timeout enforcement
|
|
13
|
+
- Backend spoof detection
|
|
14
|
+
- Callback-based integration for easy usage
|
|
15
|
+
|
|
16
|
+
It protects against:
|
|
17
|
+
|
|
18
|
+
- Presentation (photo) attacks
|
|
19
|
+
- Screen glare attacks
|
|
20
|
+
- Video replay/injection attacks
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## ⚙️ How It Works
|
|
25
|
+
|
|
26
|
+
### 1️⃣ Challenge Initialization
|
|
27
|
+
|
|
28
|
+
When the user clicks the **"Start Challenge"** button:
|
|
29
|
+
|
|
30
|
+
- The system randomly selects **3 challenges**
|
|
31
|
+
- The challenges are chosen from a fixed pool of 4:
|
|
32
|
+
|
|
33
|
+
- `Smile`
|
|
34
|
+
- `Blink`
|
|
35
|
+
- `Turn_Head`
|
|
36
|
+
- `Thumbs_Up`
|
|
37
|
+
|
|
38
|
+
- A timer starts immediately. If you do not pass the **duration** property, it will default to 60 seconds.
|
|
39
|
+
|
|
40
|
+
If the timer expires before completion:
|
|
41
|
+
- The session is terminated
|
|
42
|
+
- The user must restart the process manually
|
|
43
|
+
- No frames are sent to the backend
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
### 2️⃣ Challenge Execution
|
|
48
|
+
|
|
49
|
+
- Challenges are validated in real-time using webcam input.
|
|
50
|
+
- The next challenge only begins after the current one is successfully completed.
|
|
51
|
+
- All 3 challenges must be completed within the 60-second window.
|
|
52
|
+
|
|
53
|
+
If successful, the component proceeds to backend verification.
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
### 3️⃣ Backend Liveness Verification
|
|
58
|
+
|
|
59
|
+
After all challenges are completed:
|
|
60
|
+
|
|
61
|
+
- The component captures **5 frames** from the webcam.
|
|
62
|
+
- These frames are sent to the backend API defined by the `apiUrl` prop.
|
|
63
|
+
- The backend performs:
|
|
64
|
+
- Spoof detection
|
|
65
|
+
- Glare detection
|
|
66
|
+
- Video injection detection
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## ✅ Success & Failure Behavior
|
|
71
|
+
|
|
72
|
+
### If verification succeeds:
|
|
73
|
+
- The UI displays: **"Verification Passed"**
|
|
74
|
+
- The component triggers:
|
|
75
|
+
|
|
76
|
+
```js
|
|
77
|
+
onComplete(true)
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### If verification fails:
|
|
81
|
+
- The UI displays a failure message
|
|
82
|
+
- The component triggers:
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
onComplete(false)
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## 📦 Props
|
|
91
|
+
|
|
92
|
+
| Prop Name | Type | Required | Description |
|
|
93
|
+
|------------|----------------------------|----------|-------------|
|
|
94
|
+
| `apiUrl` | `string` | Yes | Backend endpoint used for liveness verification |
|
|
95
|
+
| `onComplete` | `(result: boolean) => void` | Yes | Callback fired after verification completes |
|
|
96
|
+
| `duration` | `int` | No | Used for setting maximum time for the challenges to be completed |
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 🧩 Usage Example
|
|
101
|
+
|
|
102
|
+
```jsx
|
|
103
|
+
import { LivenessSDK } from "./LivenessSDK";
|
|
104
|
+
|
|
105
|
+
function App() {
|
|
106
|
+
return (
|
|
107
|
+
<LivenessSDK
|
|
108
|
+
apiUrl="https://your-backend-api.com/liveness-check"
|
|
109
|
+
onComplete={(result) => {
|
|
110
|
+
if (result) {
|
|
111
|
+
console.log("User verified successfully");
|
|
112
|
+
} else {
|
|
113
|
+
console.log("Liveness verification failed");
|
|
114
|
+
}
|
|
115
|
+
}}
|
|
116
|
+
/>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export default App;
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## ⏳ Timeout Rules
|
|
126
|
+
|
|
127
|
+
- Maximum session duration: **60 seconds**
|
|
128
|
+
- If time expires:
|
|
129
|
+
- The challenge stops immediately
|
|
130
|
+
- The verification state resets
|
|
131
|
+
- User must click **Start Challenge** again
|
|
132
|
+
- Backend verification will NOT be triggered
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## 🔐 Security Architecture
|
|
137
|
+
|
|
138
|
+
This component uses a layered approach:
|
|
139
|
+
|
|
140
|
+
1. **Client-side active verification**
|
|
141
|
+
- Randomized challenge selection
|
|
142
|
+
- Real-time gesture detection
|
|
143
|
+
|
|
144
|
+
2. **Server-side passive verification**
|
|
145
|
+
- Frame-based spoof analysis
|
|
146
|
+
- Glare detection
|
|
147
|
+
- Video injection detection
|
|
148
|
+
|
|
149
|
+
3. **Strict session control**
|
|
150
|
+
- Timeout enforcement
|
|
151
|
+
- Restart requirement on failure
|
|
152
|
+
|
|
153
|
+
This multi-layer strategy reduces false positives and prevents replay-based attacks.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## 📊 Verification Criteria
|
|
158
|
+
|
|
159
|
+
A verification is considered successful only if:
|
|
160
|
+
|
|
161
|
+
- 3 randomly selected challenges are completed
|
|
162
|
+
- All 5 frames are successfully sent to the backend
|
|
163
|
+
- Backend confirms:
|
|
164
|
+
- No spoofing detected
|
|
165
|
+
- No glare detected
|
|
166
|
+
- Skin Texture is human
|
|
167
|
+
- No video injection detected
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## 🏗️ Integration Notes
|
|
173
|
+
|
|
174
|
+
- The component assumes webcam permissions are granted.
|
|
175
|
+
- The backend must accept 5 frames in the expected format.
|
|
176
|
+
- The `apiUrl` must be reachable from the client environment.
|
|
177
|
+
- Ensure CORS is properly configured on the backend.
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## 🚀 Ideal Use Cases
|
|
182
|
+
|
|
183
|
+
- KYC verification flows
|
|
184
|
+
- Identity onboarding systems
|
|
185
|
+
- Account recovery flows
|
|
186
|
+
- Secure login systems
|
|
187
|
+
- Financial or compliance-based applications
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## 👨💻 Maintainer
|
|
192
|
+
|
|
193
|
+
Maintained by Princeps Credit Systems Limited.
|