Newer Version Available
BiometricsService Example
Here’s a basic example of a Lightning web component that uses a device’s biometrics
capabilities to verify device ownership.
The component’s HTML template is minimal, with a “Verify” button to initiate the biometrics check.
1<template>
2 <lightning-card title="Biometrics Service Demo" icon-name="custom:privately_shared">
3 <div class="slds-var-m-around_medium">
4 Use device biometrics capabilities to verify current user is indeed device owner:
5 <lightning-button
6 variant="brand"
7 label="Verify"
8 title="Verify device ownership using biometrics"
9 onclick={handleVerifyClick}
10 class="slds-var-m-left_x-small">
11 </lightning-button>
12 </div>
13 <div class="slds-var-m-around_medium">
14 <lightning-formatted-text value={status}></lightning-formatted-text>
15 </div>
16 </lightning-card>
17</template>This example simply uses BiometricsService to prompt the user to complete a biometrics check. A status message is returned, indicating whether the check was successful or not.
1import { LightningElement } from 'lwc';
2import { getBiometricsService } from 'lightning/mobileCapabilities';
3
4export default class NimbusPluginBiometricsService extends LightningElement {
5 status;
6 biometricsService;
7
8 connectedCallback() {
9 this.biometricsService = getBiometricsService();
10 }
11
12 handleVerifyClick() {
13 if (this.biometricsService.isAvailable()) {
14 const options = {
15 permissionRequestBody: "Required to confirm device ownership.",
16 additionalSupportedPolicies: ['PIN_CODE']
17 };
18 this.biometricsService.checkUserIsDeviceOwner(options)
19 .then((result) => {
20 // Do something with the result
21 if (result === true) {
22 this.status = "✔ Current user is device owner."
23 } else {
24 this.status = "𐄂 Current user is NOT device owner."
25 }
26 })
27 .catch((error) => {
28 // Handle errors
29 this.status = 'Error code: ' + error.code + '\nError message: ' + error.message;
30 });
31 } else {
32 // service not available
33 this.status = 'Problem initiating Biometrics service. Are you using a mobile device?';
34 }
35 }
36}