> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-sdk/web-javascript/getting-started/faceauthenticator-deprecated-1.md).

# FaceAuthenticator (Deprecated)

## Importing SDK <a href="#id-8wb6izedyenp" id="id-8wb6izedyenp"></a>

To use FaceAuthenticator, you can either remotely import the `.js` file or download it locally.

## **Remotely** <a href="#id-497hoiux4wxd" id="id-497hoiux4wxd"></a>

Include the `.js` file directly from the CDN:

```html
<script src="https://repo.combateafraude.com/javascript/release/face-authenticator-deprecated/<VERSION>.umd.js" type="text/javascript"></script>
```

You can retrieve the class from the SDK using the following code:

```javascript
const { FaceAuthenticatorSdk } = window['@combateafraude/face-authenticator'];
```

## **Locally** <a href="#id-4ne8pmuotbnc" id="id-4ne8pmuotbnc"></a>

Download the `.js` file and import it as an ES6 module:

```javascript
import { FaceAuthenticatorSdk } from '../assets/js/face-authenticator-<VERSION>.js'
```

## **Construction** <a href="#o5y52hcnc2lv" id="o5y52hcnc2lv"></a>

In the builder, the SDK receives a single parameter with the settings:

```javascript
const sdk = new DocumentDetectorSdk(options);
```

### Supported parameters <a href="#id-406kz8934mrz" id="id-406kz8934mrz"></a>

<table data-header-hidden><thead><tr><th width="518"></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Required?</strong></td></tr><tr><td><p><a href="https://docs.combateafraude.com/docs/mobile/introduction/mobile-token"><code>token</code></a></p><p>Authentication token for consuming the SDK.</p></td><td>Yes.</td></tr><tr><td><p><strong><code>language</code></strong></p><p>Default message language, valid values: en_US, en_BR, es_MX.</p></td><td>No. The default is <strong><code>pt_BR</code></strong></td></tr><tr><td><p><strong><code>analyticsSettings</code></strong></p><p>Analytics Configuration Objects.</p></td><td>No.</td></tr><tr><td><p><strong><code>analyticsSettings.disableAnalytics</code></strong></p><p>Parameter responsible for enabling or disabling analytics.</p></td><td>No.</td></tr><tr><td><p><strong><code>analyticsSettings.trackingId</code></strong></p><p>Unique id that we are going to save the information from this SDK execution.</p></td><td>No.</td></tr><tr><td><p><strong><code>analyticsSettings.trackingInfo</code></strong></p><p>We accept an information object.</p></td><td>No.</td></tr><tr><td><p><strong><code>environmentSettings.disableDesktopExecution</code></strong></p><p>Flag indicating whether execution on desktops should be blocked.</p></td><td>No. The default is <strong><code>false</code></strong></td></tr><tr><td><p><strong><code>capturerSettings.disableAdvancedCapturing</code></strong></p><p>Flag indicating whether advanced capture should be disabled*.</p></td><td>No. The default is <strong><code>false</code></strong></td></tr><tr><td><p><strong><code>appearenceSettings.captureButtonIcon</code></strong></p><p>Customization of the capture icon accepts values such as image URL or base64 SVGs.</p></td><td>No</td></tr><tr><td><p><strong><code>appearenceSettings.captureIconSize</code></strong></p><p>Customization of the icon size for the captureButtonIcon field.</p></td><td>No</td></tr><tr><td><p><strong><code>appearenceSettings.captureButtonColor</code></strong></p><p>Customization of the default image capture button color.</p></td><td>No</td></tr><tr><td><p><strong><code>appearenceSettings.switchButtonIcon</code></strong></p><p>Customization of the camera switch icon accepts values such as image URL or base64 SVGs.</p></td><td>No</td></tr><tr><td><p><strong><code>appearenceSettings.switchIconSize</code></strong></p><p>Customization of the icon size for the switchButtonIcon field.</p></td><td>No</td></tr><tr><td><p><strong><code>appearenceSettings.switchIconColor</code></strong></p><p>Customization of the color of the default camera switching icon.</p></td><td>No</td></tr><tr><td><p><strong><code>appearenceSettings.fontFamily</code></strong></p><p>Changes the font for all elements contained in the SDK.</p></td><td>No. The pattern is inherited from the page</td></tr><tr><td><p><strong><code>textSettings.messages.processMessage</code></strong></p><p>Customization of the image processing message.</p></td><td>No. The default is <code>"Processando sua foto, aguarde um momento"</code></td></tr><tr><td><p><strong><code>textSettings.messages.captureFailedMessage</code></strong></p><p>Customization of the capture failure message.</p></td><td>No. The default is <code>"Ops! Tivemos um problema ao processar sua imagem."</code></td></tr></tbody></table>

\* Advanced capture consists of using more complex and not-so-stable APIs in browsers that support them (e.g. [ImageCapture](https://developer.mozilla.org/pt-BR/docs/Web/API/ImageCapture))

#### &#x20;<a href="#gw3auh2c9d0" id="gw3auh2c9d0"></a>

#### **Example** <a href="#id-9gtiu9rxgzn0" id="id-9gtiu9rxgzn0"></a>

```javascript
const sdk = new DocumentDetectorSdk({
    token: `my-sdk-token`,
    language: `pt_BR`,

    analyticsSettings: {
      disableAnalytics: false,
      trackingId: "",
      trackingInfo: "",
    },

    environmentSettings: {
        disableDesktopExecution: false,
    },


    appearenceSettings: {
        hideCaptureTitle: false,
        hideCaptureMask: false,
        hideCameraSwitchButton: false,
        useGenericMask: false,
    },

    capturerSettings: {
        disableAdvancedCapturing: false,
    },

    textSettings: {
        messages: {
            processMessage: '',
            wrongDocumentMessage: '',
            bothWrongSideMessage: '',
            wrongSideMessage: '',
            lowQualityMessage: '',
            captureFailedMessage: '',
        }
});
```

#### &#x20;<a href="#cltsgpblpz5x" id="cltsgpblpz5x"></a>

### **CaptureStage** <a href="#av30ro16qapb" id="av30ro16qapb"></a>

CaptureStage allows the client to configure the stages. To do this, we offer the **`CaptureStage`** object, where you can set the following parameters:

| **Parameter**                                                                                                                                                                                                                                                                                                                            |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong><code>mode</code></strong></p><p>Desired capture mode. It can be used <code>manual</code>, <code>automatic</code> or <code>upload</code>. In the manual capture, a button will be enabled for the user to do the capture, in the upload, the functionality of uploading documents will be displayed instead of capturing.</p> |
| <p><strong><code>attempts</code></strong></p><p>The number of attempts of the current stage. If it is the only stage, the value <code>0</code> must be passed.</p>                                                                                                                                                                       |
| <p><strong><code>duration</code></strong></p><p>Duration time of the current stage. If more than one stage is set, the total time for each stage can be set, and when the total time is reached, the stage will move on to the next one. Set it to <code>0</code> if you don't want to set a time for the stage.</p>                     |

#### **Example CaptureStage**

```javascript
const stages = [
  { mode: "automatic", attempts: 3, duration: 60 },
  { mode: "manual", attempts: 3, duration: 60 },
  { mode: "upload", attempts: 0, duration: 0 },
];
```

## **Initialization** <a href="#id-1htcytapji7o" id="id-1htcytapji7o"></a>

#### `initialize(): Promise<void>` <a href="#tcfegfh5qva1" id="tcfegfh5qva1"></a>

The SDK has a separate method of initialization, to allow greater control over when it occurs.

During this initialization, the SDK will initialize its internal variables and download the resources it needs to run.

**\[!]** You must call this method before using other SDK methods.

**\[!]** The initialization of the SDK can take a few seconds. We recommend that you call this function as early as possible in your flow so that opening the SDK is smooth for the user.

### **Example** <a href="#id-5clttgsl8vx9" id="id-5clttgsl8vx9"></a>

```javascript
await sdk.initialize();
```

## Utilization <a href="#id-2nutj8vz4qyr" id="id-2nutj8vz4qyr"></a>

### Opening and taking selfies

**`capture(container: HTMLElement, stages, {personData?: PersonData, totalAttempts?: Number}): Promise<Result>`**

Method used to load the SDK onto the screen and perform selfie capture.

It will initialize the video *stream* (requesting permissions if needed) and load it into the container.

### Parameters <a href="#lnxy13cfmg7d" id="lnxy13cfmg7d"></a>

<table data-header-hidden><thead><tr><th width="610.3333333333333"></th><th width="136"></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Type</strong></td></tr><tr><td><p><strong><code>personData.cpf</code></strong></p><p>CPF of the user doing the authentication (required).</p></td><td><strong><code>string</code></strong></td></tr><tr><td><p><strong><code>personData.name</code></strong></p><p>Name of the user doing the authentication (optional).</p></td><td><strong><code>string</code></strong></td></tr></tbody></table>

¹ If not specified, automatic capture is used.

² If not specified, a default value of 30 seconds is used.

### Example <a href="#prhq87yesysv" id="prhq87yesysv"></a>

```javascript
// div or another element on DOM
const sdkContainer = document.getElementById('sdk-displayer');
const personData = { cpf: 'user-cpf', name: 'user-name' };
await sdk.capture(sdkContainer, stages, {personData, totalAttempts});
```

#### **Return** <a href="#id-789oo5pmjd16" id="id-789oo5pmjd16"></a>

The return consists of an object with the following fields:

<table data-header-hidden><thead><tr><th width="247"></th><th width="140.33333333333331"></th><th></th></tr></thead><tbody><tr><td><strong>Field</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td><strong><code>requestId</code></strong></td><td><code>string</code></td><td>Unique identifier of the requisition</td></tr><tr><td><strong><code>isMatch</code></strong></td><td><code>boolean</code></td><td>Boolean indicating whether the captured face is identical to the face registered for the entered <strong><code>peopleId</code></strong></td></tr><tr><td><strong><code>peopleId</code></strong></td><td><code>string</code></td><td>Information of the document reported for authentication</td></tr><tr><td><strong><code>openEyesProbability</code></strong></td><td><code>number</code></td><td>Probability of eyes being open in captured selfie</td></tr></tbody></table>

## Close SDK <a href="#n2n8srw9kbk2" id="n2n8srw9kbk2"></a>

### `close(): Promise<void>` <a href="#sro4caipsvz9" id="sro4caipsvz9"></a>

The method used to remove the SDK on the screen.

## De-initialize the SDK <a href="#t4x334wp7coq" id="t4x334wp7coq"></a>

### `dispose(): Promise<void>` <a href="#mkehuo2jl1r2" id="mkehuo2jl1r2"></a>

The method used to remove the SDK on the screen.

Will de-initialize the video stream and clear the SDK's internal variables

## **Complete Example** <a href="#gty5kilg02if" id="gty5kilg02if"></a>

Soon.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.caf.io/caf-sdk/web-javascript/getting-started/faceauthenticator-deprecated-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.