先决条件第 1 步：准备您的 HTML 页面第 2 步：进行身份验证、连接和渲染DCVViewerReact 组件。

使用 NICE DCV Web UI SDK

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

主题

先决条件
第 1 步：准备您的 HTML 页面
第 2 步：进行身份验证、连接和渲染DCVViewerReact 组件。

先决条件

你需要安装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 服务器以及如何渲染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 客户端 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 参考.

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

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

使用 NICE DCV 功能

SDK 参考