` 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));
}
```
# Bekerja dengan fitur Amazon DCV
Ketersediaan fitur Amazon DCV tergantung pada izin yang dikonfigurasi untuk sesi Amazon DCV dan kemampuan browser web klien.
Fitur yang tersedia dalam sesi Amazon DCV dikelola oleh izin yang telah ditentukan untuk sesi tersebut. Ini berarti bahwa meskipun fitur didukung oleh Amazon DCV Web Client SDK, akses ke fitur tersebut dapat dicegah berdasarkan izin yang ditentukan oleh administrator sesi. Untuk informasi selengkapnya, lihat [Mengonfigurasi Otorisasi Amazon DCV di Panduan](https://docs.aws.amazon.com/dcv/latest/adminguide/security-authorization.html) Administrator *Amazon DCV*.
## Memahami fungsi callback featuresUpdate
Saat ketersediaan fitur dalam sesi Amazon DCV berubah, SDK Klien Web Amazon DCV memberi tahu Anda menggunakan fungsi `featuresUpdate` panggilan balik yang Anda tentukan pada saat membuat sambungan. Contoh:
```
featuresUpdate: function (connection, list) {
...
},
```
Fungsi callback hanya memberi tahu Anda tentang fitur yang ketersediaannya telah berubah. `list`Parameternya adalah array string, dan hanya mencakup nama-nama fitur yang diperbarui. Misalnya, jika ketersediaan fitur input audio berubah untuk sesi, parameter hanya mencakup`["audio-in"]`. Jika di kemudian hari, ketersediaan fitur salin dan tempel clipboard berubah untuk sesi, parameter hanya mencakup. `["clipboard-copy", "clipboard-paste"]`
## Menangani pembaruan fitur
Fungsi `featuresUpdate` callback hanya memberi tahu Anda bahwa ketersediaan satu atau beberapa fitur telah berubah. Untuk mengetahui fitur mana yang diperbarui, Anda harus menanyakan fitur menggunakan `connection.queryFeature` metode ini. Ini dapat dilakukan kapan saja setelah pemberitahuan perubahan diterima. Metode ini mengembalikan a `Promise` yang menyelesaikan status diperbarui fitur yang diminta. `status`Nilai selalu dikaitkan dan memiliki properti Boolean (`true`\$1`false`) yang disebut`enabled`. Beberapa fitur mungkin memiliki properti tambahan dalam `status` nilai. Jika ketersediaan fitur belum diperbarui, itu ditolak.
Kode contoh berikut menunjukkan bagaimana melakukan hal ini.
```
// Connection callback called
function featuresUpdate (_, list) {
if (list.length > 0) {
list.forEach((feat) => {
connection.queryFeature(feat).then(status => console.log(feat, "is", status.enabled)));
});
}
}
```
# Menggunakan Amazon DCV Web UI SDK
Tutorial berikut menunjukkan kepada Anda cara mengautentikasi terhadap server Amazon DCV, menghubungkannya dan merender komponen `DCVViewer` React dari Amazon DCV Web UI SDK.
**Topics**
+ [Prasyarat](#prerequisites)
+ [Langkah 1: Siapkan halaman HTML Anda](#prep-html-ui)
+ [Langkah 2: Otentikasi, hubungkan, dan render komponen `DCVViewer` React.](#auth-conn-render)
+ [Memperbarui dari AWS-UI ke Sistem Desain Cloudscape](#updateawsuitocloudscape)
## Prasyarat
Anda perlu menginstal`React`,`ReactDOM`,`Cloudscape Design Components React`, `Cloudscape Design Global Styles` dan`Cloudscape Design Design Tokens`.
```
$ npm i react react-dom @cloudscape-design/components @cloudscape-design/global-styles @cloudscape-design/design-tokens
```
Anda juga perlu mengunduh`Amazon DCV Web Client SDK`. Lihat [Memulai dengan Amazon DCV Web Client SDK](getting-started.md) untuk membaca step-by-step panduan tentang cara melakukannya.
Anda harus membuat alias untuk mengimpor `dcv` modul, karena ini adalah ketergantungan eksternal untuk Amazon DCV Web UI SDK. Misalnya, jika Anda menggunakan webpack untuk menggabungkan aplikasi web Anda, Anda dapat menggunakan opsi [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) seperti:
```
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
dcv: path.resolve('path', 'to', 'dcv.js'),
},
},
};
```
Jika Anda menggunakan rollup untuk bundling, Anda dapat menginstal [@rollup /plugin-alias](https://www.npmjs.com/package/@rollup/plugin-alias), dan menggunakannya seperti ini:
```
import alias from '@rollup/plugin-alias';
const path = require('path');
module.exports = {
//...
plugins: [
alias({
entries: [
{ find: 'dcv', replacement: path.resolve('path', 'to', 'dcv.js') },
]
})
]
};
```
## Langkah 1: Siapkan halaman HTML Anda
Di halaman web Anda, Anda harus memuat JavaScript modul yang diperlukan dan Anda harus memiliki elemen `
` HTML dengan valid `id` di mana komponen entri aplikasi Anda akan dirender.
Contoh:
```
DCV first connection
```
## Langkah 2: Otentikasi, hubungkan, dan render komponen `DCVViewer` React.
Bagian ini menunjukkan cara menyelesaikan proses otentikasi pengguna, cara menghubungkan server Amazon DCV, dan cara merender komponen `DCVViewer` React.
Pertama, dari `index.js` file, impor`React`, `ReactDOM` dan `App` komponen tingkat atas Anda.
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
Render node kontainer tingkat atas aplikasi Anda.
```
ReactDOM.render(
,
document.getElementById("root")
);
```
Dalam `App.js` file, impor Amazon DCV Web Client SDK sebagai modul ESM, komponen `DCVViewer` React dari Amazon DCV Web UI SDK, dan paket. `React` `Cloudscape Design Global Styles`
```
import React from "react";
import dcv from "dcv";
import "@cloudscape-design/global-styles/index.css";
import {DCVViewer} from "./dcv-ui/dcv-ui.js";
```
Berikut ini adalah contoh yang menunjukkan cara mengautentikasi terhadap Amazon DCV Server dan merender komponen `DCVViewer` React dari Amazon DCV Web UI SDK, asalkan otentikasi berhasil.
```
const LOG_LEVEL = dcv.LogLevel.INFO;
const SERVER_URL = "https://your-dcv-server-url:port/";
const BASE_URL = "/static/js/dcvjs";
let auth;
function App() {
const [authenticated, setAuthenticated] = React.useState(false);
const [sessionId, setSessionId] = React.useState('');
const [authToken, setAuthToken] = React.useState('');
const [credentials, setCredentials] = React.useState({});
const onSuccess = (_, result) => {
var { sessionId, authToken } = { ...result[0] };
console.log("Authentication successful.");
setSessionId(sessionId);
setAuthToken(authToken);
setAuthenticated(true);
setCredentials({});
}
const onPromptCredentials = (_, credentialsChallenge) => {
let requestedCredentials = {};
credentialsChallenge.requiredCredentials.forEach(challenge => requestedCredentials[challenge.name] = "");
setCredentials(requestedCredentials);
}
const authenticate = () => {
dcv.setLogLevel(LOG_LEVEL);
auth = dcv.authenticate(
SERVER_URL,
{
promptCredentials: onPromptCredentials,
error: onError,
success: onSuccess
}
);
}
const updateCredentials = (e) => {
const { name, value } = e.target;
setCredentials({
...credentials,
[name]: value
});
}
const submitCredentials = (e) => {
auth.sendCredentials(credentials);
e.preventDefault();
}
React.useEffect(() => {
if (!authenticated) {
authenticate();
}
}, [authenticated]);
const handleDisconnect = (reason) => {
console.log("Disconnected: " + reason.message + " (code: " + reason.code + ")");
auth.retry();
setAuthenticated(false);
}
return (
authenticated ?
:
);
}
const onError = (_, error) => {
console.log("Error during the authentication: " + error.message);
}
export default App;
```
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, maka kredensialnya harus diberikan dalam bentuk nama pengguna dan kata sandi.
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 pengguna di server Amazon DCV. Contoh kode di atas memperbarui status React untuk merender `DCVViewer` komponen pada otentikasi yang berhasil.
Untuk mengetahui lebih lanjut tentang properti yang diterima oleh komponen ini, lihat referensi [Amazon DCV Web UI SDK](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer).
Untuk mengetahui lebih lanjut tentang sertifikat yang ditandatangani sendiri, lihat [Klarifikasi pengalihan dengan](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html) sertifikat yang ditandatangani sendiri.
## Memperbarui dari AWS-UI ke Sistem Desain Cloudscape
[Mulai SDK versi 1.3.0 kami memperbarui `DCVViewer` komponen kami dari AWS-UI ke evolusinya: Desain Cloudscape.](https://cloudscape.design/)
Cloudscape menggunakan tema visual yang berbeda dari AWS-UI, tetapi basis kode yang mendasarinya tetap sama. Dengan demikian, memigrasikan aplikasi Anda berdasarkan `DCVViewer` seharusnya mudah. Untuk bermigrasi, ganti paket NPM terkait AWS-UI yang telah Anda instal dengan paket Cloudscape terkait:
| Nama paket AWS-UI | Nama paket Cloudscape |
| --- | --- |
| @awsui /komponen-bereaksi | @cloudscape -desain/komponen |
| @awsui /gaya global | @cloudscape -desain/gaya global |
| @awsui /koleksi-kait | @cloudscape -desain/koleksi-kait |
| @awsui /desain-token | @cloudscape -desain/desain-token |
Untuk detail lebih lanjut tentang migrasi, harap refear ke halaman dokumentasi [AWS-UI GitHub ](https://github.com/aws/awsui-documentation).