Securbase Logo
v2.0.0

Biomix ID Installation

Install the DNI capture component (v2.0.0) for Angular, native mobile, Cordova, and Capacitor.

Biomix DNI guides users to photograph the front and back of an Argentine DNI using the rear camera, with automatic document detection and countdown capture.

Requirements

  • GitHub account with access to Securbase packages
  • Classic personal access token with read:packages scope
  • For iOS: SSH key configured for GitHub and CocoaPods repo access
  • For web/Angular: HTTPS (camera access requires a secure context)

Package registry

Configure GitHub Packages before installing any npm-based package (@securbase scope).

.npmrc
@securbase:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_CLASSIC_TOKEN}

GitHub Token

Generate a classic token at GitHub → Settings → Developer settings → Personal access tokens with read:packages permission.

Angular

Standalone Angular component published as @securbase/biomix-dni-web-component. Requires Angular 20 or 21. After capture, listen to (dniTemplateReady) to receive a BiomixHeadlessInfo template and send it to POST /portal/biometria/extraer-DNI-UI to extract document data.

View package on GitHub

Install the package

npm install @securbase/biomix-dni-web-component

Peer dependencies: Angular ^20.0.0 || ^21.0.0, @securbase/biomix-headless-angular-component ^0.0.3

Integration flow

Flow: capture → (dniTemplateReady) emits BiomixHeadlessInfo with template → POST /portal/biometria/extraer-DNI-UI with { template: info.template } → ResultDNIUI with parsed DNI fields.

Template emitted by the component

biomix-headless-info.model.ts
// Importar desde @securbase/biomix-headless-angular-component
export type BiomixHeadlessStatus = 'SUCCESS' | 'ERROR' | 'CANCEL' | 'TIMEOUT';
export type BiomixHeadlessFrameFormat = 'PNG' | 'JPG';


export interface BiomixHeadlessFrame {
  detalle: string;
  buffer: string | null | undefined;
}


/** Emitido por (dniTemplateReady) cuando buildUITemplate responde con éxito. */
export interface BiomixHeadlessInfo {
  status: BiomixHeadlessStatus;
  frameFormat: BiomixHeadlessFrameFormat;
  framePreview: BiomixHeadlessFrame | null | undefined;
  template: string | null | undefined;
}

Extraction API response (extraer-DNI-UI)

result-dni-ui.model.ts
export interface ResultDNIUIError {
  codigo: number;
  descripcion: string;
  tipo: string;
}


export interface ResultDNIUIDateParts {
  day: number;
  month: number;
  year: number;
}


export interface ResultDNIUIDocumentInfo {
  address: string;
  addressConfidence: number;
  code1: string;
  code2: string;
  cuilNumber: string;
  dateOfBirth: ResultDNIUIDateParts;
  documentNumber: string;
  documentType: string;
  documentVersion: string;
  expirationDate: ResultDNIUIDateParts;
  face: { image: string; template: string };
  fingerPrint: {
    formatoTemplate: string;
    image: string;
    imageSource: string;
    position: string;
    template: string;
  };
  givenNames: string;
  issuingCountry: string;
  issuingDate: ResultDNIUIDateParts;
  nationality: string;
  order: string;
  sequence: string;
  sex: string;
  surname: string;
  validComposite: boolean;
  validDateOfBirth: boolean;
  validDocumentNumber: boolean;
  validExpirationDate: boolean;
}


export interface ResultDNIUIMrzBlock {
  code: string;
  code1: string;
  code2: string;
  dateOfBirth: ResultDNIUIDateParts & { dateValid?: boolean };
  documentNumber: string;
  expirationDate: ResultDNIUIDateParts & { dateValid?: boolean };
  format: string;
  givenNames: string;
  issuingCountry: string;
  nationality: string;
  sex: string;
  surname: string;
  validComposite: boolean;
  validDateOfBirth: boolean;
  validDocumentNumber: boolean;
  validExpirationDate: boolean;
}


export interface ResultDNIUIData {
  additionalInfo: string;
  backImage: string;
  confidence: number;
  documentInfo: ResultDNIUIDocumentInfo;
  exception: boolean;
  frontImage: string;
  mrz: ResultDNIUIMrzBlock;
  mrzDetected: boolean;
  mrzRAW: string;
  pdf417: string[];
  pdf417Detected: boolean;
  pdf417RAW: string;
  qr: string[];
  qrDetected: boolean;
  qrRAW: string;
  status: string;
  suggestedAction: string;
  txId: string;
  uiTemplateMetadata: { fechaCreacionTemplate: string };
}


/** Respuesta de POST /portal/biometria/extraer-DNI-UI */
export interface ResultDNIUI {
  success: boolean;
  error?: ResultDNIUIError;
  data?: ResultDNIUIData;
}

Component usage

verificacion.component.ts
import { Component, inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BiomixDniCaptureComponent } from '@securbase/biomix-dni-web-component';
import { BiomixHeadlessInfo } from '@securbase/biomix-headless-angular-component';
import { ResultDNIUI } from './result-dni-ui.model';


@Component({
  selector: 'app-verificacion',
  standalone: true,
  imports: [BiomixDniCaptureComponent],
  template: `
    <lib-biomix-dni-capture
      [publicKey]="publicKey"
      [captureBack]="true"
      (dniTemplateReady)="onDniTemplateReady($event)"
      (processCancelled)="onCancelado($event)"
      (processCompleted)="onCompletado()">
    </lib-biomix-dni-capture>
  `,
})
export class VerificacionComponent {
  private readonly http = inject(HttpClient);


  publicKey = 'TU_PUBLIC_KEY';
  authToken = 'Bearer TU_TOKEN';
  apiBase = 'https://api.example.com';


  onDniTemplateReady(info: BiomixHeadlessInfo): void {
    if (info.status !== 'SUCCESS' || !info.template) {
      console.warn('Plantilla no disponible');
      return;
    }


    this.http.post<ResultDNIUI>(
      `${this.apiBase}/portal/biometria/extraer-DNI-UI`,
      { template: info.template },
      { headers: new HttpHeaders({ Authorization: this.authToken }) },
    ).subscribe({
      next: (response) => this.onDniExtracted(response),
      error: (err) => console.error('Error al extraer DNI', err),
    });
  }


  onDniExtracted(response: ResultDNIUI): void {
    if (!response.success || !response.data) {
      console.warn('Extracción fallida', response.error);
      return;
    }


    const { frontImage, backImage, documentInfo, mrzRAW, pdf417Detected } = response.data;
    console.log('Frente base64:', frontImage);
    console.log('Dorso base64:', backImage);
    console.log('Número de documento:', documentInfo.documentNumber);
    console.log('MRZ:', mrzRAW);
    console.log('PDF417 detectado:', pdf417Detected);
  }


  onCancelado(motivo: string) {
    console.warn('Proceso cancelado:', motivo);
  }


  onCompletado() {
    console.log('Verificación completada');
  }
}

Android Native

Native Android library distributed via Maven on GitHub Packages. Artifact: com.securbase.biomix:biomix-dni-lib:2.0.0.

View package on GitHub

Maven (~/.m2/settings.xml)

settings.xml
<settings>
  <profiles>
    <profile>
      <id>securbase</id>
      <repositories>
        <repository>
          <id>securbase</id>
          <url>https://maven.pkg.github.com/securbase/ui_component_pkg</url>
          <snapshots>
            <enabled>true</enabled>
          </snapshots>
        </repository>
      </repositories>
    </profile>
  </profiles>
  <servers>
    <server>
      <id>securbase</id>
      <username>${GITHUB_USERNAME}</username>
      <password>${GITHUB_CLASSIC_TOKEN}</password>
    </server>
  </servers>
  <activeProfiles>
    <activeProfile>securbase</activeProfile>
  </activeProfiles>
</settings>

Gradle

Add the Maven repository and dependency in your module build.gradle:

gradle.properties
gpr.user=${GITHUB_USERNAME}
gpr.key=${GITHUB_CLASSIC_TOKEN}
build.gradle
allprojects {
    repositories {
        // ... existing repositories
        maven {
            url = uri("https://maven.pkg.github.com/securbase/ui_component_pkg")
            credentials {
                username = project.findProperty("gpr.user") ?: System.getenv("GITHUB_USERNAME")
                password = project.findProperty("gpr.key") ?: System.getenv("GITHUB_TOKEN")
            }
        }
    }
}
dependencies {
    implementation "com.securbase.biomix:biomix-dni-lib:2.0.0"
}

iOS Native

Native iOS library distributed via CocoaPods from the Securbase private repo. Tag: 2.0.0.

View package on GitHub

1. Add Securbase CocoaPods repo

pod repo add securbase git@github.com:securbase/cocoapod-repo.git

2. Configure Podfile sources

Podfile
source 'git@github.com:securbase/cocoapod-repo.git'
source 'https://cdn.cocoapods.org/'

SSH Access

Access to the Securbase CocoaPods repo requires SSH key authentication configured in your GitHub account.

3. Add to your Podfile

Podfile
pod 'BiomixDniLib', '~> 0.1.6'

Cordova (Android + iOS)

Cordova plugin for DNI capture on both platforms. Install version 2.0.0.

View package on GitHub

Install the plugin

cordova plugin add @securbase/biomix-dniarg-cordova-component@2.0.0 --save
cordova prepare

iOS

Access to the Securbase CocoaPods repo requires SSH key authentication configured in your GitHub account.

Basic usage

if (window.SobioDniArgPlugin) {
  const cfgData = {
    key: 'YOUR_RSA_PUBLIC_KEY',
    maxRetry: 0,
    confirmCapture: true,
    frameFormat: 'PNG',
    searchPDF417: true,
    cropImage: true,
    resizeImage: true,
  };


  window.SobioDniArgPlugin.captureDNI(
    cfgData,
    (successData) => console.log('OK', successData),
    (errorData) => console.error('Error', errorData)
  );
}

Capacitor (Android + iOS)

Capacitor plugin for Ionic + Capacitor apps. Install version 2.0.0. Requires additional native setup for Android and iOS.

View package on GitHub

Install the plugin

npm install @securbase/biomix-dniarg-capacitor-component@2.0.0
npx cap sync

Native dependencies

Android: configure Gradle as described in the Android Native section above.

iOS: configure CocoaPods as described in the iOS Native section above.

Basic usage

import { BiomixDniArgComponent } from '@securbase/biomix-dniarg-capacitor-component';


const result = await BiomixDniArgComponent.capture({
  key: 'YOUR_RSA_PUBLIC_KEY',
  mode: 'FRONT_AND_BACK',
  maxRetry: 0,
  confirmCapture: true,
  frameFormat: 'PNG',
  searchBarcode: true,
  cropImage: true,
  resizeImage: true,
});


console.log(result.status, result.bufferBase64);