` HTML dengan valid `id` di mana Anda ingin Amazon DCV Web Client SDK menggambar aliran konten dari server Amazon DCV jarak jauh.
Contoh:
```
DCV first connection
```
## Langkah 2: Otentikasi, sambungkan, dan dapatkan frame pertama
Bagian ini menunjukkan cara menyelesaikan proses otentikasi pengguna, cara menghubungkan server Amazon DCV, dan cara menerima bingkai konten pertama dari server Amazon DCV.
Pertama, dari `index.js` file impor Amazon DCV Web Client SDK. Ini dapat diimpor baik sebagai modul Universal Module Definition (UMD), seperti:
```
import "./dcvjs/dcv.js"
```
Jika tidak, mulai dari versi`1.1.0`, itu juga dapat diimpor sebagai ECMAScript Modul (ESM) dari paket yang sesuai, seperti:
```
import dcv from "./dcvjs/dcv.js"
```
Tentukan variabel yang akan digunakan untuk menyimpan objek Authentication, objek Connection, dan URL server Amazon DCV.
```
let auth,
connection,
serverUrl;
```
Saat memuat skrip, catat versi Amazon DCV Web Client SDK, dan saat memuat halaman, panggil fungsinya. `main`
```
console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);
```
`main`Fungsi menetapkan tingkat log dan memulai proses otentikasi.
```
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
}
);
}
```
Fungsi`promptCredentials`,`error`, dan adalah `success` fungsi panggilan balik wajib yang harus didefinisikan dalam proses otentikasi.
Jika server Amazon DCV meminta kredensyal, fungsi `promptCredentials` callback akan menerima tantangan kredensyal yang diminta dari server Amazon DCV. Jika server Amazon DCV dikonfigurasi untuk menggunakan otentikasi sistem, kredensyal masuk harus disediakan. Contoh kode berikut mengasumsikan bahwa nama pengguna adalah `my_dcv_user` dan kata sandinya`my_password`.
Jika otentikasi gagal, fungsi `error` callback menerima objek kesalahan dari server Amazon DCV.
Jika autentikasi berhasil, fungsi `success` callback menerima larik pasangan yang menyertakan id sesi (`sessionId`) dan token otorisasi (`authToken`) untuk setiap sesi yang diizinkan untuk disambungkan oleh `my_dcv_user` pengguna di server Amazon DCV. Contoh kode berikut memanggil fungsi connect dan menghubungkan ke sesi pertama yang dikembalikan dalam array.
**catatan**
Dalam contoh kode berikut, ganti `MY_DCV_USER` dengan nama pengguna Anda sendiri dan `MY_PASSWORD` dengan kata sandi Anda sendiri.
```
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 ke server Amazon DCV. Metode `firstFrame` callback dipanggil ketika frame pertama diterima dari server Amazon 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: Secara otomatis membuat formulir login HTML
`challenge`Objek dikembalikan ketika fungsi `promptCredentials` callback dipanggil. Ini termasuk properti bernama `requiredCredentials` yang merupakan array objek - satu objek per kredensi yang diminta oleh server Amazon DCV. Setiap objek mencakup nama dan jenis kredensi yang diminta. Anda dapat menggunakan `challenge` dan `requiredCredentials` objek untuk secara otomatis membuat formulir login HTML.
Contoh kode berikut menunjukkan kepada Anda bagaimana melakukan ini.
```
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));
}
```