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