logoDocumentación
Buscar

Guía de integración del SDK web

Compatibilidad

Elemento Descripción
Compatibilidad IE9+, Chrome, Firefox, Safari, Opera, navegadores móviles principales, WebView integrado en iOS y Android

Formas de verificación

["slide","icon","nine","match"]
              
              ["slide","icon","nine","match"]

            
Este bloque de código se muestra en una ventana flotante

Formas compatibles actualmente:

Nombre Descripción
slide Rompecabezas deslizante
icon Clic secuencial de iconos
nine Cuadrícula de 9
match Juego de combinar tres

Inicio rápido

Importar

Archivo gt4.js

Proporcionado por EngageLab

Al importar gt4.js, se montará globalmente la función de inicialización initGeetest.

<script src="https://captcha-stat.engagelab.com/www/gt4.js"></script>
              
              <script src="https://captcha-stat.engagelab.com/www/gt4.js"></script>

            
Este bloque de código se muestra en una ventana flotante

Inicializar el captcha

💡 Consejo

Antes de la inicialización, se debe obtener un ID de verificación del servidor. Consulte los parámetros de configuración para obtener más detalles.

Se utiliza la función initGeetest para obtener la instancia de captcha. El primer parámetro de esta función son los parámetros de configuración del captcha y el segundo parámetro es la función de devolución de llamada tras completarse la inicialización.

var config = { captchaId: 'xxxx', // Verification ID apiServers: ['https://captcha-api.engagelab.com'], // List of verification server addresses, must be configured as required staticServers: ['https://captcha-stat.engagelab.com/www/js'] // List of static resource server addresses, must be configured as required } /** * @desc Callback after initialization is completed * @param { Object } gt Captcha instance */ var callback = function(gt) { // Handle related business based on the captcha instance, such as triggering the captcha window, listening for successful verification events... } initGeetest(config, callback)
              
              var config = {
    captchaId: 'xxxx', // Verification ID
    apiServers: ['https://captcha-api.engagelab.com'], // List of verification server addresses, must be configured as required
    staticServers: ['https://captcha-stat.engagelab.com/www/js'] // List of static resource server addresses, must be configured as required
}
/**
 * @desc Callback after initialization is completed
 * @param { Object } gt Captcha instance
 */
var callback = function(gt) {
  // Handle related business based on the captcha instance, such as triggering the captcha window, listening for successful verification events...
}
initGeetest(config, callback)

            
Este bloque de código se muestra en una ventana flotante

Activar la ventana de captcha

💡 Consejo

Junto con el parámetro de configuración product, hay dos maneras de activar la ventana de captcha:

  • Hacer clic en el botón integrado proporcionado para activar (el valor de product no es bind).
  • Llamar al método showCaptcha de la instancia de captcha (el valor de product es bind).
<div id="captch_wrap" class="captch-wrap"></div> var config = { captchaId: 'xxxx', // Verification ID apiServers: ['https://captcha-api.engagelab.com'], // List of verification server addresses, must be configured as required staticServers: ['https://captcha-stat.engagelab.com/www/js'], // List of static resource server addresses, must be configured as required product: 'bind' // Scenario 2 } /** * @desc Callback after initialization is completed * @param { Object } gt Captcha instance */ var callback = function(gt) { gt.onReady(function() { // Scenario 1: Use the built-in button provided by EngageLab to trigger the captcha window // Add the built-in button to the specified area gt.appendTo("#captch_wrap") // Scenario 2: Custom trigger for the captcha window // Call the instance's showCaptcha method during a specific event // For example, trigger immediately after the captcha is ready gt.showCaptcha() }) } initGeetest(config, callback)
              
              <div id="captch_wrap" class="captch-wrap"></div>
var config = {
    captchaId: 'xxxx', // Verification ID
    apiServers: ['https://captcha-api.engagelab.com'], // List of verification server addresses, must be configured as required
    staticServers: ['https://captcha-stat.engagelab.com/www/js'], // List of static resource server addresses, must be configured as required
    product: 'bind' // Scenario 2
}
/**
 * @desc Callback after initialization is completed
 * @param { Object } gt Captcha instance
 */
var callback = function(gt) {
    gt.onReady(function() {
      // Scenario 1: Use the built-in button provided by EngageLab to trigger the captcha window
      // Add the built-in button to the specified area
      gt.appendTo("#captch_wrap")
      // Scenario 2: Custom trigger for the captcha window
      // Call the instance's showCaptcha method during a specific event
      // For example, trigger immediately after the captcha is ready
      gt.showCaptcha()
    })
}
initGeetest(config, callback)

            
Este bloque de código se muestra en una ventana flotante

Obtener el resultado de la verificación

/** * @desc Callback after initialization is completed * @param { Object } gt Captcha instance */ var callback = function(gt) { // Trigger captcha window... // Listen for verification results gt.onSuccess(function(res) { console.log(res) }) } initGeetest({...}, callback)
              
              /**
 * @desc Callback after initialization is completed
 * @param { Object } gt Captcha instance
 */
var callback = function(gt) {
    // Trigger captcha window...
    // Listen for verification results
    gt.onSuccess(function(res) {
        console.log(res)
    })
}
initGeetest({...}, callback)

            
Este bloque de código se muestra en una ventana flotante

Parámetros de configuración

Parámetros de configuración

Parámetro Tipo Descripción Valor predeterminado
captchaId string ID de verificación, obtenido del backend de EngageLab Obligatorio
product string Modo de visualización de la ventana de captcha; valores admitidos: float, popup, bind float
language string Se prioriza el valor proporcionado, seguido del idioma actual del navegador. Si ninguno coincide correctamente, se utiliza el valor predeterminado zh
protocol string Protocolo de red //
apiServers array Dirección del servicio de solicitudes de verificación (excluyendo el protocolo); se debe configurar como ['https://captcha-api.engagelab.com'] -
staticServers array Dirección del servicio de recursos estáticos requerida para la verificación (excluyendo el protocolo); se debe configurar como ['https://captcha-stat.engagelab.com/www/js'] -
post boolean Cuando se establece en true, el método de solicitud es ajax; en caso contrario, es jsonp false
showSuccessTip boolean Controla la ventana de notificación de éxito cuando product es bind true
riskType string Especifica formas de verificación como deslizamiento, clic, etc. (solo es efectivo cuando el modo de verificación del sistema backend se establece en modo de fusión de riesgos) -
timeout number Tiempo de espera de las solicitudes de verificación 30000
offlineCb function Función personalizada de gestión sin conexión -
onError function Captura de errores antes de la inicialización de captcha -
mask Object Configuración de la máscara de la ventana de captcha
nativeButton Object Configuración relacionada con el botón integrado
toolbar Array Configuración de la barra de herramientas
clientType string Tipo de cliente; valores disponibles: web
width string Establece el ancho de la ventana de captcha. El ancho máximo es 340px (la altura de la ventana de captcha es adaptable; la relación de aspecto es aproximadamente 340px
zoom number Valor de escalado para escenarios especiales; no está limitado por el valor máximo (el valor fijo es 1 en el navegador Firefox) 1

Configuración del objeto mask

Parámetro Tipo Descripción Valor predeterminado
backgroundColor string Valor de color válido -
outside boolean Cerrar captcha al hacer clic fuera del área de captcha -

Configuración del objeto nativeButton

Parámetro Tipo Descripción Valor predeterminado
width string Ancho del botón integrado de activación -
height string Alto del botón integrado de activación -

Configuración del array toolbar

initGeetest({..., toolbar: ['close', 'refresh']}, function() {...})
              
              initGeetest({..., toolbar: ['close', 'refresh']}, function() {...})

            
Este bloque de código se muestra en una ventana flotante

Configuración de idioma

initGeetest({..., language: 'zh'}, function() {...})
              
              initGeetest({..., language: 'zh'}, function() {...})

            
Este bloque de código se muestra en una ventana flotante
Valor válido Tipo Descripción
close string Botón para cerrar la ventana de captcha
refresh string Botón para actualizar la ventana de captcha

Idioma (18 tipos)

Valor Idioma
ara Árabe
deu Alemán
eng Inglés
fra Francés
ind Indonesio
jpn Japonés
kor Coreano
msa Malayo
pon Portugués de Brasil
por Portugués europeo
rus Ruso
spa Español
tha Tailandés
udm Uigur
vie Vietnamita
zh Chino simplificado
zho-hk Chino tradicional (Hong Kong)
zho-tw Chino tradicional (Taiwán)

Modo sin conexión de verificación de comportamiento

El modo sin conexión se configura para gestionar situaciones extremas, garantizando que los procesos de verificación de captcha anómalos no afecten a los procesos de negocio normales.

El modo sin conexión se produce principalmente cuando el servidor principal del sitio web no puede conectarse al servidor de verificación, lo que provoca tiempos de espera de conexión y otros problemas.

En modo sin conexión, todos los procesos de verificación omiten el servidor de verificación. El integrador debe añadir la lógica de verificación o disponer de un plan de contingencia.

image

Cuando el servidor de verificación entra en modo sin conexión:

El proceso del cliente no cambia y, al activar el captcha, se aprobará inmediatamente, entrando en onSuccess.

El sistema de negocio envía una solicitud de verificación secundaria al sistema de captcha y, si se agota el tiempo de espera, se confirma como sin conexión.

initGeetest({...}, function(gt) { ... gt.onSuccess(function(res) { console.log(res) // Example of successful verification result { captcha_id: "59bbe0f128f0624fdd185a6a2207aa54", captcha_output: "X000Q5p.....i-SFRyH1", client_type: "web", gen_time: "1648204854", lot_number: "200e2e58e1d3a6906e08cc9ff5c6e0b5", offline: true, pass_token: "e000b4dc372c1397976f7b8f12d66ea8d5c993ab2db5810258e835429f6fa4ae" } // Submit to the business system... }) })
              
              initGeetest({...}, function(gt) {
    ...
    gt.onSuccess(function(res) {
        console.log(res) // Example of successful verification result
        {
            captcha_id: "59bbe0f128f0624fdd185a6a2207aa54",
            captcha_output: "X000Q5p.....i-SFRyH1",
            client_type: "web",
            gen_time: "1648204854",
            lot_number: "200e2e58e1d3a6906e08cc9ff5c6e0b5",
            offline: true,
            pass_token: "e000b4dc372c1397976f7b8f12d66ea8d5c993ab2db5810258e835429f6fa4ae"
        }
        // Submit to the business system...
    })
})

            
Este bloque de código se muestra en una ventana flotante
Icon Solid Transparent White Qiyu
Contacto