` 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).