` HTML 元素，其中包含您希望 Amazon DCV Web 用戶端 SDK 從遠端 Amazon DCV 伺服器繪製內容串流的有效`id`位置。
例如：
```
DCV first connection
```
## 步驟 2：驗證、連線和取得第一個影格
本節說明如何完成使用者身分驗證程序、如何連接 Amazon DCV 伺服器，以及如何從 Amazon DCV 伺服器接收第一個內容影格。
首先，從 `index.js` 檔案匯入 Amazon DCV Web 用戶端 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 用戶端 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`呼函數會接收包含工作階段 ID () `sessionId` 和授權字符 (`authToken`) 的耦合陣列，以供`my_dcv_user`使用者在 Amazon DCV 伺服器上連線到每個工作階段。下列程式碼範例會呼叫連線函數，並連線到陣列中傳回的第一個工作階段。
**注意**
在下列程式碼範例中，將 取代`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));
}
```