使用 Amazon DCV Web UI SDK - Amazon DCV
必要條件步驟 1：準備您的HTML頁面 步驟 2：驗證、連線和轉譯 DCVViewer React 元件。從 AWS-UI 更新至 Cloudscape 設計系統

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用 Amazon DCV Web UI SDK

下列教學課程示範如何對 Amazon DCV 伺服器進行身分驗證、連線至伺服器，以及從 Amazon DCV Web UI 轉譯 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 Client 入門 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/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 檔案中，將 Amazon DCV Web Client SDK 作為ESM模組匯入，從 Amazon DCV Web UI 匯入 DCVViewer React 元件SDK，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";

以下範例示範如何對 Amazon DCV Server 進行身分驗證，並從 Amazon DCV Web UI 轉譯 DCVViewer React 元件SDK，前提是身分驗證成功。

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;

、 error 和 promptCredentials success函數是必須在身分驗證程序中定義的強制回呼函數。

如果 Amazon DCV 伺服器提示憑證，回promptCredentials呼函數會從 Amazon DCV 伺服器接收請求的憑證挑戰。如果 Amazon DCV 伺服器設定為使用系統身分驗證，則必須以使用者名稱和密碼的形式提供憑證。

如果身分驗證失敗，回error呼函數會從 Amazon DCV 伺服器接收錯誤物件。

如果身分驗證成功，回success呼函數會針對允許使用者在 Amazon DCV 伺服器上連線的每個工作階段，接收包含工作階段 ID （ sessionId ） 和授權權杖 （ authToken ） 的一組偶數。上述程式碼範例會更新 React 狀態，以在成功驗證時呈現DCVViewer元件。

若要進一步了解此元件接受的屬性，請參閱 Amazon DCV Web UI SDK參考 。

若要進一步了解自我簽署憑證，請參閱自我簽署憑證的重新導向說明。

從 AWS-UI 更新至 Cloudscape 設計系統

從 1.3.0 SDK版開始，我們將DCVViewer元件從 AWS-UI 更新為其進化：Cloudscape Design 。

Cloudscape 使用與 AWS-UI 不同的視覺主題，但基礎程式碼基礎保持不變。因此，根據 遷移應用程式DCVViewer應該很簡單。若要遷移，請將您安裝的 AWS-UI 相關NPM套件取代為相關聯的 Cloudscape 套件：

AWS-UI 套件名稱 Cloudscape 套件名稱
@awsui/components-react @cloudscape-design/元件
@awsui/全域樣式 @cloudscape-design/全域樣式
@awsui/collection-hooks @cloudscape-design/collection-hooks
@awsui/design-tokens @cloudscape-design/design-tokens

如需遷移的詳細資訊，請參閱 AWS-UI GitHub 文件頁面。