` 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));
}
```