` HTML com um elemento válido `id` onde você deseja que o Amazon DCV Web Client SDK desenhe o fluxo de conteúdo do servidor Amazon DCV remoto.
Por exemplo:
```
DCV first connection
```
## Etapa 2: Autenticar, conectar e obter o primeiro quadro
Esta seção mostra como concluir o processo de autenticação do usuário, como conectar o servidor Amazon DCV e como receber o primeiro quadro de conteúdo do servidor Amazon DCV.
Primeiro, a partir do arquivo `index.js`, importe o SDK do cliente web do Amazon DCV. Ele pode ser importado como um módulo de Definição de Módulo Universal (UMD), da seguinte forma:
```
import "./dcvjs/dcv.js"
```
Caso contrário, a partir da versão`1.1.0`, ele também pode ser importado como um ECMAScript Módulo (ESM) do pacote correspondente, da seguinte forma:
```
import dcv from "./dcvjs/dcv.js"
```
Defina as variáveis a serem usadas para armazenar o objeto Authentication, o objeto Connection e o URL do servidor Amazon DCV.
```
let auth,
connection,
serverUrl;
```
No carregamento do script, registre a versão do SDK do cliente web do Amazon DCV e, no carregamento da página, chame a função `main`.
```
console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);
```
A função `main` define o nível do log e inicia o processo de autenticação.
```
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
}
);
}
```
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 de login deverão ser fornecidas. Os exemplos de código a seguir presumem que o nome de usuário é `my_dcv_user` e que a senha é `my_password`.
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 `my_dcv_user` pode se conectar no servidor Amazon DCV. O exemplo de código a seguir chama a função connect e se conecta à primeira sessão retornada na matriz.
**nota**
No exemplo de código a seguir, substitua `MY_DCV_USER` por seu próprio nome de usuário e `MY_PASSWORD` por sua própria senha.
```
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);
}
```
Conecte-se ao servidor Amazon DCV. O método de retorno de chamada `firstFrame` será chamado quando o primeiro quadro for recebido do 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);
});
}
```
## Bônus: crie automaticamente um formulário de login em HTML
O objeto `challenge` é retornado quando a função de retorno de chamada `promptCredentials` é chamada. Ele inclui uma propriedade chamada `requiredCredentials` que é uma matriz de objetos - um objeto por credencial que é solicitado pelo servidor Amazon DCV. Cada objeto inclui o nome e o tipo da credencial solicitada. Você pode usar os objetos `challenge` e `requiredCredentials` para criar automaticamente um formulário de login em HTML.
O exemplo de código a seguir mostra como fazer isso.
```
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));
}
```