Stellen Sie eine Connect zu einem DCV Amazon-Server her und holen Sie sich den ersten Frame - Amazon DCV
Schritt 1: Bereite deine Seite vor HTMLSchritt 2: Authentifizieren Sie sich, stellen Sie eine Verbindung her und rufen Sie den ersten Frame abBonus: Automatisch ein HTML Anmeldeformular erstellen

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Stellen Sie eine Connect zu einem DCV Amazon-Server her und holen Sie sich den ersten Frame

Das folgende Tutorial zeigt Ihnen, wie Sie Ihre HTML Seite für Ihren benutzerdefinierten Webclient vorbereiten, wie Sie sich authentifizieren und eine Verbindung zu einem DCV Amazon-Server herstellen und wie Sie den ersten Frame mit gestreamten Inhalten aus der DCV Amazon-Sitzung empfangen.

Schritt 1: Bereite deine Seite vor HTML

Auf Ihrer Webseite müssen Sie die benötigten JavaScript Module laden und ein <div> HTML Element mit einem gültigen Wert hinzufügen, id an dem der Amazon DCV Web Client SDK den Inhaltsstream vom DCV Remote-Amazon-Server Amazon soll.

Beispielsweise:

<!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>

Schritt 2: Authentifizieren Sie sich, stellen Sie eine Verbindung her und rufen Sie den ersten Frame ab

In diesem Abschnitt wird gezeigt, wie Sie den Benutzerauthentifizierungsprozess abschließen, wie Sie eine Verbindung zum DCV Amazon-Server herstellen und wie Sie den ersten Inhaltsframe vom DCV Amazon-Server empfangen.

Importieren Sie zunächst aus der index.js Datei den Amazon DCV Web ClientSDK. Es kann entweder als Universal Module Definition (UMD) -Modul importiert werden, wie folgt: 

import "./dcvjs/dcv.js"

Andernfalls kann es1.1.0, ausgehend von der Version, auch als ECMAScript Module (ESM) aus dem entsprechenden Paket importiert werden, etwa so: 

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

Definieren Sie die Variablen, die zum Speichern des Authentication-Objekts, des Connection-Objekts und des DCV Amazon-Servers verwendet URL werden sollen.

let auth,
    connection,
    serverUrl;

Beim Laden des Skripts protokollieren Sie die Amazon DCV Web SDK Client-Version und rufen Sie beim Laden der Seite die main Funktion auf. 

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

Die main Funktion legt die Protokollebene fest und startet den Authentifizierungsprozess. 

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

Die success Funktionen promptCredentialserror, und sind obligatorische Callback-Funktionen, die im Authentifizierungsprozess definiert werden müssen.

Wenn der DCV Amazon-Server zur Eingabe von Anmeldeinformationen auffordert, empfängt die promptCredentials Callback-Funktion die angeforderte Aufforderung zur Eingabe der Anmeldeinformationen vom Amazon-Server. DCV Wenn der DCV Amazon-Server für die Verwendung der Systemauthentifizierung konfiguriert ist, müssen die Anmeldeinformationen angegeben werden. In den folgenden Codebeispielen wird davon ausgegangen, dass der Benutzername my_dcv_user und das Passwort lautetmy_password.

Wenn die Authentifizierung fehlschlägt, empfängt die error Callback-Funktion ein Fehlerobjekt vom DCV Amazon-Server.

Wenn die Authentifizierung erfolgreich ist, empfängt die success Callback-Funktion ein Array von Paaren, das die Sitzungs-ID (sessionId) und die Autorisierungstoken (authToken) für jede Sitzung enthält, zu der der my_dcv_user Benutzer auf dem DCV Amazon-Server eine Verbindung herstellen darf. Das folgende Codebeispiel ruft die Connect-Funktion auf und stellt eine Verbindung zur ersten im Array zurückgegebenen Sitzung her.

Anmerkung

Ersetzen Sie es im folgenden Codebeispiel MY_DCV_USER durch Ihren eigenen Benutzernamen und MY_PASSWORD durch Ihr eigenes Passwort.

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 zum DCV Amazon-Server her. Die firstFrame Callback-Methode wird aufgerufen, wenn der erste Frame vom DCV Amazon-Server empfangen wird. 

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: Automatisch ein HTML Anmeldeformular erstellen

Das challenge Objekt wird zurückgegeben, wenn die promptCredentials Callback-Funktion aufgerufen wird. Es enthält eine Eigenschaft mit dem NamenrequiredCredentials, bei der es sich um ein Array von Objekten handelt — ein Objekt pro Anmeldeinformationen, die vom DCV Amazon-Server angefordert werden. Jedes Objekt enthält den Namen und den Typ der angeforderten Anmeldeinformationen. Sie können die requiredCredentials Objekte challenge und verwenden, um automatisch ein HTML Anmeldeformular zu erstellen.

Das folgende Codebeispiel zeigt Ihnen, wie das geht.

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