` HTML 元素，其中包含一個有效的 `id` HTML 元素，其中會轉譯您應用程式的進入元件。
例如：
```
DCV first connection
```
## 步驟 2：驗證、連接和轉譯 `DCVViewer` React 元件。
本節說明如何完成使用者身分驗證程序、如何連接 Amazon DCV 伺服器，以及如何轉譯 `DCVViewer` React 元件。
首先，從 `index.js` 檔案匯入 `React` `ReactDOM`和您的頂層`App`元件。
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
轉譯應用程式的頂層容器節點。
```
ReactDOM.render(
,
document.getElementById("root")
);
```
在 `App.js` 檔案中，匯入 Amazon DCV Web 用戶端 SDK 做為 ESM 模組、Amazon DCV Web UI SDK 的 `DCVViewer` React 元件，`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";
```
以下範例示範如何在身分驗證成功的情況下，對 Amazon DCV 伺服器進行身分驗證，並從 Amazon DCV Web UI SDK 轉譯 `DCVViewer` React 元件。
```
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;
```
、 `error` 和 `promptCredentials` `success`函數是必須在身分驗證程序中定義的強制性回呼函數。
如果 Amazon DCV 伺服器提示登入資料，回`promptCredentials`呼函數會從 Amazon DCV 伺服器收到請求的登入資料挑戰。如果 Amazon DCV 伺服器設定為使用系統身分驗證，則必須以使用者名稱和密碼的形式提供憑證。
如果身分驗證失敗，回`error`呼函數會從 Amazon DCV 伺服器接收錯誤物件。
如果身分驗證成功，回`success`呼函數會接收包含工作階段 ID () `sessionId` 和授權字符 (`authToken`) 的耦合陣列，以供使用者在 Amazon DCV 伺服器上連線到每個工作階段。上述程式碼範例會更新 React 狀態，以在身分驗證成功時轉譯`DCVViewer`元件。
若要進一步了解此元件接受的屬性，請參閱 [ Amazon DCV Web UI SDK 參考](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer)。
若要進一步了解自我簽署憑證，請參閱[自我簽署憑證的重新導向說明](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html)。
## 從 AWS-UI 更新至 Cloudscape 設計系統
從 SDK 1.3.0 版開始，我們將`DCVViewer`元件從 AWS-UI 更新至其演變：[Cloudscape Design](https://cloudscape.design/)。
Cloudscape 使用與 AWS-UI 不同的視覺化佈景主題，但基礎程式碼基礎保持不變。因此，根據 遷移應用程式`DCVViewer`應該很簡單。若要遷移，請將您安裝的 AWS-UI 相關 NPM 套件取代為相關聯的 Cloudscape 套件：
| AWS-UI 套件名稱 | Cloudscape 套件名稱 |
| --- | --- |
| @awsui/components-react | @cloudscape-design/元件 |
| @awsui/全域樣式 | @cloudscape-design/全域樣式 |
| @awsui/collection-hooks | @cloudscape-design/collection-hooks |
| @awsui/design-tokens | @cloudscape-design/design-tokens |
如需遷移的詳細資訊，請參閱 [AWS-UI GitHub 文件頁面](https://github.com/aws/awsui-documentation)。