Oiti CertiFace SDK - Versão Web 1.1.55

Este repositório contém a biblioteca NPM do Certiface SDK Web da Oiti.

Introdução

O @oiti/sdk-web é um SDK desenvolvido como Web Component para integração com a Certiface API, permitindo autenticação e validação facial de forma simples e eficiente.

Principais Características

✅ Compatível com qualquer aplicação web moderna, incluindo React.js, Angular e Vue.
✅ Fácil integração, sem dependências específicas de framework.
✅ Personalizável, permitindo ajustes conforme a necessidade do fluxo de autenticação.
✅ Segurança e escalabilidade, seguindo as melhores práticas para captura e validação de imagens.

Este SDK simplifica a implementação da Certiface API, reduzindo o tempo de desenvolvimento e garantindo uma experiência fluida para os usuários. 🚀

Instalação

Para instalar o SDK, execute o seguinte comando:

npm install @oiti/sdk-web

Integração com Angular

Configuração do angular.json

Após a instalação do @oiti/sdk-web, é necessário adicionar os arquivos da FaceTec e imagens contidas na pasta node_modules a um repositório público. Além disso, o script da FaceTec deve ser incluído no projeto, conforme o exemplo abaixo:

{
    "newProjectRoot": "projects",
    "projects": {
        "ng-demo-web": {
            "architect": {
                "build": {
                    "options": {
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            {
                                "glob": "**/*",
                                "input": "node_modules/@oiti/facetec-sdk",
                                "output": "./assets/facetec-sdk"
                            },
                            {
                                "glob": "**/*",
                                "input": "node_modules/@oiti/sdk-web/dist/src/shared/public",
                                "output": "./assets"
                            },
                            {
                                "glob": "**/*.json",
                                "input": "src/assets",
                                "output": "./"
                            }
                        ],
                        "styles": ["src/styles.css"],
                        "scripts": [
                            "node_modules/@oiti/facetec-sdk/core-sdk/FaceTecSDK.js/FaceTecSDK.js"
                        ]
                    }
                }
            }
        }
    }
}

Uso do @oiti/sdk-web no Angular

import {
    Component,
    Injector,
    ɵcreateInjector as createInjector,
} from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { StartSessionService } from './start-session.service'

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
})
export class AppComponent {
    title = 'ng-demo-web'

    constructor(private injector: Injector) {
        // Importa o SDK de forma dinâmica.
        import('@oiti/sdk-web/dist').then(({ HubManager }) => {
            createInjector(HubManager, this.injector)
        })
    }

    // Evento chamado após o cliente completar o workflow
    handleCompleted(data: any) {
        console.log('handleCompleted: => ', data)
    }

    ngAfterViewInit() {
        const organization = {
            id: 742,
            branch: '2968',
            subOrg: '1',
            group: '1',
        }

        const requestData = {
            externalId: 'DEMOPOC',
            userDocumentNumber: '32557231835',
            name: 'Ricardo Silva',
            birthDate: '2001-01-01',
            attrs: {
                custom: {
                    workflow: 'LIVENESS_ONLY',
                },
            },
        }

        this.startSessionService.startSession(requestData).subscribe(
            (response: any) => {
                const session = { ...response, updatedDate: new Date() }
                const content = document.querySelector('#main-certiface-api')

                // Criação do elemento Web Component
                const hubManager = document.createElement('hub-manager')
                hubManager.setAttribute('host', 'https://api.hml.certiface.io')
                hubManager.setAttribute('image-base-path', 'assets')
                hubManager.setAttribute('facetec-base-path', 'assets')
                hubManager.setAttribute('session', JSON.stringify(session))
                hubManager.setAttribute('org-id', organization.id.toString())
                hubManager.setAttribute('org-branch', organization.branch)
                hubManager.setAttribute('org-suborg', organization.subOrg)
                hubManager.setAttribute('org-group', organization.group)
                hubManager.addEventListener('onCompleted', this.handleCompleted)

                if (content) {
                    content.appendChild(hubManager)
                }
            },
            (error) => {
                console.error('Error starting session:', error)
            },
        )
    }
}

Compatibilidade com Navegadores

Mobile Browsers

| Android Chrome | iOS Safari | iOS Chrome | Firefox | Opera | | ----------------------- | -------------- | -------------- | -------------- | -------------- | | ✅ Testado (Chrome 128) | ❌ Não Testado | ❌ Não Testado | ❌ Não Testado | ❌ Não Testado |

Desktop Browsers

| Chrome | Safari | Firefox | Opera | Edge | | ----------------------- | -------------- | -------------- | -------------- | -------------- | | ✅ Testado (Chrome 128) | ❌ Não Testado | ❌ Não Testado | ❌ Não Testado | ❌ Não Testado |

Theme Helper

Você pode mudar o tema do SDK, basta deixar publico um arquivo theme.json na raiz do projeto. Segue abaixo um modelo:

{
    "FrameYourFace": "facetec-sdk/app-resources/Vocal_Guidance_Audio_Files/please_frame_your_face_sound_file.mp3",
    "MoveCloser": "facetec-sdk/app-resources/Vocal_Guidance_Audio_Files/please_move_closer_sound_file.mp3",
    "Retry": "facetec-sdk/app-resources/Vocal_Guidance_Audio_Files/please_retry_sound_file.mp3",
    "Uploading": "facetec-sdk/app-resources/Vocal_Guidance_Audio_Files/uploading_sound_file.mp3",
    "Successful": "facetec-sdk/app-resources/Vocal_Guidance_Audio_Files/facescan_successful_sound_file.mp3",
    "PresButtonToStart": "facetec-sdk/app-resources/Vocal_Guidance_Audio_Files/please_press_button_sound_file.mp3",
    "font": "Futura,'Trebuchet MS',Arial,sans-serif",
    "primaryColor": "#05D758",
    "secondaryColor": "#FFFFFF",
    "backgroundColor": "#1E1E1E",
    "guidanceButtonTextNormalColor": "#1E1E1E",
    "guidanceButtonBackgroundNormalColor": "#05D758",
    "guidanceButtonTextHighlightColor": "#1E1E1E",
    "guidanceButtonBackgroundHighlightColor": "rgb(86, 86, 86)",
    "guidanceButtonTextDisabledColor": "#1E1E1E",
    "guidanceButtonBackgroundDisabledColor": "rgb(173, 173, 173)",
    "guidanceButtonBorderColor": "transparent",
    "guidanceButtonBorderWidth": "0px",
    "guidanceButtonCornerRadius": "20px",
    "guidancerReadyScreenOvalFillColor": "transparent",
    "guidanceReadyScreenHeaderTextColor": "#FFFFFF",
    "guidanceReadyScreenSubtextTextColor": "#FFFFFF",
    "guidanceReadyScreenTextBackgroundColor": "#1E1E1E",
    "guidanceReadyScreenTextBackgroundCornerRadius": "5px",
    "guidanceRetryScreenImageBorderColor": "#05D758",
    "guidanceRetryScreenImageBorderWidth": "2px",
    "guidanceRetryScreenImageCornerRadius": "10px",
    "guidanceRetryScreenOvalStrokeColor": "#1E1E1E",
    "guidanceRetryScreenSlideshowInterval": "2000ms",
    "resultScreenBackgroundColors": "#1E1E1E",
    "resultScreenForegroundColor": "#FFFFFF",
    "resultScreenAactivityIndicatorColor": "#FFFFFF",
    "resultScreenCustomActivityIndicatorRotationInterval": "0.8s",
    "resultScreenResultAnimationBackgroundColor": "#05D758",
    "resultScreenResultAnimationForegroundColor": "#1E1E1E",
    "resultScreenResultAnimationSuccessBackgroundImage": "",
    "resultScreenResultAnimationUnsuccessBackgroundImage": "",
    "resultScreenShowUploadProgressBar": true,
    "resultScreenUploadProgressTrackColor": "rgba(0, 0, 0, 0.2)",
    "resultScreenUploadProgressFillColor": "#FFFFFF",
    "resultScreenAnimationRelativeScale": 1,
    "feedbackBackgroundColor": "#1E1E1E",
    "feedbackTextColor": "#FFFFFF",
    "feedbackCornerRadius": "5px",
    "feedbackShadow": "0px 3px 10px black",
    "frameBackgroundColor": "#1E1E1E",
    "frameBorderColor": "#05D758",
    "frameBorderWidth": "0px",
    "frameBorderCornerRadius": "0px",
    "frameShadow": "none",
    "ovalStrokeColor": "rgba(255, 0, 0, 0.7)",
    "ovalProgressColor1": "rgba(0, 255, 0, 0.7)",
    "ovalProgressColor2": "rgba(255, 255, 0, 0.7)",
    "guidanceRetryScreenHeaderTextColor": "#FFFFFF",
    "guidanceRetryScreenSubtextTextColor": "#FFFFFF",
    "bgColor": "#ff0000",
    "textColor": "#00ff00",
    "bgColorCard": "#0000ff",
    "bgColorTitle": "rgb(50 50 50)",
    "buttonPrimary": "rgb(10 10 10)",
    "buttonTextPrimary": "rgb(200 200 200)",
    "docBgColor": "rgb(10 30 40)",
    "docTextColor": "rgb(40 30 10)",
    "docBorderColorCamera": "rgb(200 150 100)"
}

Conclusão

O @oiti/sdk-web é uma solução eficiente para integração com a Certiface API, proporcionando uma experiência otimizada para autenticação facial. Com um processo de configuração simples e suporte a múltiplos frameworks, este SDK é ideal para aplicações que exigem segurança e escalabilidade.

Para mais informações, consulte a documentação oficial da Oiti.