DCV first connection

` HTML 元素，该元素的有效`id`位置将呈现应用程序的入口组件。例如： ``` 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 Client 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; ``` `promptCredentials`、`error` 和 `success` 函数是在身份验证过程中必须定义的必需回调函数。如果 Amazon DCV 服务器提示输入凭证，则 `promptCredentials` 回调函数从 Amazon DCV 服务器接收请求的凭证质询。如果 Amazon DCV 服务器配置为使用系统身份验证，则必须以用户名和密码形式提供凭证。如果身份验证失败，则 `error` 回调函数从 Amazon DCV 服务器收到一个错误对象。如果身份验证成功，则 `success` 回调函数收到一个对象对数组，其中包括允许用户在 Amazon DCV 服务器上连接到的每个会话的会话 ID（`sessionId`）和授权令牌（`authToken`）。上面的代码示例更新 React 状态，以在成功进行身份验证时渲染 `DCVViewer` 组件。要了解该组件接受的属性的更多信息，请参阅 [Amazon DCV Web UI SDK 参考](https://docs.amazonaws.cn/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer)。要了解自签名证书的更多信息，请参阅[自签名证书的重定向说明](https://docs.amazonaws.cn/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html)。 ## 从 AWS-UI 更新为 Cloudscape Design 系统从 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/components | | @awsui/global-styles | @cloudscape-design/global-styles | | @awsui/collection-hooks | @cloudscape-design/collection-hooks | | @awsui/design-tokens | @cloudscape-design/design-tokens | 有关迁移的更多详细信息，请参阅 [AWS-UI GitHub ](https://github.com/aws/awsui-documentation) 文档页面。