使用 NICE DCV Web UI 开发工具包 - NICE DCV
先决条件第 1 步：准备您的 HTML 页面 第 2 步：验证、连接和呈现DCVViewerReact 组件。
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅中国的 Amazon Web Services 服务入门。

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

使用 NICE DCV Web UI 开发工具包

以下教程将向您展示如何对 NICE DCV 服务器进行身份验证、连接到该服务器并渲染DCVViewer来自 NICE DCV Web UI 开发工具包的 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 客户端软件开发工具包入门阅读 step-by-step 如何做到这一点的指南。

您必须创建一个别名才能导入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 模块，你应该有一个<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文件，导入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 客户端软件开发工具包作为 ESM 模块导入DCVViewer来自 NICE DCV Web UI 开发工具包的 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, 和successfunctions 是必需的回调函数，必须在身份验证过程中定义。

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

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

如果身份验证成功，successcallback 函数接收包含会话 id (sessionId) 和授权令牌 (authToken)，用于允许用户在 NICE DCV 服务器上连接的每个会话。上面的代码示例更新了 React 状态以渲染DCVViewer成功进行身份验证的组件。

要了解有关此组件接受的属性的更多信息，请参阅NICE DCV Web UI 开发工具包参考.