Utiliser l'interface utilisateur DCV Web d'Amazon SDK - Amazon DCV
PrérequisÉtape 1 : Préparez votre HTML page Étape 2 : Authentifier, connecter et afficher le composant DCVViewer React. Mise à jour de AWS -UI vers le système de conception Cloudscape

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Utiliser l'interface utilisateur DCV Web d'Amazon SDK

Le didacticiel suivant explique comment s'authentifier auprès du DCV serveur Amazon, s'y connecter et afficher le composant DCVViewer React depuis l'interface utilisateur SDK d'Amazon DCV Web.

Prérequis

Vous devez installerReact, ReactDOMCloudscape Design Components React, Cloudscape Design Global Styles etCloudscape Design Design Tokens. 

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

Vous devrez également le téléchargerAmazon DCV Web Client SDK. Consultez Commencer à utiliser Amazon DCV Web Client SDK le step-by-step guide sur la façon de procéder.

Vous devez créer un alias pour importer le dcv module, car il s'agit d'une dépendance externe pour Amazon DCV Web UISDK. Par exemple, si vous utilisez webpack pour regrouper votre application Web, vous pouvez utiliser l'option resolve.alias comme suit : 

const path = require('path');

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

Si vous utilisez le rollup pour le regroupement, vous pouvez installer @rollup /plugin-alias et l'utiliser comme suit : 

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

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

Étape 1 : Préparez votre HTML page

Dans votre page Web, vous devez charger les JavaScript modules requis et vous devriez avoir un <div> HTML élément valide id où le composant d'entrée de votre application sera affiché.

Par exemple :

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

Étape 2 : Authentifier, connecter et afficher le composant DCVViewer React.

Cette section explique comment terminer le processus d'authentification des utilisateurs, comment connecter le DCV serveur Amazon et comment afficher le composant DCVViewer React.

Tout d'abord, à partir du index.js fichier, de l'import React ReactDOM et de votre App composant de premier niveau. 

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

Affichez le nœud de conteneur de niveau supérieur de votre application.

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

Dans le App.js fichier, importez le client DCV Web Amazon SDK en tant que ESM module, le composant DCVViewer React depuis l'interface utilisateur SDK Amazon DCV Web React et le Cloudscape Design Global Styles package. 

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

Voici un exemple montrant comment s'authentifier auprès du DCV serveur Amazon et afficher le composant DCVViewer React à partir de l'interface utilisateur Amazon DCV WebSDK, à condition que l'authentification soit réussie. 

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;

Les fonctions promptCredentialserror, et sont success des fonctions de rappel obligatoires qui doivent être définies dans le processus d'authentification.

Si le DCV serveur Amazon demande des informations d'identification, la fonction de promptCredentials rappel reçoit la demande d'identification du serveur Amazon. DCV Si le DCV serveur Amazon est configuré pour utiliser l'authentification du système, les informations d'identification doivent être fournies sous la forme d'un nom d'utilisateur et d'un mot de passe.

Si l'authentification échoue, la fonction de error rappel reçoit un objet d'erreur du DCV serveur Amazon.

Si l'authentification réussit, la fonction de success rappel reçoit un tableau de couples comprenant l'identifiant de session (sessionId) et les jetons d'autorisation (authToken) pour chaque session à laquelle l'utilisateur est autorisé à se connecter sur le serveur AmazonDCV. L'exemple de code ci-dessus met à jour l'état React pour afficher le DCVViewer composant en cas d'authentification réussie.

Pour en savoir plus sur les propriétés acceptées par ce composant, consultez la SDKréférence Amazon DCV Web UI.

Pour en savoir plus sur les certificats auto-signés, consultez les clarifications relatives à la redirection avec les certificats auto-signés.

Mise à jour de AWS -UI vers le système de conception Cloudscape

À partir de SDK la version 1.3.0, nous avons mis à jour notre DCVViewer composant de AWS -UI à son évolution : Cloudscape Design.

Cloudscape utilise un thème visuel différent de AWS -UI, mais la base de code sous-jacente reste la même. Ainsi, la migration de votre application basée sur le DCVViewer devrait être facile. Pour effectuer la migration, remplacez les NPM packages liés à AWS -UI que vous avez installés par les packages Cloudscape associés :

AWS-Nom du package -UI Nom du package Cloudscape
@awsui /components-react @cloudscape -design/composants
@awsui /global-styles @cloudscape -design/global-styles
@awsui /collection-hooks @cloudscape -design/collection-hooks
@awsui /design-tokens @cloudscape -design/design-tokens

Pour plus de détails sur la migration, veuillez consulter la page de GitHub documentation AWS -UI.