使用亚马逊 DCV Web 用户界面 SDK - Amazon DCV
先决条件第 1 步：准备HTML页面 步骤 2：验证身份、连接并渲染 DCVViewer React 组件。从 AWS-UI 更新到 Cloudscape 设计系统

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

使用亚马逊 DCV Web 用户界面 SDK

以下教程向您展示了如何针对亚马逊DCV服务器进行身份验证、连接该服务器以及如何通过亚马逊 DCV Web 用户界面呈现 DCVViewer React 组件SDK。

先决条件

您需要安装 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

您还需要下载 Amazon DCV Web Client SDK。请参阅开始使用 Amazon DCV Web 客户端 SDK阅读有关如何执行此操作的 step-by-step指南。

您必须为导入模块创建别名，因为该dcv模块是 Amazon 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：验证身份、连接并渲染 DCVViewer React 组件。

本节介绍如何完成用户身份验证过程、如何连接 Amazon 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文件中，将亚马逊 DCV Web 客户端SDK作为ESM模块导入，从亚马逊 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";

以下示例演示了如何在身份验证成功的情况下对亚马逊DCV服务器进行身份验证并通过亚马逊 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 函数是在身份验证过程中必须定义的必需回调函数。

如果 Amazon DCV 服务器提示您输入证书，则promptCredentials回调函数会收到来自亚马逊DCV服务器的请求的凭证质询。如果 Amazon DCV 服务器配置为使用系统身份验证，则必须以用户名和密码的形式提供凭证。

如果身份验证失败，则error回调函数会收到来自 Amazon DCV 服务器的错误对象。

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

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

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

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

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