先决条件步骤 1：准备 HTML 页面步骤 2：验证身份、连接并渲染 DCVViewer React 组件。从 AWS-UI 更新为 Cloudscape Design 系统

使用 NICE DCV Web UI SDK

以下教程说明了如何在 NICE DCV 服务器中进行身份验证，连接到该服务器并渲染 NICE DCV Web UI SDK 中的 DCVViewer React 组件。

主题

先决条件
步骤 1：准备 HTML 页面
步骤 2：验证身份、连接并渲染 DCVViewer React 组件。
从 AWS-UI 更新为 Cloudscape Design 系统

先决条件

您需要安装 React、ReactDOM、Cloudscape 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 Client SDK 入门以查看有关如何执行该操作的分步指南。

您必须创建一个别名以导入 dcv 模块，因为它是 NICE DCV Web UI SDK 的外部依赖项。例如，如果使用 webpack 捆绑 Web 应用程序，您可以使用 resolve.alias 选项，如下所示：


const path = require('path');

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

如果您使用 rollup 进行捆绑，您可以安装并使用 @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 模块，并且您应该具有一个带有有效 id 的 <div> HTML 元素，将在其中渲染应用程序的入口组件。

例如：


<!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;

promptCredentials、error 和 success 函数是在身份验证过程中必须定义的必需回调函数。

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

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

如果身份验证成功，则 success 回调函数收到一个对象对数组，其中包括允许用户在 NICE DCV 服务器上连接到的每个会话的会话 ID (sessionId) 和授权令牌 (authToken)。上面的代码示例更新 React 状态，以在成功进行身份验证时渲染 DCVViewer 组件。

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

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

从 AWS-UI 更新为 Cloudscape Design 系统

从 SDK 版本 1.3.0 开始，我们将 DCVViewer 组件从 AWS-UI 更新为演进版本：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 文档页面。

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

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

使用 NICE DCV 功能

SDK 参考