Usa l'interfaccia utente DCV Web di Amazon SDK - Amazon DCV
PrerequisitiPassaggio 1: prepara la tua pagina HTML Passaggio 2: autenticare, connettere e renderizzare il componente DCVViewer React. Aggiornamento da AWS -UI a Cloudscape Design System

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Usa l'interfaccia utente DCV Web di Amazon SDK

Il seguente tutorial mostra come autenticarsi DCV sul server Amazon, connettersi ad esso ed eseguire il rendering del componente DCVViewer React dall'interfaccia utente DCV SDK Web di Amazon.

Prerequisiti

Devi installareReact, ReactDOMCloudscape Design Components React, Cloudscape Design Global Styles eCloudscape Design Design Tokens. 

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

Dovresti anche scaricareAmazon DCV Web Client SDK. Leggi Guida introduttiva ad Amazon DCV Web Client SDK la step-by-step guida su come farlo.

È necessario creare un alias per importare il dcv modulo, poiché si tratta di una dipendenza esterna per l'interfaccia utente Web di AmazonDCV. SDK Ad esempio, se utilizzi webpack per raggruppare la tua app web, puoi usare l'opzione resolve.alias in questo modo: 

const path = require('path');

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

Se stai usando rollup per il raggruppamento, puoi installare @rollup /plugin-alias e usarlo in questo modo: 

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

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

Passaggio 1: prepara la tua pagina HTML

Nella tua pagina web, devi caricare i JavaScript moduli richiesti e dovresti avere un <div> HTML elemento con un valore valido id in cui verrà visualizzato il componente di ingresso della tua app.

Per esempio:

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

Passaggio 2: autenticare, connettere e renderizzare il componente DCVViewer React.

Questa sezione mostra come completare il processo di autenticazione degli utenti, come connettere il DCV server Amazon e come eseguire il rendering del componente DCVViewer React.

Innanzitutto, dal index.js file, dall'importazione React ReactDOM e dal App componente di primo livello. 

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

Esegui il rendering del nodo contenitore di primo livello della tua app.

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

Nel App.js file, importa Amazon DCV Web Client SDK come ESM modulo, il componente DCVViewer React dall'interfaccia utente SDK Amazon DCV Web React e il Cloudscape Design Global Styles pacchetto. 

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

Di seguito è riportato un esempio che mostra come autenticarsi su Amazon DCV Server ed eseguire il rendering del componente DCVViewer React dall'interfaccia utente DCV Web di AmazonSDK, a condizione che l'autenticazione abbia avuto successo. 

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;

Le funzioni promptCredentialserror, e sono success funzioni di callback obbligatorie che devono essere definite nel processo di autenticazione.

Se il DCV server Amazon richiede le credenziali, la funzione di promptCredentials callback riceve la richiesta di credenziali dal server Amazon. DCV Se il DCV server Amazon è configurato per utilizzare l'autenticazione del sistema, le credenziali devono essere fornite sotto forma di nome utente e password.

Se l'autenticazione fallisce, la funzione di error callback riceve un oggetto di errore dal DCV server Amazon.

Se l'autenticazione ha esito positivo, la funzione di success callback riceve una serie di coppie che include l'id di sessione (sessionId) e i token di autorizzazione (authToken) per ogni sessione a cui l'utente può connettersi sul server Amazon. DCV L'esempio di codice riportato sopra aggiorna lo stato di React per rendere il DCVViewer componente in caso di autenticazione riuscita.

Per ulteriori informazioni sulle proprietà accettate da questo componente, consulta il SDKriferimento all'interfaccia utente DCV Web di Amazon.

Per ulteriori informazioni sui certificati autofirmati, consulta i chiarimenti sul reindirizzamento con certificati autofirmati.

Aggiornamento da AWS -UI a Cloudscape Design System

A partire dalla SDK versione 1.3.0 abbiamo aggiornato il nostro DCVViewer componente da AWS -UI alla sua evoluzione: Cloudscape Design.

Cloudscape utilizza un tema visivo diverso da AWS -UI, ma la base di codice sottostante rimane la stessa. Pertanto, la migrazione dell'applicazione basata su dovrebbe essere semplice. DCVViewer Per migrare, sostituisci i NPM pacchetti relativi all'AWSinterfaccia utente che hai installato con i pacchetti Cloudscape associati:

AWSNome del pacchetto -UI Nome del pacchetto Cloudscape
@awsui /components-react @cloudscape -design/componenti
@awsui /global-styles @cloudscape -design/global-styles
@awsui /collection-hooks @cloudscape -design/collezione-ganci
@awsui /design-tokens @cloudscape -design/design-tokens

Per ulteriori dettagli sulla migrazione, consulta la pagina della documentazione di -UI. AWS GitHub