` HTML avec un code valide à l'`id`endroit où vous souhaitez que le SDK Amazon DCV Web Client trace le flux de contenu depuis le serveur Amazon DCV distant.
Par exemple :
```
DCV first connection
```
## Étape 2 : Authentification, connexion et obtention de la première image
Cette section explique comment terminer le processus d'authentification utilisateur, comment connecter le serveur Amazon DCV et comment recevoir la première trame de contenu du serveur Amazon DCV.
Tout d'abord, à partir du `index.js` fichier, importez le SDK Amazon DCV Web Client. Il peut être importé soit en tant que module UMD (Universal Module Definition), comme suit :
```
import "./dcvjs/dcv.js"
```
Sinon, à partir de la version`1.1.0`, il peut également être importé en tant que ECMAScript module (ESM) à partir du package correspondant, comme suit :
```
import dcv from "./dcvjs/dcv.js"
```
Définissez les variables à utiliser pour stocker l'objet d'authentification, l'objet de connexion et l'URL du serveur Amazon DCV.
```
let auth,
connection,
serverUrl;
```
Lors du chargement du script, enregistrez la version du SDK Amazon DCV Web Client, et lors du chargement de la page, appelez la `main` fonction.
```
console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);
```
La `main` fonction définit le niveau de journalisation et lance le processus d'authentification.
```
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
}
);
}
```
Les fonctions `promptCredentials``error`, et sont `success` des fonctions de rappel obligatoires qui doivent être définies dans le processus d'authentification.
Si le serveur Amazon DCV demande des informations d'identification, la fonction de `promptCredentials` rappel reçoit la demande d'identification du serveur Amazon DCV. Si le serveur Amazon DCV est configuré pour utiliser l'authentification du système, les informations de connexion doivent être fournies. Les exemples de code suivants supposent que le nom d'utilisateur est `my_dcv_user` et que le mot de passe est`my_password`.
Si l'authentification échoue, la fonction de `error` rappel reçoit un objet d'erreur du serveur Amazon DCV.
Si l'authentification réussit, la fonction de `success` rappel reçoit un tableau de couples comprenant l'identifiant de session (`sessionId`) et les jetons d'autorisation (`authToken`) pour chaque session à laquelle l'`my_dcv_user`utilisateur est autorisé à se connecter sur le serveur Amazon DCV. L'exemple de code suivant appelle la fonction de connexion et se connecte à la première session renvoyée dans le tableau.
**Note**
Dans l'exemple de code suivant, remplacez-le `MY_DCV_USER` par votre propre nom d'utilisateur et `MY_PASSWORD` par votre propre mot de passe.
```
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);
}
```
Connectez-vous au serveur Amazon DCV. La méthode de `firstFrame` rappel est appelée lorsque la première trame est reçue du serveur 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);
});
}
```
## Bonus : créez automatiquement un formulaire de connexion HTML
L'`challenge`objet est renvoyé lorsque la fonction de `promptCredentials` rappel est appelée. Il inclut une propriété nommée `requiredCredentials` qui est un tableau d'objets, un objet par identifiant demandé par le serveur Amazon DCV. Chaque objet inclut le nom et le type de l'identifiant demandé. Vous pouvez utiliser les `requiredCredentials` objets `challenge` et pour créer automatiquement un formulaire de connexion HTML.
L'exemple de code suivant vous montre comment procéder.
```
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));
}
```