Arriba

La implementación del chat se divide en partes Backend y Frontend:

Backend

API

La integración del chat requiere una interfaz API para intercambiar datos entre el chat y el sitio conectado para sincronizar la información del usuario. Por ejemplo, mostrar los nombres y avatares reales de los usuarios del sitio.

Este archivo es un ejemplo de implementaciones de todas las interfaces de chat https://github.com/imbasynergy/ImbaChat-OctoberCMS/blob/master/controllers/apiChat.php

Autorización

Todas las solicitudes de ImbaChat al sitio integrado contienen datos para su autorización. Los datos le permiten verificar que la solicitud se envía desde imbachat.com.

Hay parámetros en la ventana de configuración del widget en la cuenta de usuario llamados "API login" y "API password". Se transfieren con el acceso desde el servidor de chat al servidor del sitio conectado en el encabezado "Authorization".

Ejemplo de verificación de autorización en PHP:

    $login = Settings::get('dev_login');
    $password = Settings::get('dev_password');

    if(!isset($_SERVER['PHP_AUTH_USER'])
            || ($_SERVER['PHP_AUTH_PW']!=$password) 
            || strtolower($_SERVER['PHP_AUTH_USER'])!=$login)
    {
        header('WWW-Authenticate: Basic realm="Backend"');
        header('HTTP/1.0 401 Unauthorized');
        echo json_encode([
                "code" => 401,
                "version" => $this->getApiVersion()['version'],
                "error" => 'Authenticate required!',
                'debug' => ''
            ]);
        die();
    }

Como puede ver, los parámetros API login yAPI password en PHP de la configuración del widget en la cuenta de usuario en http://imbachat.com se colocan en$ _SERVER ['PHP_AUTH_USER']y$ _SERVER [ 'PHP_AUTH_PW'].

Obtener información sobre los usuarios

En la cuenta de usuario, hay un parámetro Users info UR que indica dónde debe llevar el chat la información sobre los usuarios.

El chat enviará una solicitud a la dirección Users info URL, pasando una lista de ID de usuario para los que se necesita información.

En respuesta, se espera JSON con la estructura:

[
    {
        "user_id" : 6,
        "name" : "John",
    },
    {
        "user_id" : 6,
        "name" : "John",
    }
]

Los campos user_id y name son obligatorios. Además, el chat puede aceptar y procesar campos adicionales. Un ejemplo de una respuesta más detallada con información del usuario:

[
    {
     "user_id" : 6,
     "avatar_url" : "http://comet-server.ru/doc/CometQL/Star.Comet-Chat/img/avatar0.png",
     "name" : "John",
     "profiles" : {
                    "11" : {
                        "user_id" : "P11-A",
                        "avatar_url" : "http://comet-server.ru/doc/CometQL/Star.Comet-Chat/img/avatar0.png",
                        "name" : "P11-John",
                    },
                }
    }
]

Tenga en cuenta que la respuesta se espera como una matriz con información sobre uno o más usuarios.

Un ejemplo de implementación de una función para entregar información al usuario

An implementation example of a function for delivering user information

<?php

// credentials for getting users data from server:
$login = "root";   
$password = "abc";

if(!isset($_SERVER['PHP_AUTH_USER']) || ($_SERVER['PHP_AUTH_PW']!=$password) || strtolower($_SERVER['PHP_AUTH_USER'])!=$login)
{
    // AUTH FAIL
    header('WWW-Authenticate: Basic realm="Backend"');
    header('HTTP/1.0 401 Unauthorized');
    echo json_encode([
                "code" => 401,
                "version" => $this->getApiVersion()['version'],
                "error" => 'Authenticate required!',
                'debug' => ''
            ]);
    die();
}

// AUTH SUCCESS

// getting array of user ids:
$id_array = preg_replace("/[^0-9,]/", '', $_GET['user_ids']);

// establishing database connection:
$db_connection = mysqli_connect("localhost", "user", "pass","bd", 3306);

// set users table:
$users_table = "ktvs_users";

// set user ID column:
$users_param = "user_id";

// getting users from the database by their ids:
$sql = "SELECT * FROM $users_table WHERE $users_param IN ( $id_array )";
$users_query = mysqli_query($db_connection, $sql);
$num_rows = mysqli_num_rows($users_query);
$result = [];

if($num_rows>0)
{
    while($rows = mysqli_fetch_assoc($users_query))
    {
        $user_id = $rows['user_id'];
        $user_name = $rows['display_name'];
        $login_date = $rows['last_login_date'];
        $badge = $rows['custom10'];
    if(!empty($rows['avatar']))
    {
            $avatar = "https://www.example.com/contents/avatars/".$rows['avatar'];
    } else {
            $avatar = false;
    }
        $link = "https://www.example.com/members/".$user_id."/";

        $result[] = array(
        'user_id' => $user_id,
        'name' => $user_name,
        'avatar_url' => $avatar,
        'profile_url' => $link, 
        'lastlogin' => strtotime($login_date),
        'badge' => $badge
    );
    }
}

// JSON object with users data:
echo json_encode($result);

Frontend

Autorización de usuario de chat

Para autorizar a los usuarios del sitio conectado en el chat, debe generar correctamente el token JWT y pasarlo como el parámetro user_key en el objeto con otros parámetros de inicialización del chat.

Para generar un token JWT que se aceptará como válido, debe tener una clave secreta (está firmada como Secret key en la cuenta de usuario). Se puede obtener en forma de configuración del widget en el sitio imbachat.com.

Un ejemplo de implementación de una función para generar un token: 


function getJWT($user_id, $secret_key, $time)
{
    // Create token header as a JSON string
    $header = json_encode(['typ' => 'JWT', 'alg' => 'HS256']);
    $pass = $secret_key;
    $data = array();
    $data['exp'] = (int)date('U')+$time;
    $data['user_id'] = (int)$user_id;

    // Create token payload as a JSON string
    $payload = json_encode($data);

    // Encode Header to Base64Url String
    $base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($header));

    // Encode Payload to Base64Url String
    $base64UrlPayload = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($payload));

    // Create Signature Hash
    $signature = hash_hmac('sha256', $base64UrlHeader . "." . $base64UrlPayload, $pass, true);

    // Encode Signature to Base64Url String
    $base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($signature));

    // Create JWT
    return trim($base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature);
}

El primer argumento es el parámetro de Secret Key, se puede cambiar en la configuración del widget en su gabinete. El segundo argumento es la identificación del usuario en su base de datos para el cual se genera el token JWT. La función devolverá la cadena que usa en el parámetro user_key en la configuración del widget.

Ejemplo de llamada a una función para generar un token:

$user_id = 1;
$secret_key = 'lPXBFPqNg3f661JcegBY0N0dPXqUBdHXqj2cHf04PZgLHxT6z55e20ozojvMRvB8';
echo getJWT($user_id, $secret_key, 3600);

Es decir, al instalar un widget de chat en tu sitio web, implementas un sistema de autenticación de usuario: al generar una página en la que hay chat, se determina el identificador del usuario que solicitó la página, y personalmente generas un token para ello. Cada usuario está autenticado en este esquema. No la clave secreta, pero el token que se genera con esta clave ya se transfirió a la interfaz.

Cuando el chat recibe un token del usuario, verifica que se haya generado con su clave. Y solo después de eso, da acceso al chat y una lista de diálogos.

Cómo habilitar el widget

  1. Primero necesita habilitar javascript de ImbaChat. Parece que <script src =" http://api.imbachat.com/imbachat/v1/``DEV_ID``/widget "> </script> , hay una ID de widget en lugar de DEV_ID (mira la página de widgets).

  2. A continuación, insertamos el script de descarga del chat.

function imbachatWidget(opt){
    if(!window.ImbaChat){
    return setTimeout(imbachatWidget, 50, opt)
    }
    window.ImbaChat.load(opt);
}
imbachatWidget({
    user_id: "<?= $user_id ?>",
    token: "<?= getJWT($user_id, $secret_key, 3600) ?>"
});

Agregar un nuevo usuario a un diálogo. API de widget

Crear un diálogo entre el usuario actual y el usuario con id = 2 (por ejemplo, para implementar el botón "Write message" en el perfil de usuario). Para crear un diálogo, llame a esta función y pase la identificación del usuario con el que desea crear un diálogo como primer argumento.

window.imbaApi.openDialog(2)

Otros artículos: