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"]
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>
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)
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
productno esbind). - Llamar al método
showCaptchade la instancia de captcha (el valor deproductesbind).
<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)
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)
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() {...})
Configuración de idioma
initGeetest({..., language: 'zh'}, function() {...})
| 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.

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...
})
})
