Connect a un server NICE DCV e ottieni il primo frame - NICE DCV
Fase 1: Preparare la pagina HTMLFase 2: Autenticazione, connessione e acquisizione del primo frameBonus: crea automaticamente un modulo di accesso HTML

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Connect a un server NICE DCV e ottieni il primo frame

Il seguente tutorial mostra come preparare la pagina HTML per il client web personalizzato, come autenticarsi e connettersi a un server NICE DCV e come ricevere il primo frame di contenuto in streaming dalla sessione NICE DCV.

Fase 1: Preparare la pagina HTML

Nella pagina Web, è necessario caricare i JavaScript moduli necessari e aggiungere un elemento <div> HTML con un valore valido id in cui si desidera che l'SDK NICE DCV Web Client attiri il flusso di contenuti dal server NICE DCV remoto.

Per esempio:

<!DOCTYPE html>
<html lang="en" style="height: 100%;">
  <head>
    <title>DCV first connection</title>
  </head>
  <body style="height: 100%;">
    <div id="root" style="height: 100%;"></div>
    <div id="dcv-display"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

Fase 2: Autenticazione, connessione e acquisizione del primo frame

Questa sezione mostra come completare il processo di autenticazione dell'utente, come connettere il server NICE DCV e come ricevere il primo frame di contenuto dal server NICE DCV.

Innanzitutto, dal index.js file importate il NICE DCV Web Client SDK. Può essere importato sia come modulo Universal Module Definition (UMD), in questo modo: 

import "./dcvjs/dcv.js"

Altrimenti, a partire dalla versione1.1.0, può anche essere importato come modulo ECMAScript (ESM) dal pacchetto corrispondente, in questo modo: 

import dcv from "./dcvjs/dcv.js"

Definire le variabili da utilizzare per memorizzare l'oggetto Authentication, l'oggetto Connection e l'URL del server NICE DCV.

let auth,
    connection,
    serverUrl;

Al caricamento dello script, registra la versione di NICE DCV Web Client SDK e, al caricamento della pagina, chiama la funzione. main 

console.log("Using NICE DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);

La main funzione imposta il livello di registro e avvia il processo di autenticazione. 

function main () {
  console.log("Setting log level to INFO");
  dcv.setLogLevel(dcv.LogLevel.INFO);

  serverUrl = "https://your-dcv-server-url:port/";

  console.log("Starting authentication with", serverUrl);

  auth = dcv.authenticate(
    serverUrl,
    {
      promptCredentials: onPromptCredentials,
      error: onError,
      success: onSuccess
    }
  );
}

Le funzioni promptCredentialserror, e sono success funzioni di callback obbligatorie che devono essere definite nel processo di autenticazione.

Se il server NICE DCV richiede le credenziali, la funzione di promptCredentials callback riceve la richiesta di credenziali dal server NICE DCV. Se il server NICE DCV è configurato per utilizzare l'autenticazione del sistema, è necessario fornire le credenziali di accesso. I seguenti esempi di codice presuppongono che il nome utente sia my_dcv_user e che la password sia. my_password

Se l'autenticazione fallisce, la funzione di error callback riceve un oggetto di errore dal server NICE DCV.

Se l'autenticazione ha esito positivo, la funzione di success callback riceve una serie di coppie che include l'id di sessione (sessionId) e i token di autorizzazione (authToken) per ogni sessione a cui l'my_dcv_userutente può connettersi sul server NICE DCV. Il seguente esempio di codice richiama la funzione connect e si connette alla prima sessione restituita nell'array.

Nota

Nel seguente esempio di codice, MY_DCV_USER sostituitelo con il vostro nome utente e MY_PASSWORD con la vostra password.

function onPromptCredentials(auth, challenge) {
  // Let's check if in challege we have a username and password request
  if (challengeHasField(challenge, "username") && challengeHasField(challenge, "password")) {
    auth.sendCredentials({username: MY_DCV_USER, password: MY_PASSWORD})
  } else {
    // Challenge is requesting something else...
  }
}

function challengeHasField(challenge, field) {
  return challenge.requiredCredentials.some(credential => credential.name === field);
}

function onError(auth, error) {
  console.log("Error during the authentication: " + error.message);
}

// We connect to the first session returned
function onSuccess(auth, result) {
  let {sessionId, authToken} = {...result[0]};

  connect(sessionId, authToken);
}

Connect al server NICE DCV. Il metodo firstFrame callback viene chiamato quando il primo frame viene ricevuto dal server NICE DCV. 

function connect (sessionId, authToken) {
  console.log(sessionId, authToken);

  dcv.connect({
    url: serverUrl,
    sessionId: sessionId,
    authToken: authToken,
    divId: "dcv-display",
    callbacks: {
      firstFrame: () => console.log("First frame received")
    }
  }).then(function (conn) {
    console.log("Connection established!");
    connection= conn;
  }).catch(function (error) {
    console.log("Connection failed with error " + error.message);
  });
}

Bonus: crea automaticamente un modulo di accesso HTML

L'challengeoggetto viene restituito quando viene promptCredentials chiamata la funzione di callback. Include una proprietà denominata requiredCredentials che è una matrice di oggetti: un oggetto per credenziale richiesta dal server NICE DCV. Ogni oggetto include il nome e il tipo della credenziale richiesta. È possibile utilizzare gli requiredCredentials oggetti challenge e per creare automaticamente un modulo di accesso HTML.

Il seguente esempio di codice mostra come eseguire questa operazione.

let form,
    fieldSet;

function submitCredentials (e) {
  var credentials = {};
  fieldSet.childNodes.forEach(input => credentials[input.id] = input.value);
  auth.sendCredentials(credentials);
  e.preventDefault();
}

function createLoginForm () {
  var submitButton = document.createElement("button");

  submitButton.type = "submit";
  submitButton.textContent = "Login";

  form = document.createElement("form");
  fieldSet = document.createElement("fieldset");

  form.onsubmit = submitCredentials;
  form.appendChild(fieldSet);
  form.appendChild(submitButton);

  document.body.appendChild(form);
}

function addInput (name) {
  var type = name === "password" ? "password" : "text";

  var inputField = document.createElement("input");
  inputField.name = name;
  inputField.id = name;
  inputField.placeholder = name;
  inputField.type = type;
  fieldSet.appendChild(inputField);
}

function onPromptCredentials (_, credentialsChallenge) {
  createLoginForm();
  credentialsChallenge.requiredCredentials.forEach(challenge => addInput(challenge.name));
}