Use a Amazon DCV Web UI SDK - Amazon DCV
Pré-requisitosEtapa 1: prepare sua HTML página Etapa 2: Autenticar, conectar e renderizar o componente React do DCVViewer. Atualização do AWS -UI para o Cloudscape Design System

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Use a Amazon DCV Web UI SDK

O tutorial a seguir mostra como se autenticar no DCV servidor Amazon, conectar-se a ele e renderizar o componente DCVViewer React a partir da Amazon DCV Web UISDK.

Pré-requisitos

Você precisa instalar React, ReactDOM, Cloudscape Design Components React, Cloudscape Design Global Styles e Cloudscape Design Design Tokens. 

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

Você também precisaria baixar de Amazon DCV Web Client SDK. Leia Introdução ao Amazon DCV Web Client SDK o step-by-step guia sobre como fazer isso.

Você deve criar um alias para importar o dcv módulo, pois ele é uma dependência externa da Amazon DCV Web UI. SDK Por exemplo, se você estiver usando o webpack para agrupar seu aplicativo da Web, poderá usar a opção resolve.alias da seguinte forma: 

const path = require('path');

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

Se você estiver usando o rollup para empacotamento, poderá instalar o @rollup/plugin-alias e usá-lo assim: 

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

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

Etapa 1: prepare sua HTML página

Em sua página da Web, você deve carregar os JavaScript módulos necessários e ter um <div> HTML elemento com um válido em id que o componente de entrada do seu aplicativo será renderizado.

Por exemplo:

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

Etapa 2: Autenticar, conectar e renderizar o componente React do DCVViewer.

Esta seção mostra como concluir o processo de autenticação do usuário, como conectar o DCV servidor Amazon e como renderizar o componente DCVViewer React.

Primeiro, a partir do arquivo index.js, importe React, ReactDOM e seu componente de nível superior App. 

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

Renderize o nó de contêiner de nível superior do seu aplicativo.

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

No App.js arquivo, importe o Amazon DCV Web Client SDK como um ESM módulo, o componente DCVViewer React da Amazon DCV Web UI SDK React e o Cloudscape Design Global Styles pacote. 

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

Veja a seguir um exemplo que mostra como se autenticar no Amazon DCV Server e renderizar o componente DCVViewer React a partir da Amazon DCV Web UISDK, desde que a autenticação tenha sido bem-sucedida. 

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;

As funções promptCredentials, error e success são funções obrigatórias de retorno de chamada que devem ser definidas no processo de autenticação.

Se o DCV servidor da Amazon solicitar credenciais, a função de promptCredentials retorno de chamada receberá o desafio de credencial solicitado do servidor da Amazon. DCV Se o DCV servidor da Amazon estiver configurado para usar a autenticação do sistema, as credenciais deverão ser fornecidas na forma de um nome de usuário e uma senha.

Se a autenticação falhar, a função de error retorno de chamada recebe um objeto de erro do DCV servidor da Amazon.

Se a autenticação for bem-sucedida, a função de success retorno de chamada receberá uma matriz de casais que inclui o ID da sessão (sessionId) e os tokens de autorização (authToken) para cada sessão à qual o usuário tem permissão para se conectar no servidor da AmazonDCV. O exemplo de código acima atualiza o estado do React para renderizar o componente DCVViewer em caso de autenticação bem-sucedida.

Para saber mais sobre as propriedades aceitas por esse componente, consulte a SDKreferência DCV da Amazon Web UI.

Para saber mais sobre certificados autoassinados, consulte Esclarecimentos sobre redirecionamento com certificados autoassinados.

Atualização do AWS -UI para o Cloudscape Design System

A partir da SDK versão 1.3.0, atualizamos nosso DCVViewer componente de AWS -UI para sua evolução: Cloudscape Design.

O Cloudscape usa um tema visual diferente do AWS -UI, mas a base de código subjacente permanece a mesma. Portanto, migrar seu aplicativo com base no DCVViewer deve ser fácil. Para migrar, substitua os NPM pacotes relacionados a AWS -UI que você instalou pelos pacotes associados do Cloudscape:

AWS-Nome do pacote UI Nome do pacote Cloudscape
@awsui/components-react @cloudscape-design/components
@awsui/global-styles @cloudscape-design/global-styles
@awsui/collection-hooks @cloudscape-design/collection-hooks
@awsui/design-tokens @cloudscape-design/design-tokens

Para obter mais detalhes sobre a migração, consulte a página de GitHub documentação do AWS -UI.