本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。
使用 NICE DCV Web UI SDK
以下教程向您展示了如何对 NICE DCV 服务器进行身份验证、连接到该服务器并渲染DCVViewer
来自 NICE DCV Web UI SDK 的 React 组件。
先决条件
你需要安装React
、ReactDOM
、AWS UI Components React
、AWS UI Global Styles
和AWS 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 步:进行身份验证、连接和渲染DCVViewer
React 组件。
本节介绍如何完成用户身份验证过程、如何连接 NICE DCV 服务器以及如何渲染DCVViewer
React 组件。
首先,来自index.js
导入文件React
、ReactDOM
和你的顶级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 组件,React
和AWS 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;
这些区域有:promptCredentials
、error
, 和success
函数是必须在身份验证过程中定义的回调函数。
如果 NICE DCV 服务器提示输入凭据,promptCredentials
回调函数从 NICE DCV 服务器接收请求的凭据质询。如果 NICE DCV 服务器配置为使用系统身份验证,则必须以用户名和密码的形式提供凭据。
如果身份验证失败,则error
回调函数从 NICE DCV 服务器接收错误对象。
如果身份验证成功,则success
回调函数接收一组包含会话 ID (sessionId
) 和授权令牌 (authToken
) 对于允许用户在 NICE DCV 服务器上连接的每个会话。上面的代码示例更新了 React 状态以呈现DCVViewer
成功身份验证时的组件。
要了解有关此组件所接受的属性的更多信息,请参阅不错的 DCV Web UI SDK 参考.