Usa l'SDK dell'interfaccia utente Web NICE DCV - NICE 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'SDK dell'interfaccia utente Web NICE DCV

Il seguente tutorial mostra come autenticarsi sul server NICE DCV, connettersi ad esso ed eseguire il rendering del componente React dall'DCVViewerSDK dell'interfaccia utente Web NICE DCV.

Prerequisiti

È necessario installareReact,, eReactDOM. 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

Dovresti anche scaricareNICE DCV Web Client SDK. Leggi Guida introduttiva al NICE 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 NICE DCV Web UI SDK. Ad esempio, se stai usando 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 elemento <div> HTML 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 dell'utente, come connettere il server NICE DCV e come renderizzare il 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 l'SDK NICE DCV Web Client come modulo ESM, il componente DCVViewer React dall'SDK dell'interfaccia utente Web NICE DCV e il pacchetto. 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";

Di seguito è riportato un esempio che mostra come autenticarsi con il NICE DCV Server e renderizzare DCVViewer il componente React da NICE DCV Web UI SDK, 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 server NICE DCV richiede le credenziali, la funzione di promptCredentials callback riceve la richiesta di credenziali dal server NICE DCV. Se il server NICE DCV è 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 server NICE DCV.

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 NICE DCV. L'esempio di codice riportato sopra aggiorna lo stato di React per rendere il DCVViewer componente in caso di autenticazione riuscita.

Per saperne di più sulle proprietà accettate da questo componente, consultate il riferimento all'SDK dell'interfaccia utente Web NICE DCV.

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 versione SDK 1.3.0 abbiamo aggiornato il nostro DCVViewer componente da AWS-UI alla sua evoluzione: Cloudscape Design.

Cloudscape utilizza un tema visivo diverso rispetto a 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 pacchetti NPM relativi all'AWS-UI che hai installato con i pacchetti Cloudscape associati:

Nome del pacchetto AWS-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 AWS-UI GitHub .