Switch to Mobile
The "Switch to Mobile" feature allows delegating the document processing to another device, for example, to a mobile phone, without interrupting the user journey. This lets your users get started on PC, then display the QR code to continue the identity document processing on the mobile device. Once completed, seamlessly return to the computer to continue the user journey. This approach allows getting better quality photos of identity documents compared to desktop devices.
Let's have a look at the feature implementation step by step.
Step 1: Delegate Processing
Configure Desktop
The first step is to show the QR code and perform some configuration, as follows:
- Specify the Web Service URL (
serviceURL). - Create the delegate web page and specify the URL to it (
delegateURL). In this URL specify the query parameter with any name and pass the query string in the following way{tag}, for example,?tag={tag}. For details, see the Transactions page.
window.RegulaDocumentSDK.recognizerProcessParam = {
processParam: {
scenario: InternalScenarios.MrzAndLocate,
},
delegateProcessing: {
serviceURL: import.meta.env.VITE_SERVICE,
delegateURL: `DELEGATE_PAGE_URL?QUERY_PARAMETER={tag}`
},
tag: Date.now()
};
In addition, you may need to adjust HTTP request headers in your application to pass additional information to the delegating page, for example, the authentication token. That can be achieved in the following way:
window.RegulaDocumentSDK.recognizerProcessParam = {
processParam: {
scenario: InternalScenarios.MrzAndLocate,
},
delegateProcessing: {
serviceURL: import.meta.env.VITE_SERVICE,
delegateURL: `DELEGATE_PAGE_URL?QUERY_PARAMETER={tag}`,
httpHeaders: {
key1: 'header1',
key2: 'header2',
key3: 'header3'
},
},
tag: Date.now()
};
Configure Mobile
Then you need to scan the QR code using the mobile device. On the mobile device page that you created in the Configure Desktop step, perform the following configuration:
- Specify the Web Service URL (
serviceURL)—the same as was set in the Configure Desktop step. - Accept the tag, passed using the query parameter.
window.RegulaDocumentSDK.recognizerProcessParam = {
processParam: {
scenario: InternalScenarios.MrzAndLocate,
backendProcessing: {
serviceURL: 'YOUR_SERVICE_URL'
}
},
tag: new URL(window.location.href).searchParams.get('tag')
};
documentReaderElement.settings = {
mobileDelegate: true
};
Since Regula Web Service is involved when working with Regula Web Components, you may need to adjust HTTP requests’ headers in your application to pass additional information to the Web Service. That can be achieved in the following way:
window.RegulaDocumentSDK.recognizerProcessParam = {
processParam: {
scenario: InternalScenarios.MrzAndLocate,
backendProcessing: {
serviceURL: 'YOUR_SERVICE_URL',
httpHeaders: {
key1: 'header1',
key2: 'header2',
key3: 'header3'
}
}
},
tag: new URL(window.location.href).searchParams.get('tag')
};
documentReaderElement.settings = {
mobileDelegate: true
};
Step 2: Optical Processing
The next step is optical processing, performed on the mobile side.
To initiate optical processing, follow the Add Component guide.
Once the optical processing is completed, the encrypted result package is generated.
Step 3: Finalize Package
The next step is to finalize the data. It means that the results are encrypted on the mobile side and then transmitted to Regula Web Service via the secure communication channel.
During transmission, the Storage and Database become are involved in saving the transaction info, metadata, results, etc.
const component = document.querySelector('document-reader');
function listener(event) {
if (event.detail.action === 'PROCESS_FINISHED' && event.detail.data.status === 1) {
window.RegulaDocumentSDK.finalizePackage();
}
}
component.addEventListener('document-reader', listener);
After receiving the encrypted package from the mobile device Web Component, Regula Web Service returns the transaction ID, and you are notified on the desktop Web Component.
You need to handle this transaction ID to send it further to your Web Service.
if (data.detail.action === 'REMOTE_TRANSACTION_UPLOADED') {
const transaction = data.detail.data;
const transactionId = transaction.id;
console.log(transactionId);
}
Step 4: Sending Transaction ID to Backend
Send the transaction ID to your backend to prepare the request that will be sent to the Regula Web Service for reprocessing later.
Step 5: Reprocessing on Web Service
Now that you have the encrypted results, you can prepare the request to perform the reprocessing on the Regula Web Service side.
The request body should include at least the scenario and other settings depending on your needs:
{
"processParam": {
"scenario": "FullAuth"
}
}
To perform the reprocessing, send the request the following endpoint of Regula Web Service:
POST /api/v2/transaction/{transaction_id}/process
where {transaction_id} is the transaction ID you received in the Step 3.
Request example using cURL
curl --request POST \
--url "http://localhost:8088/api/v2/transaction/76fa69d1-5ba6-4aa0-8dd5-477c8f81df91/process" \
--header "Content-Type: application/json" \
--data '{ "processParam": { "scenario": "FullAuth" } }'
Info
Please note that the request demonstrated above doesn't contain any data, so you won't receive any results from Regula Web Service if you run it.
The request demonstrates only the structure that should be followed.
During the reprocessing, the Regula Web Service fetches data from the Storage and Database.
This marks the final step of the Switch to Mobile feature. Once the reprocessing is completed, you can then decide whether you should trust the browser results or not.
Example
See the sample project, demonstrating how to set up the Switch to Mobile feature.