` 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));
}
```
# Trabajo con características de Amazon DCV
La disponibilidad de las características de Amazon DCV depende de los permisos configurados para la sesión de Amazon DCV y de las capacidades del navegador web del cliente.
Las características que están disponibles en una sesión de Amazon DCV se administran mediante los permisos que se han especificado para la sesión. Esto significa que, incluso si una característica es compatible con el Amazon DCV Web Client SDK, es posible que se impida el acceso a esa característica en función de los permisos definidos por el administrador de la sesión. Para obtener más información, consulte [Configuración de la autorización de Amazon DCV](https://docs.aws.amazon.com/dcv/latest/adminguide/security-authorization.html) en la *Guía del administrador de Amazon DCV*.
## Comprender la función de devolución de llamada de featuresUpdate
Cuando cambia la disponibilidad de una característica en una sesión de Amazon DCV, el Amazon DCV Web Client SDK se lo notifica mediante la función de devolución de llamada `featuresUpdate` que especifique al establecer la conexión. Por ejemplo:
```
featuresUpdate: function (connection, list) {
...
},
```
La función de devolución de llamada solo le notifica las características cuya disponibilidad ha cambiado. El parámetro `list` es una matriz de cadenas e incluye solo los nombres de las características actualizadas. Por ejemplo, si la disponibilidad de la característica de entrada de audio cambia para la sesión, el parámetro solo incluye `["audio-in"]`. Si en un momento posterior, cambia la disponibilidad de las características de copiar y pegar del portapapeles durante la sesión, el parámetro solo incluye `["clipboard-copy", "clipboard-paste"]`.
## Gestión de la actualización de características
La función de devolución de llamada `featuresUpdate` solo le notifica que la disponibilidad de una o varias características ha cambiado. Para saber qué características se actualizaron, debe consultarlas mediante el método `connection.queryFeature`. Esto se puede hacer en cualquier momento después de recibir la notificación de cambio. Este método devuelve una `Promise` que pasa al estado actualizado de la característica solicitada. El valor `status` siempre está asociado y tiene una propiedad booleana (`true` \$1 `false`) llamada `enabled`. Es posible que algunas características tengan propiedades adicionales en el valor `status`. Si la disponibilidad de la característica no se ha actualizado, se rechaza.
El siguiente ejemplo de código muestra cómo hacerlo.
```
// Connection callback called
function featuresUpdate (_, list) {
if (list.length > 0) {
list.forEach((feat) => {
connection.queryFeature(feat).then(status => console.log(feat, "is", status.enabled)));
});
}
}
```
# Uso del Amazon DCV Web UI SDK
El siguiente tutorial muestra cómo autenticarse en el servidor Amazon DCV, conectarse a él y representar el componente React de `DCVViewer` desde el Amazon DCV Web UI SDK.
**Topics**
+ [Requisitos previos](#prerequisites)
+ [Paso 1: Preparar la página HTML](#prep-html-ui)
+ [Paso 2: Autenticar, conectar y representar el componente React de `DCVViewer`.](#auth-conn-render)
+ [Actualizar de AWS-UI a Cloudscape Design System](#updateawsuitocloudscape)
## Requisitos previos
Debe instalar `React` , `ReactDOM` , `Cloudscape Design Components React` , `Cloudscape Design Global Styles` y `Cloudscape Design Design Tokens` .
```
$ npm i react react-dom @cloudscape-design/components @cloudscape-design/global-styles @cloudscape-design/design-tokens
```
También debería descargar `Amazon DCV Web Client SDK` . Consulte [Introducción a Amazon DCV Web Client SDK](getting-started.md) la step-by-step guía sobre cómo hacerlo.
Debe crear un alias para importar el módulo `dcv`, ya que es una dependencia externa del Amazon DCV Web UI SDK. Por ejemplo, si está utilizando una paquete web para agrupar su aplicación web, puede utilizar la opción [ resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) del siguiente modo:
```
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
dcv: path.resolve('path', 'to', 'dcv.js'),
},
},
};
```
Si está utilizando acumulación para agrupar, puede instalar [ @rollup/plugin-alias](https://www.npmjs.com/package/@rollup/plugin-alias) y utilizarlo de este modo:
```
import alias from '@rollup/plugin-alias';
const path = require('path');
module.exports = {
//...
plugins: [
alias({
entries: [
{ find: 'dcv', replacement: path.resolve('path', 'to', 'dcv.js') },
]
})
]
};
```
## Paso 1: Preparar la página HTML
En su página web, debe cargar los JavaScript módulos necesarios y debe tener un elemento `
` HTML con un valor válido en el que `id` se renderizará el componente de entrada de su aplicación.
Por ejemplo:
```
DCV first connection
```
## Paso 2: Autenticar, conectar y representar el componente React de `DCVViewer`.
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 representar el componente React de `DCVViewer`.
En primer lugar, desde el archivo `index.js`, importe `React` , `ReactDOM` y el `App` componente de nivel superior .
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
Represente el nodo de contenedor de nivel superior de la aplicación.
```
ReactDOM.render(
,
document.getElementById("root")
);
```
En el archivo `App.js`, importe el Amazon DCV Web Client SDK como módulo ESM, el componente React de `DCVViewer` desde el Amazon DCV Web UI SDK, `React` y el paquete `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";
```
A continuación se muestra un ejemplo que muestra cómo autenticarse en el servidor Amazon DCV y representar el componente React de `DCVViewer` desde el Amazon DCV Web UI SDK, siempre que la autenticación se haya realizado correctamente.
```
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;
```
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 en forma de nombre de usuario y contraseña.
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 esté autorizado a conectarse en el servidor Amazon DCV. El ejemplo de código anterior actualiza el estado React para representar el componente `DCVViewer` si la autenticación se realiza correctamente.
Para obtener más información sobre las propiedades que acepta este componente, consulte la [referencia del Amazon DCV Web UI SDK](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer).
Para obtener más información sobre certificados autofirmados, consulte las [ Redirection clarifications with self-signed certificates](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html).
## Actualizar de AWS-UI a Cloudscape Design System
A partir del SDK versión 1.3.0 actualizamos nuestro componente `DCVViewer` desde AWS-UI hasta su evolución: [Cloudscape Design](https://cloudscape.design/).
Cloudscape utiliza un tema visual diferente al de AWS-UI, pero la base de código subyacente sigue siendo la misma. Por tanto, debería resultar fácil la migración de una aplicación basada en el `DCVViewer`. Para migrar, sustituya los paquetes NPM relacionados con AWS-UI que haya instalado por los paquetes de Cloudscape asociados:
| Nombre del paquete de AWS-UI | Nombre del paquete de Cloudscape |
| --- | --- |
| @awsui/components-react | @cloudscape-design/components |
| @awsui/global-styles | @cloudscape-design/global-styles |
| @awsui/collection-hooks | @cloudscape-design/collection-hooks |
| @awsui/design-tokens | @cloudscape-design/design-tokens |
Para obtener más información sobre la migración, consulte la página de documentación de [AWS-UI GitHub ](https://github.com/aws/awsui-documentation).