` HTML con un valore valido `id` in cui desideri che l'SDK Amazon DCV Web Client attiri il flusso di contenuti dal server Amazon DCV remoto.
Esempio:
```
DCV first connection
```
## Fase 2: Autenticazione, connessione e acquisizione del primo frame
Questa sezione mostra come completare il processo di autenticazione dell'utente, come connettere il server Amazon DCV e come ricevere il primo frame di contenuto dal server Amazon DCV.
Innanzitutto, dal `index.js` file importa l'SDK Amazon DCV Web Client. Può essere importato sia come modulo Universal Module Definition (UMD), in questo modo:
```
import "./dcvjs/dcv.js"
```
Altrimenti, a partire dalla versione`1.1.0`, può anche essere importato come ECMAScript Module (ESM) dal pacchetto corrispondente, in questo modo:
```
import dcv from "./dcvjs/dcv.js"
```
Definisci le variabili da utilizzare per archiviare l'oggetto Authentication, l'oggetto Connection e l'URL del server Amazon DCV.
```
let auth,
connection,
serverUrl;
```
Al caricamento dello script, registra la versione di Amazon DCV Web Client SDK e, al caricamento della pagina, chiama la `main` funzione.
```
console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);
```
La `main` funzione imposta il livello di registro e avvia il processo di autenticazione.
```
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
}
);
}
```
Le funzioni `promptCredentials``error`, e sono `success` funzioni di callback obbligatorie che devono essere definite nel processo di autenticazione.
Se il server Amazon DCV richiede le credenziali, la funzione di `promptCredentials` callback riceve la richiesta di credenziali dal server Amazon DCV. Se il server Amazon DCV è configurato per utilizzare l'autenticazione del sistema, è necessario fornire le credenziali di accesso. I seguenti esempi di codice presuppongono che il nome utente sia `my_dcv_user` e che la password sia. `my_password`
Se l'autenticazione fallisce, la funzione di `error` callback riceve un oggetto di errore dal server Amazon DCV.
Se l'autenticazione ha esito positivo, la funzione di `success` callback riceve una serie di coppie che include l'id di sessione (`sessionId`) e i token di autorizzazione (`authToken`) per ogni sessione a cui l'`my_dcv_user`utente può connettersi sul server Amazon DCV. Il seguente esempio di codice richiama la funzione di connessione e si connette alla prima sessione restituita nell'array.
**Nota**
Nel seguente esempio di codice, `MY_DCV_USER` sostituitelo con il vostro nome utente e `MY_PASSWORD` con la vostra password.
```
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 al server Amazon DCV. Il metodo di `firstFrame` callback viene chiamato quando il primo frame viene ricevuto dal server Amazon DCV.
```
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: crea automaticamente un modulo di accesso HTML
L'`challenge`oggetto viene restituito quando viene `promptCredentials` chiamata la funzione di callback. Include una proprietà denominata `requiredCredentials` che è una matrice di oggetti, un oggetto per credenziale richiesta dal server Amazon DCV. Ogni oggetto include il nome e il tipo della credenziale richiesta. È possibile utilizzare gli `requiredCredentials` oggetti `challenge` e per creare automaticamente un modulo di accesso HTML.
Il seguente esempio di codice mostra come eseguire questa operazione.
```
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));
}
```