使用 NICE DCV Web UI SDK - NICE DCV
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 Amazon Web Services 服务入门

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

使用 NICE DCV Web UI SDK

以下教程向您展示了如何对 NICE DCV 服务器进行身份验证、连接到该服务器并渲染DCVViewer来自 NICE DCV Web UI SDK 的 React 组件。

先决条件

你需要安装ReactReactDOMAWS UI Components ReactAWS UI Global StylesAWS UI Design Tokens.

$ npm i react react-dom @awsui/components-react @awsui/global-styles @awsui/design-tokens

您还需要下载NICE DCV Web Client SDK. 请参阅入门 NICE DCV Web 客户端 SDK阅读step-by-step指南如何执行该操作。

您必须创建一个别名才能导入dcv模块,因为它是 NICE DCV Web UI SDK 的外部依赖关系。例如,如果你使用 webpack 来捆绑你的 Web 应用程序,你可以使用解决.alias像这样的选项:

const path = require('path'); module.exports = { //... resolve: { alias: { dcv: path.resolve('path', 'to', 'dcv.js'), }, }, };

如果你使用汇总来进行捆绑,你可以安装@rollup /插件别名,然后像这样使用它:

import alias from '@rollup/plugin-alias'; const path = require('path'); module.exports = { //... plugins: [ alias({ entries: [ { find: 'dcv', replacement: path.resolve('path', 'to', 'dcv.js') }, ] }) ] };

第 1 步:准备您的 HTML 页面

在您的网页中,您必须加载所需JavaScript模块你应该有<div>具有有效的 HTML 元素id您的应用程序的入口组件将在其中呈现。

例如:

<!DOCTYPE html> <html lang="en" style="height: 100%;"> <head> <title>DCV first connection</title> </head> <body style="height: 100%;"> <div id="root" style="height: 100%;"></div> <script type="module" src="index.js"></script> </body> </html>

第 2 步:进行身份验证、连接和渲染DCVViewerReact 组件。

本节介绍如何完成用户身份验证过程、如何连接 NICE DCV 服务器以及如何渲染DCVViewerReact 组件。

首先,来自index.js导入文件ReactReactDOM和你的顶级App组件。

import React from "react"; import ReactDOM from 'react-dom'; import App from './App';

渲染应用的顶级容器节点。

ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );

App.js文件中,将 NICE DCV Web 客户端 SDK 导入为 ESM 模块,DCVViewer来自 NICE DCV Web UI SDK 的 React 组件,ReactAWS UI Global Styles程序包。

import React from "react"; import dcv from "dcv"; import "@awsui/global-styles/index.css"; import {DCVViewer} from "./dcv-ui/dcv-ui.js";

下面是一个示例,展示了如何对 NICE DCV 服务器进行身份验证并渲染DCVViewer来自 NICE DCV Web UI SDK 的 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 ? <DCVViewer dcv={{ sessionId: sessionId, authToken: authToken, serverUrl: SERVER_URL, baseUrl: BASE_URL, onDisconnect: handleDisconnect, logLevel: LOG_LEVEL }} uiConfig={{ toolbar: { visible: true, fullscreenButton: true, multimonitorButton: true, }, }} /> : <div style={{ height: window.innerHeight, backgroundColor: "#373737", display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <form> <fieldset> {Object.keys(credentials).map((cred) => ( <input key={cred} name={cred} placeholder={cred} type={cred === "password" ? "password" : "text"} onChange={updateCredentials} value={credentials[cred]} /> ))} </fieldset> <button type="submit" onClick={submitCredentials} > Login </button> </form> </div> ); } const onError = (_, error) => { console.log("Error during the authentication: " + error.message); } export default App;

这些区域有:promptCredentialserror, 和success函数是必须在身份验证过程中定义的回调函数。

如果 NICE DCV 服务器提示输入凭据,promptCredentials回调函数从 NICE DCV 服务器接收请求的凭据质询。如果 NICE DCV 服务器配置为使用系统身份验证,则必须以用户名和密码的形式提供凭据。

如果身份验证失败,则error回调函数从 NICE DCV 服务器接收错误对象。

如果身份验证成功,则success回调函数接收一组包含会话 ID (sessionId) 和授权令牌 (authToken) 对于允许用户在 NICE DCV 服务器上连接的每个会话。上面的代码示例更新了 React 状态以呈现DCVViewer成功身份验证时的组件。

要了解有关此组件所接受的属性的更多信息,请参阅不错的 DCV Web UI SDK 参考.