Amazon DCV Web UI verwenden SDK - Amazon DCV
VoraussetzungenSchritt 1: Bereite deine Seite vor HTML Schritt 2: Authentifizieren, verbinden und rendern Sie die DCVViewer React-Komponente. Aktualisierung von AWS -UI auf Cloudscape Design System

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Amazon DCV Web UI verwenden SDK

Das folgende Tutorial zeigt Ihnen, wie Sie sich beim DCV Amazon-Server authentifizieren, eine Verbindung zu ihm herstellen und die DCVViewer React-Komponente über die Amazon DCV Web UI SDK rendern.

Voraussetzungen

Sie müssenReact, ReactDOMCloudscape Design Components React, Cloudscape Design Global Styles und Cloudscape Design Design Tokens installieren. 

$ npm i react react-dom @cloudscape-design/components @cloudscape-design/global-styles @cloudscape-design/design-tokens

Sie müssten auch herunterladenAmazon DCV Web Client SDK. Lesen Erste Schritte mit dem Amazon DCV Web Client SDK Sie die step-by-step Anleitung dazu.

Sie müssen einen Alias für den Import des dcv Moduls erstellen, da es sich um eine externe Abhängigkeit für Amazon DCV Web UI handeltSDK. Wenn Sie beispielsweise Webpack verwenden, um Ihre Web-App zu bündeln, können Sie die Option resolve.alias wie folgt verwenden: 

const path = require('path');

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

Wenn Sie Rollup zum Bündeln verwenden, können Sie @rollup /plugin-alias installieren und es so verwenden: 

import alias from '@rollup/plugin-alias';
const path = require('path');

module.exports = {
  //...
  plugins: [
    alias({
      entries: [
        { find: 'dcv', replacement: path.resolve('path', 'to', 'dcv.js') },
      ]
    })
  ]
};

Schritt 1: Bereite deine Seite vor HTML

Auf Ihrer Webseite müssen Sie die erforderlichen JavaScript Module laden und Sie sollten ein <div> HTML Element mit einem gültigen Wert haben, id in dem die Eingabekomponente Ihrer App gerendert wird.

Beispielsweise:

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

Schritt 2: Authentifizieren, verbinden und rendern Sie die DCVViewer React-Komponente.

In diesem Abschnitt wird gezeigt, wie Sie den Benutzerauthentifizierungsprozess abschließen, wie Sie den DCV Amazon-Server verbinden und wie Sie die DCVViewer React-Komponente rendern.

Zuerst aus der index.js Datei, dem Import React ReactDOM und Ihrer App Top-Level-Komponente. 

import React from "react";
import ReactDOM from 'react-dom';
import App from './App';

Rendern Sie den Containerknoten der obersten Ebene Ihrer App.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Importieren Sie in der App.js Datei den Amazon DCV Web Client SDK als ESM Modul, die DCVViewer React-Komponente aus der Amazon DCV Web UI SDK React und das Cloudscape Design Global Styles Paket. 

import React from "react";
import dcv from "dcv";
import "@cloudscape-design/global-styles/index.css";
import {DCVViewer} from "./dcv-ui/dcv-ui.js";

Im Folgenden finden Sie ein Beispiel, das zeigt, wie Sie sich beim Amazon DCV Server authentifizieren und die DCVViewer React-Komponente über die Amazon DCV Web UI rendernSDK, sofern die Authentifizierung erfolgreich war. 

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;

Die success Funktionen promptCredentialserror, und sind obligatorische Callback-Funktionen, die im Authentifizierungsprozess definiert werden müssen.

Wenn der DCV Amazon-Server zur Eingabe von Anmeldeinformationen auffordert, empfängt die promptCredentials Callback-Funktion die angeforderte Aufforderung zur Eingabe der Anmeldeinformationen vom Amazon-Server. DCV Wenn der DCV Amazon-Server für die Verwendung der Systemauthentifizierung konfiguriert ist, müssen die Anmeldeinformationen in Form eines Benutzernamens und eines Kennworts bereitgestellt werden.

Wenn die Authentifizierung fehlschlägt, empfängt die error Callback-Funktion ein Fehlerobjekt vom DCV Amazon-Server.

Wenn die Authentifizierung erfolgreich ist, empfängt die success Callback-Funktion ein Array von Paaren, das die Sitzungs-ID (sessionId) und die Autorisierungstoken (authToken) für jede Sitzung enthält, zu der der Benutzer auf dem DCV Amazon-Server eine Verbindung herstellen darf. Das obige Codebeispiel aktualisiert den React-Status, sodass die DCVViewer Komponente bei erfolgreicher Authentifizierung gerendert wird.

Weitere Informationen zu den von dieser Komponente akzeptierten Eigenschaften finden Sie in der Amazon DCV Web SDK UI-Referenz.

Weitere Informationen zu selbstsignierten Zertifikaten finden Sie in den Erläuterungen zur Umleitung bei selbstsignierten Zertifikaten.

Aktualisierung von AWS -UI auf Cloudscape Design System

Ab SDK Version 1.3.0 haben wir unsere DCVViewer Komponente von AWS -UI auf ihre Weiterentwicklung aktualisiert: Cloudscape Design.

Cloudscape verwendet ein anderes visuelles Thema als AWS -UI, aber die zugrunde liegende Codebasis bleibt dieselbe. Daher sollte die Migration Ihrer Anwendung auf der Basis von einfach DCVViewer sein. Um zu migrieren, ersetzen Sie die AWS -UI-bezogenen NPM Pakete, die Sie installiert haben, durch die zugehörigen Cloudscape-Pakete:

AWS-UI-Paketname Name des Cloudscape-Pakets
@awsui /components-react @cloudscape -design/Komponenten
@awsui /global-styles @cloudscape -design/globale-styles
@awsui /collection-hooks @cloudscape -design/collection-hooks
@awsui /design-token @cloudscape -design/design-token

Weitere Informationen zur Migration finden Sie auf der -UI-Dokumentationsseite. AWS GitHub