先决条件第 1 步：准备您的 HTML 页面第 2 步：验证、连接和渲染 DCVViewer React 组件。从 AWS-UI 更新到 Cloudscape 设计系统

使用 NICE DCV Web UI SDK

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

主题

先决条件
第 1 步：准备您的 HTML 页面
第 2 步：验证、连接和渲染 DCVViewer React 组件。
从 AWS-UI 更新到 Cloudscape 设计系统

先决条件

你需要安装React、ReactDOMCloudscape Design Components React、Cloudscape Design Global Styles和Cloudscape Design Design Tokens。


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

你还需要下载NICE DCV Web Client SDK。请参阅NICE DCV Web 客户端 SDK 入门阅读有关如何执行此操作的step-by-step指南。

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


const path = require('path');

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

如果你使用 rolup 进行捆绑销售，你可以安装 @rollup /plugin-alias，然后像这样使用：


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 Client SDK 作为 ESM 模块导入、来自 NICE 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";

以下示例显示了在身份验证成功的情况下如何对 NICE DCV 服务器进行身份验证并呈现 NICE 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 ?
    <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回调函数将收到一组情侣，其中包括允许用户在 NICE DCV 服务器上连接的每个会话的会话 ID (sessionIdauthToken) 和授权令牌 ()。上面的代码示例更新了 React 状态，以便在成功进行身份验证后呈现DCVViewer组件。

要了解有关此组件接受的属性的更多信息，请参阅 NICE DCV Web UI SDK 参考资料。

要了解有关自签名证书的更多信息，请参阅自签名证书的重定向说明。

从 AWS-UI 更新到 Cloudscape 设计系统

从 SDK 版本 1.3.0 开始，我们将DCVViewer组件从 AWS-UI 更新到了其演变阶段：Cloudscape Design。

Cloudscape 使用的视觉主题与 AWS-UI 不同，但底层代码库保持不变。因此，基于的迁移应用程序DCVViewer应该很容易。要进行迁移，请将您已安装的与 AWS-UI 相关的 NPM 包替换为关联的 Cloudscape 软件包：

AWS-UI 软件包名称	Cloudscape 包
@awsui /components-react	@cloudscape-设计/组件
@awsui /global-style	@cloudscape-设计/global-styles
@awsui /collection-hoo	@cloudscape-design/collection-h
@awsui /design-tokens	@cloudscape-设计/设计代币

有关迁移的更多详细信息，请参阅 A WS-UI GitHub 文档页面。

Javascript 在您的浏览器中被禁用或不可用。

要使用 Amazon Web Services 文档，必须启用 Javascript。请参阅浏览器的帮助页面以了解相关说明。

使用 NICE DCV 功能

开发工具包参考资料