Menggunakan SDK UI Web NICE DCV - NICE DCV
PrasyaratLangkah 1: Siapkan halaman HTML Anda Langkah 2: Otentikasi, hubungkan, 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 SDK UI Web NICE DCV

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

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 mengunduhNICE DCV Web Client SDK. Lihat Memulai dengan NICE 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 NICE 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 halaman HTML Anda

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

Misalnya:

<!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, hubungkan, dan render komponen DCVViewer React.

Bagian ini menunjukkan cara menyelesaikan proses otentikasi pengguna, cara menghubungkan server NICE DCV, dan cara merender DCVViewer komponen 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 tersebut, impor NICE DCV Web Client SDK sebagai modul ESM, komponen DCVViewer React dari NICE DCV Web UI SDK, dan paketnya. 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";

Berikut ini adalah contoh yang menunjukkan cara mengautentikasi terhadap NICE DCV Server dan merender komponen React DCVViewer dari NICE DCV Web UI SDK, 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 server NICE DCV meminta kredensyal, fungsi promptCredentials callback menerima tantangan kredensyal yang diminta dari server NICE DCV. Jika server NICE DCV 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 NICE DCV.

Jika otentikasi berhasil, fungsi success callback menerima larik pasangan yang menyertakan id sesi (sessionId) dan token otorisasi (authToken) untuk setiap sesi yang diizinkan untuk dihubungkan oleh pengguna di server NICE 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 referensi SDK UI Web NICE DCV.

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 paket NPM terkait AWS-UI yang telah Anda instal dengan paket Cloudscape terkait:

Nama paket AWS-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 dokumentasi AWS-UI GitHub .