🚀 How to implement Biometric Login with FaceOS Pro
Phase 1: Enrollment (Sign Up)

  - Create a FaceDescriptor (Text) field in your User data type.

  - On your Sign-Up page, start the camera.

  - Add a button "Scan Face".

  - Workflow: Run action Generate Descriptor.

  - Workflow (Event): When Descriptor Generated triggers, save the FaceOS Pro A's Descriptor Output to the Current User's FaceDescriptor field.

Phase 2: Recognition (Login)

  - On your Login page, use a Search to get all Users who have a FaceDescriptor (is not empty).

  - Workflow (Page Load): Run action Load Face Database.

  - Names: Search for Users's Name (List of Text)

  - Descriptors: Search for Users's FaceDescriptor (List of Text)

  - Start the camera.

  - Workflow (Event): When Person Recognized triggers:

  - Check FaceOS Pro A's Recognized Name.

  - Log the user in based on the name/ID match.

Phase 3: Analytics & Security

  - Audit Log: When Person Recognized triggers, run Take Snapshot. Save the Snapshot Base64 to an Image field in your database to keep a visual record of who logged in.

  - Targeting: Use the Detected Age and Detected Gender states to show conditional content (e.g., hide age-restricted products if Age < 18).


1. Setting up Privacy Mode (GDPR):

Enable the checkbox Privacy Mode in the element settings.

Result: The video feed will be replaced by a secure canvas. Detected faces are blurred or masked with a "Protected 🔒" icon, but you still receive Age, Gender, and Recognition data in the states. Perfect for analytics in public spaces.

2. Using Smart Guidance:

Create a Text Element on your page.

Set its data source to FaceOS A's Guidance Text.

Result: The user will see instructions like "Move Closer 🔍" or "Perfect! Hold still 📸".

You can also use the state Is Position Valid (yes/no) to disable your "Scan" button until the user is correctly positioned.

3. Enabling Auto-Capture:

Enable Enable Auto Capture in the element settings.

Workflow: Listen for the event Auto Capture Triggered. When this fires, the plugin has automatically taken a photo because the user was in the "Perfect" position with high confidence.

4. Tuning Recognition:

In the Load Face Database action, use the new Match Threshold input.

Set to 0.4 for strict security (Banking/Auth).

Set to 0.6 for general use.


Face/Touch ID instructions

Add Element: Drop the FaceOS Biometrics element onto your page (it’s invisible).

Setup Registration: Create a workflow for a "Register" button using the Register Biometrics action. This creates a secure credential on the user's device.

Setup Login: Use the Authenticate Biometrics action for your "Login" button.

Handle Results: Use the element's Events (Registered/Authenticated) to log the user in or save their Credential ID to your database.

HTTPS Requirement: WebAuthn only works over secure https:// connections. It will not trigger on plain http.


📖 Setup Instructions (Liveness & Anti-Fraud)
Step 1: Initialize the Camera

Place the FaceOS element on your page. Ensure Enable Emotions is set to Yes (required for the Smile challenge).

Use the action Start Camera (e.g., on Page Load or Button Click).

Step 2: Start a Liveness Challenge

Create a Bubble workflow triggered by the FaceOS - camera_started event.

Add the action Start Liveness Challenge.

Select a Challenge Type (smile, mouth_open, look_left, look_right) and set a Timeout (e.g., 8 seconds).

UI Tip: Add a Text element on your page displaying FaceOS's liveness_instruction to guide your user in real-time!

Step 3: Handle Success & Failure

Success: Create a workflow triggered by FaceOS - liveness_passed. Here you can trigger the next challenge, or use the Take Snapshot action to capture the verified user.

Failure: Create a workflow triggered by FaceOS - liveness_failed. Show an error message and provide a "Try Again" button that triggers the challenge action once more.

Step 4: Chaining Challenges (Pro KYC Flow)
To create a sequence (e.g., Right -> Left -> Smile):

Use a Custom State in Bubble (e.g., current_step as text).

Set current_step = right and start the "look_right" challenge.

In the liveness_passed event, add a condition: Only when current_step is right. Then, change the state to left and start the "look_left" challenge. Repeat until the final success!