Wix form to collect Pii data, with OTP sms verification

Ask the community
, , ,
1

I will build a website for a community on Wix, and i need to collect sensitive data from members like the national id number, so i am thinking of making a form to collect data but i need a sort of a security wall before leting website visitors accessing the form, i need to make sure that they are real people, so i am thinking of a solution like asking them to provide their phone number and then send them a one time code that they need to enter before they proceed to the form. How can i achieve this in Wix taking into consideration that i am not good at coding.

3

Well first of all, maybe you should just install the Wix-Members-Area, which will make sure that a person first has to register to your site and become a member.

Wouldn’t this already solve your problem ?

If not than your next step would be to generate a confirmation-process, like you already described above in your post by creting either a …

  1. CONFIRMATION-EMAIL

…or…

  1. CONFIRMATION-SMS

For the first one you will need to install/setup → Wix-Triggered-Emails and adding some more complex code onto your wix-website → not for beginners!!!

For the second one you could integrate some third-party-API, for example TWILIO and generate your SMS-CONFIRMATION-PROCESS…

For example…

Create a Verification Process

  1. Design the Verification Workflow:
  • Add an initial form where users input their phone number.
  • Use Wix Corvid (now Velo by Wix) to create a simple backend logic to handle verification.
  1. Add Custom Code:
  • Go to your Wix Editor and enable Velo by Wix (if not already enabled).
  • Add the custom code to handle the verification process. Here’s a basic outline of the code:

javascript

Code kopieren

// Import necessary modules
import {sendSMS} from 'backend/twilio'; // This would be a backend module you create to handle Twilio SMS

// Function to generate a random verification code
function generateVerificationCode() {
    return Math.floor(100000 + Math.random() * 900000).toString();
}

// Function to handle phone number submission
export function handlePhoneNumberSubmission(phoneNumber) {
    let verificationCode = generateVerificationCode();
    
    // Store the verification code temporarily
    wixStorage.local.setItem('verificationCode', verificationCode);

    // Send the verification code via SMS
    sendSMS(phoneNumber, verificationCode)
        .then(response => {
            console.log('SMS sent successfully');
        })
        .catch(error => {
            console.error('Error sending SMS:', error);
        });
}

// Function to verify the code entered by the user
export function verifyCode(inputCode) {
    let storedCode = wixStorage.local.getItem('verificationCode');
    return storedCode === inputCode;
}
  1. Backend Module for Twilio Integration:
  • Create a backend file (e.g., twilio.jsw) to handle communication with Twilio’s API.

javascript

Code kopieren

import {fetch} from 'wix-fetch';

export function sendSMS(phoneNumber, verificationCode) {
    const accountSid = 'your_twilio_account_sid';
    const authToken = 'your_twilio_auth_token';
    const fromPhoneNumber = 'your_twilio_phone_number';

    const url = `https://api.twilio.com/2010-04-01/Accounts/${accountSid}/Messages.json`;

    const data = {
        To: phoneNumber,
        From: fromPhoneNumber,
        Body: `Your verification code is: ${verificationCode}`
    };

    const headers = {
        'Authorization': 'Basic ' + btoa(`${accountSid}:${authToken}`),
        'Content-Type': 'application/x-www-form-urlencoded'
    };

    return fetch(url, {
        method: 'POST',
        headers: headers,
        body: new URLSearchParams(data).toString()
    });
}
4

Using a phone number verification step is smart to make sure real people are accessing the form. On Wix, there are apps and integrations that can help with that without needing coding skills. You might want to check out Wix Automations or third-party services that connect to Wix through Zapier or APIs. They can send out a one-time code for verification. Just keep in mind that some visitors might use a temp mobile number from sites like Tardigrada if they’re cautious about privacy, which is great for them but might not be what you need for ID collection.