` HTML-Element mit einem gültigen Wert hinzufügen, `id` an dem das Amazon DCV Web Client SDK den Inhaltsstream vom Amazon DCV-Remote-Server abrufen soll.
Beispiel:
```
DCV first connection
```
## Schritt 2: Authentifizieren Sie sich, stellen Sie eine Verbindung her und rufen Sie den ersten Frame ab
In diesem Abschnitt wird gezeigt, wie Sie den Benutzerauthentifizierungsprozess abschließen, wie Sie eine Verbindung zum Amazon DCV-Server herstellen und wie Sie den ersten Inhaltsframe vom Amazon DCV-Server empfangen.
Importieren Sie zunächst das Amazon DCV Web Client SDK aus der `index.js` Datei. Es kann entweder als UMD-Modul (Universal Module Definition) wie folgt importiert werden:
```
import "./dcvjs/dcv.js"
```
Andernfalls kann es`1.1.0`, ausgehend von der Version, auch als ECMAScript Modul (ESM) aus dem entsprechenden Paket importiert werden, etwa so:
```
import dcv from "./dcvjs/dcv.js"
```
Definieren Sie die Variablen, die zum Speichern des Authentication-Objekts, des Connection-Objekts und der Amazon DCV-Server-URL verwendet werden sollen.
```
let auth,
connection,
serverUrl;
```
Beim Laden des Skripts protokollieren Sie die Amazon DCV Web Client SDK-Version und rufen Sie beim Laden der Seite die `main` Funktion auf.
```
console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);
```
Die `main` Funktion legt die Protokollebene fest und startet den Authentifizierungsprozess.
```
function main () {
console.log("Setting log level to INFO");
dcv.setLogLevel(dcv.LogLevel.INFO);
serverUrl = "https://your-dcv-server-url:port/";
console.log("Starting authentication with", serverUrl);
auth = dcv.authenticate(
serverUrl,
{
promptCredentials: onPromptCredentials,
error: onError,
success: onSuccess
}
);
}
```
Die `success` Funktionen `promptCredentials``error`, und sind obligatorische Callback-Funktionen, die im Authentifizierungsprozess definiert werden müssen.
Wenn der Amazon DCV-Server zur Eingabe von Anmeldeinformationen auffordert, empfängt die `promptCredentials` Callback-Funktion die angeforderte Aufforderung zur Eingabe der Anmeldeinformationen vom Amazon DCV-Server. Wenn der Amazon DCV-Server für die Verwendung der Systemauthentifizierung konfiguriert ist, müssen die Anmeldeinformationen angegeben werden. In den folgenden Codebeispielen wird davon ausgegangen, dass der Benutzername `my_dcv_user` und das Passwort. `my_password`
Wenn die Authentifizierung fehlschlägt, empfängt die `error` Callback-Funktion ein Fehlerobjekt vom Amazon DCV-Server.
Wenn die Authentifizierung erfolgreich ist, empfängt die `success` Callback-Funktion ein Array von Paaren, das die Sitzungs-ID (`sessionId`) und die Autorisierungstoken (`authToken`) für jede Sitzung enthält, zu der der `my_dcv_user` Benutzer auf dem Amazon DCV-Server eine Verbindung herstellen darf. Das folgende Codebeispiel ruft die Connect-Funktion auf und stellt eine Verbindung zur ersten im Array zurückgegebenen Sitzung her.
**Anmerkung**
Im folgenden Codebeispiel `MY_DCV_USER` ersetzen Sie es durch Ihren eigenen Benutzernamen und `MY_PASSWORD` durch Ihr eigenes Passwort.
```
function onPromptCredentials(auth, challenge) {
// Let's check if in challege we have a username and password request
if (challengeHasField(challenge, "username") && challengeHasField(challenge, "password")) {
auth.sendCredentials({username: MY_DCV_USER, password: MY_PASSWORD})
} else {
// Challenge is requesting something else...
}
}
function challengeHasField(challenge, field) {
return challenge.requiredCredentials.some(credential => credential.name === field);
}
function onError(auth, error) {
console.log("Error during the authentication: " + error.message);
}
// We connect to the first session returned
function onSuccess(auth, result) {
let {sessionId, authToken} = {...result[0]};
connect(sessionId, authToken);
}
```
Connect zum Amazon DCV-Server her. Die `firstFrame` Callback-Methode wird aufgerufen, wenn der erste Frame vom Amazon DCV-Server empfangen wird.
```
function connect (sessionId, authToken) {
console.log(sessionId, authToken);
dcv.connect({
url: serverUrl,
sessionId: sessionId,
authToken: authToken,
divId: "dcv-display",
callbacks: {
firstFrame: () => console.log("First frame received")
}
}).then(function (conn) {
console.log("Connection established!");
connection= conn;
}).catch(function (error) {
console.log("Connection failed with error " + error.message);
});
}
```
## Bonus: Erstellen Sie automatisch ein HTML-Anmeldeformular
Das `challenge` Objekt wird zurückgegeben, wenn die `promptCredentials` Callback-Funktion aufgerufen wird. Es enthält eine Eigenschaft mit dem Namen`requiredCredentials`, bei der es sich um ein Array von Objekten handelt — ein Objekt pro Anmeldeinformationen, die vom Amazon DCV-Server angefordert werden. Jedes Objekt enthält den Namen und den Typ der angeforderten Anmeldeinformationen. Sie können die `requiredCredentials` Objekte `challenge` und verwenden, um automatisch ein HTML-Anmeldeformular zu erstellen.
Das folgende Codebeispiel zeigt Ihnen, wie das geht.
```
let form,
fieldSet;
function submitCredentials (e) {
var credentials = {};
fieldSet.childNodes.forEach(input => credentials[input.id] = input.value);
auth.sendCredentials(credentials);
e.preventDefault();
}
function createLoginForm () {
var submitButton = document.createElement("button");
submitButton.type = "submit";
submitButton.textContent = "Login";
form = document.createElement("form");
fieldSet = document.createElement("fieldset");
form.onsubmit = submitCredentials;
form.appendChild(fieldSet);
form.appendChild(submitButton);
document.body.appendChild(form);
}
function addInput (name) {
var type = name === "password" ? "password" : "text";
var inputField = document.createElement("input");
inputField.name = name;
inputField.id = name;
inputField.placeholder = name;
inputField.type = type;
fieldSet.appendChild(inputField);
}
function onPromptCredentials (_, credentialsChallenge) {
createLoginForm();
credentialsChallenge.requiredCredentials.forEach(challenge => addInput(challenge.name));
}
```
# Arbeiten Sie mit Amazon DCV-Funktionen
Die Verfügbarkeit der Amazon DCV-Funktionen hängt von den für die Amazon DCV-Sitzung konfigurierten Berechtigungen und den Funktionen des Webbrowsers des Kunden ab.
Die Funktionen, die in einer Amazon DCV-Sitzung verfügbar sind, werden durch die für die Sitzung angegebenen Berechtigungen verwaltet. Das bedeutet, dass selbst wenn eine Funktion vom Amazon DCV Web Client SDK unterstützt wird, der Zugriff auf diese Funktion aufgrund der vom Sitzungsadministrator definierten Berechtigungen möglicherweise verhindert wird. Weitere Informationen finden Sie unter [Konfiguration der Amazon DCV-Autorisierung](https://docs.aws.amazon.com/dcv/latest/adminguide/security-authorization.html) im *Amazon DCV-Administratorhandbuch*.
## Grundlegendes zur FeaturesUpdate-Callback-Funktion
Wenn sich die Verfügbarkeit einer Funktion in einer Amazon DCV-Sitzung ändert, benachrichtigt Sie das Amazon DCV Web Client SDK mithilfe der `featuresUpdate` Callback-Funktion, die Sie beim Verbindungsaufbau angeben. Beispiel:
```
featuresUpdate: function (connection, list) {
...
},
```
Die Rückruffunktion benachrichtigt Sie nur über die Funktionen, für die sich die Verfügbarkeit geändert hat. Der `list` Parameter ist ein Array von Zeichenfolgen und enthält nur die Namen der aktualisierten Funktionen. Wenn sich beispielsweise die Verfügbarkeit der Audioeingabefunktion für die Sitzung ändert, umfasst der Parameter nur`["audio-in"]`. Wenn sich zu einem späteren Zeitpunkt die Verfügbarkeit der Funktionen zum Kopieren und Einfügen in der Zwischenablage für die Sitzung ändert, umfasst der Parameter nur `["clipboard-copy", "clipboard-paste"]` Folgendes:
## Umgang mit Feature-Updates
Die `featuresUpdate` Rückruffunktion benachrichtigt Sie nur darüber, dass sich die Verfügbarkeit einer oder mehrerer Funktionen geändert hat. Um zu erfahren, welche Funktionen aktualisiert wurden, müssen Sie das Feature mithilfe der `connection.queryFeature` Methode abfragen. Dies kann jederzeit nach Erhalt der Änderungsmitteilung erfolgen. Diese Methode gibt a zurück`Promise`, das den aktualisierten Status der angeforderten Funktion zurückgibt. Der `status` Wert ist immer verknüpft und hat eine boolesche (`true`\$1`false`) -Eigenschaft namens. `enabled` Einige Funktionen haben möglicherweise zusätzliche Eigenschaften im `status` Wert. Wenn die Verfügbarkeit der Funktion nicht aktualisiert wurde, wird sie abgelehnt.
Der folgende Beispielcode zeigt, wie das geht.
```
// Connection callback called
function featuresUpdate (_, list) {
if (list.length > 0) {
list.forEach((feat) => {
connection.queryFeature(feat).then(status => console.log(feat, "is", status.enabled)));
});
}
}
```
# Verwenden Sie das Amazon DCV Web UI SDK
Das folgende Tutorial zeigt Ihnen, wie Sie sich beim Amazon DCV-Server authentifizieren, eine Verbindung zu ihm herstellen und die `DCVViewer` React-Komponente aus dem Amazon DCV Web UI SDK rendern.
**Topics**
+ [Voraussetzungen](#prerequisites)
+ [Schritt 1: Bereite deine HTML-Seite vor](#prep-html-ui)
+ [Schritt 2: Authentifizieren, verbinden und rendern Sie die `DCVViewer` React-Komponente.](#auth-conn-render)
+ [Aktualisierung von AWS-UI auf Cloudscape Design System](#updateawsuitocloudscape)
## Voraussetzungen
Sie müssen, `React``ReactDOM`, `Cloudscape Design Components React` und installieren. `Cloudscape Design Global Styles` `Cloudscape Design Design Tokens`
```
$ npm i react react-dom @cloudscape-design/components @cloudscape-design/global-styles @cloudscape-design/design-tokens
```
Sie müssten auch herunterladen`Amazon DCV Web Client SDK`. Lesen [Erste Schritte mit dem Amazon DCV Web Client SDK](getting-started.md) Sie die step-by-step Anleitung dazu.
Sie müssen einen Alias für den Import des `dcv` Moduls erstellen, da es sich um eine externe Abhängigkeit für das Amazon DCV Web UI SDK handelt. Wenn Sie beispielsweise Webpack verwenden, um Ihre Web-App zu bündeln, können Sie die Option [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) wie folgt verwenden:
```
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
dcv: path.resolve('path', 'to', 'dcv.js'),
},
},
};
```
Wenn Sie Rollup zum Bündeln verwenden, können Sie [@rollup /plugin-alias](https://www.npmjs.com/package/@rollup/plugin-alias) installieren und es so verwenden:
```
import alias from '@rollup/plugin-alias';
const path = require('path');
module.exports = {
//...
plugins: [
alias({
entries: [
{ find: 'dcv', replacement: path.resolve('path', 'to', 'dcv.js') },
]
})
]
};
```
## Schritt 1: Bereite deine HTML-Seite vor
Auf Ihrer Webseite müssen Sie die erforderlichen JavaScript Module laden und Sie sollten ein `
` HTML-Element mit einem gültigen Wert haben, `id` in dem die Eingabekomponente Ihrer App gerendert wird.
Beispiel:
```
DCV first connection
```
## Schritt 2: Authentifizieren, verbinden und rendern Sie die `DCVViewer` React-Komponente.
In diesem Abschnitt wird gezeigt, wie Sie den Benutzerauthentifizierungsprozess abschließen, wie Sie den Amazon DCV-Server verbinden und wie Sie die `DCVViewer` React-Komponente rendern.
Zunächst aus der `index.js` Datei, dem Import `React` `ReactDOM` und Ihrer `App` Komponente auf oberster Ebene.
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
Rendern Sie den Containerknoten der obersten Ebene Ihrer App.
```
ReactDOM.render(
,
document.getElementById("root")
);
```
Importieren Sie in der `App.js` Datei das Amazon DCV Web Client SDK als ESM-Modul, die `DCVViewer` React-Komponente aus dem Amazon DCV Web UI SDK `React` und das Paket. `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";
```
Im Folgenden finden Sie ein Beispiel, das zeigt, wie Sie sich beim Amazon DCV-Server authentifizieren und die `DCVViewer` React-Komponente aus dem Amazon DCV Web UI SDK rendern, sofern die Authentifizierung erfolgreich war.
```
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 ?
:
);
}
const onError = (_, error) => {
console.log("Error during the authentication: " + error.message);
}
export default App;
```
Die `success` Funktionen `promptCredentials``error`, und sind obligatorische Callback-Funktionen, die im Authentifizierungsprozess definiert werden müssen.
Wenn der Amazon DCV-Server zur Eingabe von Anmeldeinformationen auffordert, empfängt die `promptCredentials` Callback-Funktion die angeforderte Aufforderung zur Eingabe der Anmeldeinformationen vom Amazon DCV-Server. Wenn der Amazon DCV-Server für die Verwendung der Systemauthentifizierung konfiguriert ist, müssen die Anmeldeinformationen in Form eines Benutzernamens und eines Kennworts bereitgestellt werden.
Wenn die Authentifizierung fehlschlägt, empfängt die `error` Callback-Funktion ein Fehlerobjekt vom Amazon DCV-Server.
Wenn die Authentifizierung erfolgreich ist, empfängt die `success` Callback-Funktion ein Array von Paaren, das die Sitzungs-ID (`sessionId`) und die Autorisierungstoken (`authToken`) für jede Sitzung enthält, zu der der Benutzer auf dem Amazon DCV-Server eine Verbindung herstellen darf. Das obige Codebeispiel aktualisiert den React-Status, sodass die `DCVViewer` Komponente bei erfolgreicher Authentifizierung gerendert wird.
Weitere Informationen zu den von dieser Komponente akzeptierten Eigenschaften finden Sie in der [Amazon DCV Web UI SDK-Referenz.](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer)
Weitere Informationen zu selbstsignierten Zertifikaten finden Sie in den [Erläuterungen zur Umleitung](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html) bei selbstsignierten Zertifikaten.
## Aktualisierung von AWS-UI auf Cloudscape Design System
[Ab SDK-Version 1.3.0 haben wir unsere `DCVViewer` Komponente von AWS-UI auf ihre Weiterentwicklung aktualisiert: Cloudscape Design.](https://cloudscape.design/)
Cloudscape verwendet ein anderes visuelles Thema als AWS-UI, aber die zugrunde liegende Codebasis bleibt dieselbe. Daher sollte die Migration Ihrer Anwendung auf der `DCVViewer` Basis von einfach sein. Um zu migrieren, ersetzen Sie die AWS-UI-bezogenen NPM-Pakete, die Sie installiert haben, durch die zugehörigen Cloudscape-Pakete:
| AWS-UI-Paketname | Name des Cloudscape-Pakets |
| --- | --- |
| @awsui /components-react | @cloudscape -design/Komponenten |
| @awsui /global-styles | @cloudscape -design/globale-styles |
| @awsui /collection-hooks | @cloudscape -design/collection-hooks |
| @awsui /design-token | @cloudscape -design/design-token |
Weitere Informationen zur Migration finden Sie auf der [ GitHub AWS-UI-Dokumentationsseite](https://github.com/aws/awsui-documentation).