Oz Liveness Web Plugin

Nota: para que el complemento funcione, la versión de su navegador debe ser la siguiente o más reciente.

Navegador	Versión
Google Chrome (y otros navegadores que funcionen con Chromium)	56
Mozilla Firefox	55
Safari	11
Microsoft Edge	17
Opera	47

Agregar el complemento de Oz Liveness a la página web

Para poner el complemento en su página, agregue el archivo con estilos (ozliveness.css) y el script principal del complemento (plugin_liveness.php) al código HTML de la página. Los paquetes de idiomas necesarios se pueden especificar adicionalmente al activar el complemento. Si no se especifica ningún paquete de idiomas, se utilizará el idioma predeterminado. Ejemplo del código para agregar:

<link rel="stylesheet" href="/plugin/ozliveness.css" />
<script src="/plugin_liveness.php?lang=ru|en"></script>

En el caso de las aplicaciones React, utilice head en la página principal de su plantilla para cargar e inicializar el complemento OzLiveness..

Cómo lanzar el complemento Oz Liveness

La ventana del complemento se lanza con el método open(options). Parámetros:

• options: an object with the following settings:

  • token: (opcional) el token de autorización

  • lang: una cadena que contiene el identificador de uno de los paquetes de idiomas instalados;

  • meta: objeto con los nombres de los meta campos en las claves y sus valores de cadena en los valores. Los metadatos se transfieren a Oz API y pueden utilizarse para obtener resultados de análisis;

  • params: objeto con identificadores y parámetros adicionales:

    • extract_best_shot: true o false: elegir el mejor fotograma en el análisis Quality;

  • action: matriz de cadenas con identificadores de acciones a realizar. Acciones disponibles:

    • photo_id_front: foto del anverso del documento de identidad;

    • photo_id_back: foto del reverso del documento de identidad;

    • video_selfie_left: giro de cabeza a la izquierda;

    • video_selfie_right: giro de cabeza a la derecha;

    • video_selfie_down: inclinación de la cabeza hacia abajo;

    • video_selfie_high: cabeza levantada;

    • video_selfie_scan: escaneo.

    • video_selfie_best: acción especial para seleccionar la mejor toma de un video y realizar el análisis de la misma en lugar del video completo.

  • on_submit(): función de devolución de llamada que se llama después de enviar los datos del cliente al servidor.

  • on_result(result): función de devolución de llamada que se llama varias veces durante el análisis y recupera un resultado intermedio.

  • on_complete(result): función de devolución de llamada que se llama después de finalizar la comprobación.

  • on_close(): función callback que se llama después de que se cierra la ventana del complemento (ya sea de forma manual por el usuario o automática una vez finalizada la comprobación).

IMPORTANTE: Recomendaciones para el uso seguro del módulo

Para mejorar la protección contra los ataques con un parámetro de action sustituido en el lado del navegador e impedir la filtración de los resultados de la verificación, se recomienda utilizar el módulo Oz Liveness WEB SDK en condiciones reales sólo con la siguiente configuración:

• Parámetro actions_default_importance del archivo de configuración de Oz Liveness WEB Adapter: establecido en true

• Parámetro result_mode del archivo de configuración de Oz Liveness WEB Adapter: establecido en 'safe'.

• Recuperar los resultados de los análisis con el método de Oz API Folder [SINGLE] (GET)

Con esta configuración, los parámetros de lanzamiento del módulo Oz Liveness WEB Plugin y los resultados de la verificación se almacenarán solo en servidores seguros, fuera del acceso de los ciberdelincuentes.

Un ejemplo de llamada segura a un método con la configuración predeterminada:

OzLiveness.open({
  lang: 'es',
  meta: {
    'client_id': '123',
    'session_id': '321'
  },
  on_complete: function() {
    // su código
  }
});

Si no se especifica ningún parámetro action al lanzar el complemento, por defecto se llamará el formulario de verificación de Liveness (tomar video de una acción aleatoria). Tras ello, Oz API lanzará el análisis QUALITY. Puede configurar los ajustes por defecto en el lado del servidor.

Ejemplo de llamada a un método con la toma de fotos de un documento de identidad y una acción Liveness especificada:

OzLiveness.open({
  lang: 'es',
  meta: {
    'client_id': '123',
    'session_id': '321'
  },
  action: ['photo_id_front', 'photo_id_back', 'video_selfie_scan'],
  on_complete: function(result) {
    // su código
  }
});

Si se especifican las acciones photo_id_front y photo_id_back, se llamará los formularios de captura del anverso y el reverso de un documento de identidad, y Oz API lanzará los análisis DOCUMENTS y BIOMETRY. La especificación de una o varias acciones video_selfie_* llama un formulario que tomará un video de el rostro del usuario y luego lanzará el análisis QUALITY. En cuanto finalicen los análisis, su resultado se devuelve a la función especificada en el parámetro on_complete.

La implementación y prueba del módulo Oz Liveness WEB SDK

Durante la implementación y prueba del módulo Oz Liveness WEB SDK, utilícelo con la siguiente configuración para acelerar el proceso:

• Parámetroactions_default_importance de la configuración de Oz Liveness WEB Adapter: establecido en false

• Parámetroresult_mode de la configuración de Oz Liveness WEB Adapter: establecido en full

Importante: Para mejorar la protección contra ataques con un parámetro de action sustituido en el lado del navegador e impedir la filtración de los resultados de la verificación, desaconsejamos el uso de esta configuración en condiciones reales.

El resultado de la verificación en este modo puede obtenerse en el complemento en formato JSON. Además, estos ajustes permiten anular el parámetro action cuando el complemento se ejecuta en un navegador. Ejemplos de uso de un módulo con el parámetro action anulado:

Ejemplo de llamada a un método con acciones de Liveness especificadas sin tomar fotos de un documento de identificación:

OzLiveness.open({
  lang: 'es',
  meta: {
    'client_id': '123',
    'session_id': '321'
  },
  action: ['video_selfie_scan', 'video_selfie_left'],
  on_complete: function(result) {
    // su código
  }
});

Especificar una o varias acciones video_selfie_* llama un formulario que tomará un video de el rostro del usuario y luego lanzará el análisis de QUALITY en el lado de Oz API. Tras la finalización de los análisis, su resultado se devuelve a la función especificada en el parámetro on_complete.

Cerrar el complemento Oz Liveness

El método Close() puede utilizarse para forzar el cierre de la ventana del complemento. Se cancelarán todas las solicitudes al servidor y las funciones de devolución de llamada (excepto on_close) dentro de la sesión actual.

Ejemplo de uso:

var session_id = 123;

OzLiveness.open({
  // Transferimos metadatos arbitrarios, por los cuales después podemos identificar la sesión en Oz API
  meta: {
    session_id: session_id 
  },
  // Después de enviar los datos, se fuerza el cierre de la ventana del complemento y se solicita de forma independiente el resultado
  on_submit: function() {
    OzLiveness.close();
    my_result_function(session_id);
  }
});

Ocultar la ventana del complemento de Oz Liveness sin cancelar las funciones de callback

El método Hide() puede utilizarse para ocultar la ventana del complemento sin cancelar las solicitudes de resultados de análisis y las funciones de devolución de llamadas de usuario. Utilice este método, entre otras cosas, si desea emitir su propio indicador de carga después de enviar los datos.

Ejemplo de uso:

OzLiveness.open({
  // Al recibir un resultado intermedio, ocultar la ventana del complemento y mostrar nuestros propios indicadores de carga
  on_result: function(result) {
    OzLiveness.hide();
    if (result.state === 'processing') {
      show_my_loader();
    }
  },
  on_complete: function() {
    hide_my_loader();
  }
});

Añadir un paquete de idiomas personalizado

El método add_lang(lang_id, lang_obj) permite agregar un paquete de idiomas nuevo o personalizado.

Parámetros:

• lang_id: valor de cadena que puede ser utilizado posteriormente como parámetro lang para el método open();

• lang_obj: objeto que incluye identificadores de cadenas de traducción como claves y las propias cadenas de traducción como valores.

Ejemplo de uso:

// Editar el texto del botón
OzLiveness.add_lang('es', {
  action_photo_button: 'Tomar foto'
});

Lista de todos los identificadores de idiomas:

OzLiveness.add_lang('es', {
    record_button: 'Grabar',
    result_close_button: 'Cerrar',
​
    alert_close_button: 'Aceptar',
    
    action_photo_button: 'Tomar foto',
    action_confirm_button: 'Confirmar',
    action_repeat_button: 'Repetir',
    action_skip_button: 'Omitir',
    action_camera_switch_button: 'Usar la otra cámara del dispositivo',
​
    analysis_in_progress: 'Analizando, espere el resultado',
​
    accessing_camera: 'Acceso a la cámara',
​
    device_turn: 'Cambie la orientación de su dispositivo de vertical a horizontal (o viceversa)',
    
    more_than_one_face: 'Asegúrese de que no hay otros rostros en el cuadro',
    number_of_attempts_exhausted: 'Se agotó el número de intentos',
​
    sdk_name: 'OzLivenessSDK',
​
    result_state_processing: 'Análisis en curso',
    result_state_finished: 'El análisis ha terminado',
​
    oz_action_hint_not_centered: 'Haga que su rostro quede dentro del marco',
    oz_action_hint_move_closer: 'Acérquese',
    oz_action_hint_move_away: 'Aléjese',
    oz_action_hint_move_even_closer: 'Aún más cerca',
    oz_action_hint_move_even_away: 'Aún más lejos',
    oz_action_hint_look_straight: 'Mire de frente a la cámara',
    oz_action_hint_dont_smile: 'Le pediré que sonrías más tarde, pero por ahora no sonría',
    oz_action_hint_dont_left_or_right_head: 'Le pediré que gire la cabeza más adelante, pero ahora mire de frente a la cámara.',
    oz_action_hint_open_eyes_wide: 'Abra bien los ojos',
    oz_action_hint_face_aligned: 'Genial, no mueva el teléfono...',
​
    oz_action_hint_remove_sunglasses: 'Quítese las gafas de sol',
    oz_action_hint_remove_mask: 'Quítese la máscara',
​
    oz_action_repeat: 'Repita la acción',
​
    oz_action_title_photo_front: 'Tome una foto <br />del anverso del documento <br />',
    oz_action_title_photo_back: 'Tome una foto <br /> del reverso del documento <br /> (sólo para documentos que tengan dos caras)',
​
    oz_action_tutorial_button: 'Instrucciones',
​
    oz_action_photo_tutorial: '' +
        '<p>Tomar una foto del documento.</p>' +
        '<p>Debe tomar una foto de la primera y última página (o el anverso y reverso) del pasaporte o el documento de identidad, donde figuran la información sobre el emisor y la fecha de emisión, que deben verse claramente en la imagen. Se requiere una imagen de alta calidad, sin reflejos.</p>' +
        '<ul class="ozliveness_tutorial">' +
            '<li data-icon="pages">Si el campo MRZ del documento de identidad está en el reverso del documento, debe tomar una foto del anverso y el reverso.</li>' +
            '<li data-icon="angle">Asegúrese de que está fotografiando desde los ángulos correctos.</li>' +
            '<li data-icon="flash">No utilice el flash. Intente utilizar una iluminación uniforme.</li>' +
            '<li data-icon="obstruction">Asegúrese de que no hay objetos extraños delante de la imagen.</li>' +
            '<li data-icon="blur">Mantenga la cámara fija para que la imagen no salga borrosa.</li>' +
            '<li data-icon="contrast">Coloque el documento sobre un fondo de contrastante (por ejemplo, una mesa negra).</li>' +
            '<li data-icon="edges">Asegúrese de que los bordes del documento queden dentro del cuadro (los bordes del documento no deberían coincidir con el borde del cuadro).</li>' +
        '</ul>',
​
    oz_action_smile_go: 'Ahora sonría',
    oz_action_blink_go: 'Ahora parpadee o cierre los ojos por un segundo',
    oz_action_scan_go: 'Siga este texto',
    oz_action_head_up_go: 'Levante la cabeza',
    oz_action_head_down_go: 'Baje la cabeza',
    oz_action_head_right_go: 'Gire la cabeza a la derecha',
    oz_action_head_left_go: 'Gire la cabeza a la izquierda',
    oz_action_look_at_screen: 'Mire a la pantalla',
​
    oz_action_hint_too_dark: 'Encuentre mejores condiciones de luz',
​
    oz_action_hint_too_blurry: 'La imagen es demasiado borrosa',
​
    oz_action_hint_OK: '¡Genial!',
    oz_action_hint_OK_intermediate: 'Genial, no mueva el teléfono...',
​
    processing_data: 'Procesando datos',
    uploading_data: 'Cargando datos',
    requesting_result: 'Solicitando resultados',
​
    network_video_analyses_status_failed: 'Error de análisis',
​
    oz_network_upload_status_processing: 'Cargando el video...',
    oz_network_upload_status_done: 'Video cargado',
    oz_network_upload_status_failed: 'Error de carga',
​
    oz_network_upload_status_processing_image: 'Cargando la foto...',
    oz_network_upload_status_done_image: 'Foto cargada',
    oz_network_upload_status_failed_image: 'Error de carga',
​
    oz_network_video_analyses_status_analyse_is: 'Análisis ',
    oz_network_video_analyses_status_analyse_is_processing: 'El análisis está en curso',
    oz_network_request_failed: 'Error de solicitud',
​
    oz_alert_dialog_fail_action_title: 'No se detectó la acción solicitada',
​
    oz_check_internet_connection: 'No hay conexión a Internet',
​
    see_on_this_text: 'Mire este texto',
​
    doc_upload_button: 'Cargue una imagen',
    doc_button_separator: '- o bien -',
    doc_capture_button: 'Tome una foto',    
    
    error_no_camera: 'Error: No se puede acceder a la cámara.',
    error_no_camera_ios: 'Error: No se puede acceder a la cámara. <br/>Utilice el navegador predeterminado (Safari).',
    error_bad_camera: 'Error: No se puede utilizar la cámara.',
    error_slow_backend: 'Este navegador no admite algunas funciones importantes. <br /><br /> Para su comodidad, abra esta página en otro navegador.',
    error_data_upload: 'Error de carga',
    error_result: 'Resultado del error.',
    error_unknown: 'Error desconocido.',
​
    error_upload_too_big: 'Error: Se ha superado el límite de tamaño del archivo.',
    error_upload_unknown: 'Error: No se pudo procesar el archivo.',