Come accedere ai desktop remoti usando Apache Guacamole

Tutorial

JavaScript

Che cos’è Apache Guacamole?

Apache Guacamole è un framework open-source creato dalla Apache Foundation che fornisce un’applicazione HTML5 che funge da gateway per desktop remoti per consentire l’accesso a desktop remoti tramite i protocolli RDP, SSH e VNC senza l’utilizzo di altri software di terze parti.

La soluzione Guacamole comprende molti componenti individuali, come libguac, guacamole-common e guacamole-ext. Mentre questi progetti esulano dallo scopo di questo articolo, ci concentreremo su guacamole-common-js all’interno dell’ecosistema Guacamole.

Che cos’è guacamole-common-js?

Il progetto Guacamole fornisce un’API JavaScript per interfacciarsi con i componenti progettati per soddisfare le specifiche di Guacamole. L’API guacamole-common-js offre un’implementazione JavaScript di un client Guacamole e meccanismi di tunneling per trasferire i dati del protocollo da JavaScript al lato server dell’applicazione. Il lato server esegue tipicamente una macchina con guacd o il demone Guacamole. La libreria guacamole-common-js fornisce oggetti di astrazione del mouse e della tastiera per tradurre gli eventi del mouse e della tastiera di JavaScript in dati che Guacamole può facilmente digerire.

Usare guacamole-common-js per creare un client Guacamole personalizzato

Prerequisiti: installare guacamole-common-js tramite un qualsiasi gestore di pacchetti a scelta. In questo esempio, useremo npm.

Shell

npm i guacamole-common-js

Passo 1: Creare un tunnel Guacamole

Creare un tunnel Guacamole permette di trasmettere dati senza sforzo tra il server e il client.

JavaScript

const Guacamole = require('guacamole-common-js')

​

let tunnel = new Guacamole.Tunnel("path/to/your/tunnel");

È possibile passare parametri aggiuntivi al proprio server tramite l’URL del tunnel utilizzando parametri di query. Ad esempio, l’URL del tunnel può sembrare path/to/your/tunnel?param1=value1&param2=value2.

Passo 2: Utilizzare l’oggetto Tunnel per Creare un Client Guacamole

È possibile creare un oggetto Client Guacamole passando l’oggetto Tunnel che avete appena creato al costruttore Guacamole.Client.

JavaScript

let guacClient = new Guacamole.Client(tunnel)

Passo 3: Chiamare la Funzione Connect per Stabilire la Connessione

Quindi, abbiamo l’istanza di Tunnel Guacamole e l’istanza di Client Guacamole. Questi sono tutto ciò che serve per stabilire una connessione alla nostra macchina remota.

JavaScript

guacClient.connect()

Solo una cosa da ricordare: l’oggetto Guacamole.Tunnel passato nel costruttore Guacamole.Client non deve essere già connesso. Questo perché, internamente, il metodo guacClient.connect() chiamerà il metodo tunnel.connect(), e se il tunnel è già connesso, questa operazione fallirà.

Ora, quelli di voi più astuti scopriranno che ancora non vedete i contenuti della vostra macchina remota sul client. Questo perché ci manca ancora un passo cruciale.

Passo 4: Ottenere il Display Guacamole e Attaccarlo al DOM

Dopo aver stabilito la connessione chiamando guacClient.connect(), è possibile visualizzare il display della macchina remota attaccando il display Guacamole (un HTMLDivElement) al DOM. Vediamo come possiamo farlo.

Immagina di avere una pagina HTML dove desideri visualizzare il display della tua macchina remota.

HTML

<html>  

  <body id="guacCanvas">

  </body>

</html>

Successivamente, otteniamo il HTMLDivElement, che deve essere visualizzato all’utente dal guacClient.

JavaScript

// Get the display element from the guacClient

let displayElement = guacClient.getDisplay().getElement(); 

// Get the element from the DOM and attach the displayElement to it

let guacCanvas = document.getElementById('guacCanvas'); 

// Attach the displayElement to the canvas

guacCanvas.appendChild(displayElement);

Et voilà! Ora vedi i contenuti della tua macchina remota nel tuo DOM. Ma attendi, qualcosa non va. La tua input da tastiera non fa nulla, né lo fa il mouse. Come affrontiamo questo problema?

Passo 5: Configurare Eventi da Tastiera e Mouse

Per configurare gli eventi da tastiera e mouse, devi impostare i gestori di input forniti da guacamole-common-js.

Prima vediamo come possiamo configurare gli eventi del mouse.

JavaScript

let mouse = new Guacamole.Mouse(guacElement)

​

// Primarily you need to handle 3 events. onmousedown, onmouseup, onmousemove.

// The high level idea is to send the current state of the mouse to guacamole

// whenever the mouse moves, the mouse gets clicked or unclicked.

const sendMouseState = (mouseState) => {

    guacClient.sendMouseState(mouseState);

}

​

// Essentially sending mouse state for all the individual events

mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = sendMouseState;

La configurazione della tastiera è ancora più semplice perché ci sono solo due eventi che devono essere configurati.

JavaScript

let keyboard = new Guacamole.Keyboard(guacElement); 

// you need to pass in the HTMLElement here where you want the keyboard events to 

// be passed into Guacamole. For example, if you pass in the document object instead

// of guacElement, you'll send all the events in the entire DOM to Guacamole, which may

// or may not be something you want. If you don't have any other UI elements in your

// DOM, you should be fine sending document, but if you have other UI elements in addition

// to your guacCanvas, you'd be better off passing just the guacCanvas.

​

​

// You need to configure 2 events. onkeyup and onkeydown

 keyboard.onkeydown = (keysym: number) => {

    guacClient.sendKeyEvent(1, keysym); // Send keydown event to the remote server

  };

​

  keyboard.onkeyup = (keysym: number) => {

    guacClient.sendKeyEvent(0, keysym); // Send keyup event to the remote server

  };

Passo 6: Configurare Eventi Touch (Opzionale)

Opzionalmente, puoi anche configurare il tuo client per input touch, ma saranno tradotti in eventi Guacamole.Mouse.

JavaScript

let touch = new Guacamole.Touch(guacCanvas);

​

// You need to configure 3 events here ontouchstart, ontouchend, ontouchmove

touch.onmousedown = touch.onmouseup = touch.onmousemove = 

  (touchState) => guacClient.sendMouseState(touchState);

​

const handleTouchEvent = (event) => {

  event.preventDefault();

  let touchState = touch.getMouseState(event);

  guacClient.sendMouseState(touchState);
}
​
touch.ontouchstart = touch.ontouchend = touch.ontouchmove = handleTouchEvent;

Como puoi vedere, stiamo traducendo gli eventi touch in eventi del mouse di Guacamole, e questo passo è entirely opzionale. Devi configurare gli eventi touch solo se intendi utilizzare il tuo client personalizzato su un dispositivo touchscreen.

Passo 7: Disconnettersi dalla Macchina Remota

Infine, siamo arrivati all’ultimo passo, che è la disconnessione dalla tua macchina remota, e è semplice come chiamare un metodo sul tuo client.

JavaScript

guacClient.disconnect();

Conclusione

In sintesi, Apache Guacamole è un potente e versatile framework open-source che offre un modo fluido per accedere a desktop remoto attraverso i protocolli RDP, SSH o VNC. La libreria guacamole-common-js permette agli sviluppatori di creare clienti Guacamole personalizzati che possono interfacciarsi con altri componenti Guacamole come guacamole-common, guaclib e guacamole-ext.

Seguendo i passaggi illustrati in questo articolo, è possibile configurare un client guacamole personalizzato di base che può connettersi ai tuoi server remoto e gestire eventi di tastiera, mouse e tocco.

Source:
https://dzone.com/articles/access-remote-desktops-using-apache-guacamole-a-ba