連線至 Amazon DCV 伺服器並取得第一個影格 - Amazon DCV
步驟 1：準備您的HTML頁面步驟 2：驗證、連線並取得第一個影格獎金：自動建立HTML登入表單

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

連線至 Amazon DCV 伺服器並取得第一個影格

下列教學課程示範如何準備自訂 Web 用戶端的HTML頁面、如何驗證和連線至 Amazon DCV 伺服器，以及如何從 Amazon DCV工作階段接收第一個串流內容影格。

步驟 1：準備您的HTML頁面

在網頁中，您必須載入所需的 JavaScript 模組，且必須新增一個<div>HTML元素，其中包含一個要SDK讓 Amazon DCV Web Client 從遠端 Amazon DCV 伺服器繪製內容串流的有效id元素。

例如：

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

步驟 2：驗證、連線並取得第一個影格

本節說明如何完成使用者身分驗證程序、如何連接 Amazon DCV 伺服器，以及如何從 Amazon DCV 伺服器接收第一個內容影格。

首先，從index.js檔案匯入 Amazon DCV Web Client SDK。它可以作為通用模組定義 （UMD） 模組匯入，如下所示：

import "./dcvjs/dcv.js"

否則，從版本 開始1.1.0，也可以從對應的套件匯入為ECMAScript模組 （ESM），如下所示：

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

定義用來存放身分驗證物件、連線物件和 Amazon DCV 伺服器 的變數URL。

let auth,
    connection,
    serverUrl;

在指令碼載入時，記錄 Amazon DCV Web Client SDK版本，並在頁面載入時呼叫 main函數。

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

main 函數會設定日誌層級並啟動身分驗證程序。

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

、 error 和 promptCredentials success函數是必須在身分驗證程序中定義的強制回呼函數。

如果 Amazon DCV 伺服器提示憑證，回promptCredentials呼函數會從 Amazon DCV 伺服器接收請求的憑證挑戰。如果 Amazon DCV 伺服器設定為使用系統身分驗證，則必須提供登入憑證。下列程式碼範例假設使用者名稱為 my_dcv_user，密碼為 my_password。

如果身分驗證失敗，回error呼函數會從 Amazon DCV 伺服器接收錯誤物件。

如果身分驗證成功，回success呼函數會針對my_dcv_user允許使用者在 Amazon DCV 伺服器上連線的每個工作階段，收到包含工作階段 ID （ sessionId ） 和授權權杖 （ authToken ） 的夫婦陣列。下列程式碼範例會呼叫連線函數，並連接至陣列中傳回的第一個工作階段。

注意

在下列程式碼範例中，MY_DCV_USER使用您自己的使用者名稱和MY_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);
}

連線至 Amazon DCV 伺服器。從 Amazon DCV 伺服器接收第一個影格時，呼叫回firstFrame呼方法。

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

獎金：自動建立HTML登入表單

當呼叫回promptCredentials呼函數時，會傳回challenge物件。它包含名為 物件requiredCredentials陣列的 屬性，每個 Amazon DCV 伺服器請求的憑證一個物件。每個物件都包含請求憑證的名稱和類型。您可以使用 challenge和 requiredCredentials 物件自動建立HTML登入表單。

下列程式碼範例會示範如何執行此操作。

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