` 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).