` HTML con un `id` lugar válido en el que desee que el SDK de Amazon DCV Web Client dibuje el flujo de contenido del servidor remoto de Amazon DCV.
Por ejemplo:
```
DCV first connection
```
## Paso 2: Autenticar, conectar y obtener el primer fotograma
En esta sección se muestra cómo completar el proceso de autenticación del usuario, cómo conectar el servidor Amazon DCV y cómo recibir el primer fotograma de contenido desde el servidor Amazon DCV.
Primero, desde el archivo `index.js`, importe el Amazon DCV Web Client SDK. Se puede importar como módulo de Definición de módulo universal (UMD) del siguiente modo:
```
import "./dcvjs/dcv.js"
```
De lo contrario, a partir de la versión`1.1.0`, también se puede importar como un ECMAScript módulo (ESM) desde el paquete correspondiente, de la siguiente manera:
```
import dcv from "./dcvjs/dcv.js"
```
Defina las variables que se utilizarán para almacenar el objeto de autenticación, el objeto de conexión y la URL del servidor Amazon DCV.
```
let auth,
connection,
serverUrl;
```
Al cargar el script, registre la versión del Amazon DCV Web Client SDK y, al cargar la página, llame a la función `main`.
```
console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);
```
La función `main` establece el nivel de registro e inicia el proceso de autenticación.
```
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
}
);
}
```
Las funciones `promptCredentials`, `error` y `success` son funciones de devolución de llamada obligatorias que deben definirse en el proceso de autenticación.
Si el servidor Amazon DCV solicita credenciales, la función de devolución de llamada `promptCredentials` recibe la impugnación de credenciales solicitada del servidor Amazon DCV. Si el servidor Amazon DCV está configurado para utilizar la autenticación del sistema, se deben proporcionar las credenciales de inicio de sesión. En los siguientes ejemplos de código se da por sentado que el nombre de usuario es `my_dcv_user` y que la contraseña es `my_password`.
Si la autenticación produce error, la función de devolución de llamada `error` recibe un objeto de error del servidor Amazon DCV.
Si la autenticación se realiza correctamente, la función de devolución de llamada `success` recibe una matriz de pares que incluye el identificador de sesión (`sessionId`) y los tokens de autorización (`authToken`) para cada sesión a la que el usuario de `my_dcv_user` esté autorizado a conectarse en el servidor Amazon DCV. El siguiente ejemplo de código llama a la función connect y se conecta a la primera sesión devuelta en la matriz.
**nota**
En el siguiente ejemplo de código, sustituya `MY_DCV_USER` por su propio nombre de usuario y `MY_PASSWORD` por su propia contraseña.
```
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);
}
```
Conéctese al servidor Amazon DCV. Se llama al método de devolución de llamada `firstFrame` cuando se recibe el primer fotograma del servidor 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);
});
}
```
## Extra: crear automáticamente un formulario de inicio de sesión HTML
El objeto `challenge` se devuelve cuando se llama a la función de devolución de llamada `promptCredentials`. Incluye una propiedad denominada `requiredCredentials` que es una matriz de objetos, un objeto por credencial solicitada por el servidor Amazon DCV. Cada objeto incluye el nombre y el tipo de la credencial solicitada. Puede utilizar los objetos `challenge` y `requiredCredentials` para crear automáticamente un formulario de inicio de sesión HTML.
El siguiente ejemplo de código muestra cómo hacerlo.
```
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));
}
```