` HTML com um elemento válido em `id` que o componente de entrada do seu aplicativo será renderizado.
Por exemplo:
```
DCV first connection
```
## Etapa 2: Autenticar, conectar e renderizar o componente React do `DCVViewer`.
Esta seção mostra como concluir o processo de autenticação do usuário, como conectar o servidor Amazon DCV e como renderizar o componente React do `DCVViewer`.
Primeiro, a partir do arquivo `index.js`, importe `React`, `ReactDOM` e seu componente de nível superior `App`.
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
Renderize o nó de contêiner de nível superior do seu aplicativo.
```
ReactDOM.render(
,
document.getElementById("root")
);
```
No arquivo `App.js`, importe o SDK do cliente web do Amazon DCV como um módulo ESM, o componente React `DCVViewer` do SDK da Interface do Usuário do Amazon DCV, `React` e o pacote `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 seguir está um exemplo que mostra como se autenticar no Servidor Amazon DCV e renderizar o componente React do `DCVViewer` a partir do SDK da Interface da Web do Amazon DCV, desde que a autenticação tenha sido bem-sucedida.
```
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;
```
As funções `promptCredentials`, `error` e `success` são funções obrigatórias de retorno de chamada que devem ser definidas no processo de autenticação.
Se o servidor Amazon DCV solicitar credenciais, a função de retorno de chamada `promptCredentials` receberá o desafio de credencial solicitado do servidor Amazon DCV. Se o servidor Amazon DCV estiver configurado para usar a autenticação do sistema, as credenciais deverão ser fornecidas no formato de um nome de usuário e senha.
Se a autenticação falhar, a função de retorno de chamada `error` receberá um objeto de erro do servidor Amazon DCV.
Se a autenticação for bem-sucedida, a função de retorno de chamada `success` receberá uma matriz de pares que inclui o ID da sessão ( `sessionId` ) e os tokens de autorização ( `authToken` ) para cada sessão à qual o usuário pode se conectar no servidor Amazon DCV. O exemplo de código acima atualiza o estado do React para renderizar o componente `DCVViewer` em caso de autenticação bem-sucedida.
Para saber mais sobre as propriedades aceitas por esse componente, consulte a [referência do SDK da interface de usuário da Web do Amazon DCV](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer).
Para saber mais sobre certificados autoassinados, consulte [Esclarecimentos sobre redirecionamento com certificados autoassinados](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html).
## Atualizar o AWS-UI para o Cloudscape Design System
A partir da versão 1.3.0 do SDK, atualizamos nosso componente `DCVViewer` do AWS-UI para sua evolução: [Cloudscape Design](https://cloudscape.design/).
O Cloudscape usa um tema visual diferente do AWS-UI, mas a base de código subjacente permanece a mesma. Portanto, migrar seu aplicativo com base no `DCVViewer` deve ser fácil. Para migrar, substitua os pacotes NPM relacionados ao AWS-UI que você instalou pelos pacotes associados do Cloudscape:
| Nome do pacote AWS-UI | Nome do pacote 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 obter mais detalhes sobre a migração, consulte a página de documentação da [AWS-UI GitHub ](https://github.com/aws/awsui-documentation).