Menggunakan Amazon DCV Web UI SDK - Amazon DCV
PrasyaratLangkah 1: Siapkan HTML halaman Anda Langkah 2: Otentikasi, sambungkan, dan render komponen DCVViewer React. Memperbarui dari AWS -UI ke Sistem Desain Cloudscape

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menggunakan Amazon DCV Web UI SDK

Tutorial berikut menunjukkan kepada Anda cara mengautentikasi terhadap DCV server Amazon, menghubungkannya dan merender komponen DCVViewer React dari Amazon DCV Web UISDK.

Prasyarat

Anda perlu menginstalReact,ReactDOM,Cloudscape Design Components React, Cloudscape Design Global Styles danCloudscape Design Design Tokens. 

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

Anda juga perlu mengunduhAmazon DCV Web Client SDK. Lihat Memulai dengan Amazon DCV Web Client SDK untuk membaca step-by-step panduan tentang cara melakukannya.

Anda harus membuat alias untuk mengimpor dcv modul, karena ini adalah ketergantungan eksternal untuk Amazon DCV Web UI. SDK Misalnya, jika Anda menggunakan webpack untuk menggabungkan aplikasi web Anda, Anda dapat menggunakan opsi resolve.alias seperti: 

const path = require('path');

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

Jika Anda menggunakan rollup untuk bundling, Anda dapat menginstal @rollup /plugin-alias, dan menggunakannya seperti ini: 

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

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

Langkah 1: Siapkan HTML halaman Anda

Di halaman web Anda, Anda harus memuat JavaScript modul yang diperlukan dan Anda harus memiliki <div> HTML elemen dengan valid id di mana komponen entri aplikasi Anda akan dirender.

Sebagai contoh:

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

Langkah 2: Otentikasi, sambungkan, dan render komponen DCVViewer React.

Bagian ini menunjukkan cara menyelesaikan proses otentikasi pengguna, cara menghubungkan DCV server Amazon, dan cara merender komponen DCVViewer React.

Pertama, dari index.js file, imporReact, ReactDOM dan App komponen tingkat atas Anda. 

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

Render node kontainer tingkat atas aplikasi Anda.

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

Dalam App.js file, impor Amazon DCV Web Client SDK sebagai ESM modul, komponen DCVViewer React dari Amazon DCV Web UISDK, React dan 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";

Berikut ini adalah contoh yang menunjukkan cara mengautentikasi terhadap Amazon DCV Server dan merender komponen DCVViewer React dari Amazon DCV Web UISDK, asalkan otentikasi berhasil. 

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;

FungsipromptCredentials,error, dan adalah success fungsi panggilan balik wajib yang harus didefinisikan dalam proses otentikasi.

Jika DCV server Amazon meminta kredensil, fungsi promptCredentials callback akan menerima tantangan kredensi yang diminta dari server Amazon. DCV Jika DCV server Amazon dikonfigurasi untuk menggunakan otentikasi sistem, maka kredensialnya harus diberikan dalam bentuk nama pengguna dan kata sandi.

Jika otentikasi gagal, fungsi error callback menerima objek kesalahan dari server AmazonDCV.

Jika autentikasi berhasil, fungsi success callback menerima larik pasangan yang menyertakan id sesi (sessionId) dan token otorisasi (authToken) untuk setiap sesi yang diizinkan untuk disambungkan oleh pengguna di server Amazon. DCV Contoh kode di atas memperbarui status React untuk merender DCVViewer komponen pada otentikasi yang berhasil.

Untuk mengetahui lebih lanjut tentang properti yang diterima oleh komponen ini, lihat SDKreferensi Amazon DCV Web UI.

Untuk mengetahui lebih lanjut tentang sertifikat yang ditandatangani sendiri, lihat Klarifikasi pengalihan dengan sertifikat yang ditandatangani sendiri.

Memperbarui dari AWS -UI ke Sistem Desain Cloudscape

Mulai SDK versi 1.3.0 kami memperbarui DCVViewer komponen kami dari AWS -UI ke evolusinya: Desain Cloudscape.

Cloudscape menggunakan tema visual yang berbeda dari AWS -UI, tetapi basis kode yang mendasarinya tetap sama. Dengan demikian, memigrasikan aplikasi Anda berdasarkan DCVViewer seharusnya mudah. Untuk bermigrasi, ganti NPM paket terkait AWS -UI yang telah Anda instal dengan paket Cloudscape terkait:

AWSNama paket -UI Nama paket Cloudscape
@awsui /komponen-bereaksi @cloudscape -desain/komponen
@awsui /gaya global @cloudscape -desain/gaya global
@awsui /koleksi-kait @cloudscape -desain/koleksi-kait
@awsui /desain-token @cloudscape -desain/desain-token

Untuk detail lebih lanjut tentang migrasi, harap refear ke halaman GitHub dokumentasi AWS -UI.