Conecte-se a um DCV servidor da Amazon e obtenha o primeiro quadro - Amazon DCV
Etapa 1: prepare sua HTML páginaEtapa 2: Autenticar, conectar e obter o primeiro quadroBônus: crie automaticamente um formulário de HTML login

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Conecte-se a um DCV servidor da Amazon e obtenha o primeiro quadro

O tutorial a seguir mostra como preparar sua HTML página para seu cliente web personalizado, como autenticar e se conectar a um DCV servidor da Amazon e como receber o primeiro quadro de conteúdo transmitido da sessão da AmazonDCV.

Etapa 1: prepare sua HTML página

Em sua página da web, você deve carregar os JavaScript módulos necessários e adicionar um <div> HTML elemento com um válido id onde você deseja que o Amazon DCV Web Client SDK desenhe o fluxo de conteúdo do DCV servidor remoto da Amazon.

Por exemplo:

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

Etapa 2: Autenticar, conectar e obter o primeiro quadro

Esta seção mostra como concluir o processo de autenticação do usuário, como conectar o DCV servidor da Amazon e como receber o primeiro quadro de conteúdo do DCV servidor da Amazon.

Primeiro, a partir do index.js arquivo, importe o Amazon DCV Web ClientSDK. Ele pode ser importado como um módulo Universal Module Definition (UMD), da seguinte forma: 

import "./dcvjs/dcv.js"

Caso contrário, a partir da versão1.1.0, ele também pode ser importado como um ECMAScript Module (ESM) do pacote correspondente, assim: 

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

Defina as variáveis a serem usadas para armazenar o objeto Authentication, o objeto Connection e o DCV servidor AmazonURL.

let auth,
    connection,
    serverUrl;

No carregamento do script, registre a SDK versão do Amazon DCV Web Client e, no carregamento da página, chame a main função. 

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

A função main define o nível do log e inicia o processo de autenticação. 

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

As funções promptCredentials, error e success são funções obrigatórias de retorno de chamada que devem ser definidas no processo de autenticação.

Se o DCV servidor da Amazon solicitar credenciais, a função de promptCredentials retorno de chamada receberá o desafio de credencial solicitado do servidor da Amazon. DCV Se o DCV servidor da Amazon estiver configurado para usar a autenticação do sistema, as credenciais de login deverão ser fornecidas. Os exemplos de código a seguir presumem que o nome de usuário é my_dcv_user e que a senha é my_password.

Se a autenticação falhar, a função de error retorno de chamada recebe um objeto de erro do DCV servidor da Amazon.

Se a autenticação for bem-sucedida, a função de success retorno de chamada receberá uma matriz de casais que inclui o ID da sessão (sessionId) e os tokens de autorização (authToken) para cada sessão à qual o my_dcv_user usuário tem permissão para se conectar no servidor da AmazonDCV. O exemplo de código a seguir chama a função connect e se conecta à primeira sessão retornada na matriz.

nota

No exemplo de código a seguir, substitua MY_DCV_USER por seu próprio nome de usuário e MY_PASSWORD por sua própria senha.

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

Conecte-se ao DCV servidor da Amazon. O método de firstFrame retorno de chamada é chamado quando o primeiro quadro é recebido do DCV servidor Amazon. 

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

Bônus: crie automaticamente um formulário de HTML login

O objeto challenge é retornado quando a função de retorno de chamada promptCredentials é chamada. Ela inclui uma propriedade chamada requiredCredentials que é uma matriz de objetos — um objeto por credencial que é solicitado pelo DCV servidor da Amazon. Cada objeto inclui o nome e o tipo da credencial solicitada. Você pode usar os requiredCredentials objetos challenge e para criar automaticamente um formulário de HTML login.

O exemplo de código a seguir mostra como fazer isso.

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