Newer Version Available

This content describes an older version of this product. View Latest

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}