` 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));
}
```
# Travaillez avec les fonctionnalités d'Amazon DCV
La disponibilité des fonctionnalités Amazon DCV dépend des autorisations configurées pour la session Amazon DCV et des fonctionnalités du navigateur Web du client.
Les fonctionnalités disponibles dans une session Amazon DCV sont gérées par les autorisations spécifiées pour la session. Cela signifie que même si une fonctionnalité est prise en charge par le SDK Amazon DCV Web Client, l'accès à cette fonctionnalité peut être empêché en fonction des autorisations définies par l'administrateur de session. Pour plus d'informations, consultez [la section Configuration de l'autorisation Amazon DCV](https://docs.aws.amazon.com/dcv/latest/adminguide/security-authorization.html) dans le guide de l'*administrateur Amazon DCV*.
## Comprendre la fonction de rappel FeaturesUpdate
Lorsque la disponibilité d'une fonctionnalité dans une session Amazon DCV change, le SDK du client Web Amazon DCV vous en informe à l'aide de la fonction de `featuresUpdate` rappel que vous spécifiez au moment de l'établissement de la connexion. Par exemple :
```
featuresUpdate: function (connection, list) {
...
},
```
La fonction de rappel ne vous informe que des fonctionnalités dont la disponibilité a changé. Le `list` paramètre est un tableau de chaînes qui inclut uniquement les noms des fonctionnalités mises à jour. Par exemple, si la disponibilité de la fonctionnalité d'entrée audio change au cours de la session, le paramètre inclut uniquement`["audio-in"]`. Si, ultérieurement, la disponibilité des fonctionnalités de copier-coller du presse-papiers change au cours de la session, le paramètre inclut uniquement`["clipboard-copy", "clipboard-paste"]`.
## Gestion des mises à jour des fonctionnalités
La fonction de `featuresUpdate` rappel vous indique uniquement que la disponibilité d'une ou de plusieurs fonctionnalités a changé. Pour savoir quelles fonctionnalités ont été mises à jour, vous devez interroger la fonctionnalité à l'aide de la `connection.queryFeature` méthode. Cela peut être fait à tout moment après réception de la notification de modification. Cette méthode renvoie un `Promise` qui correspond à l'état mis à jour de la fonctionnalité demandée. La `status` valeur est toujours associée et possède une propriété booléenne (`true`\$1`false`) appelée. `enabled` Certaines fonctionnalités peuvent avoir des propriétés supplémentaires dans la `status` valeur. Si la disponibilité de la fonctionnalité n'a pas été mise à jour, elle est rejetée.
L'exemple de code suivant montre comment procéder.
```
// Connection callback called
function featuresUpdate (_, list) {
if (list.length > 0) {
list.forEach((feat) => {
connection.queryFeature(feat).then(status => console.log(feat, "is", status.enabled)));
});
}
}
```
# Utiliser le SDK d'interface utilisateur Web Amazon DCV
Le didacticiel suivant explique comment s'authentifier auprès du serveur Amazon DCV, s'y connecter et afficher le composant `DCVViewer` React à partir du SDK Amazon DCV Web UI.
**Topics**
+ [Conditions préalables](#prerequisites)
+ [Étape 1 : Préparez votre page HTML](#prep-html-ui)
+ [Étape 2 : Authentifier, connecter et afficher le composant `DCVViewer` React.](#auth-conn-render)
+ [Mise à jour d'AWS-UI vers le système de conception Cloudscape](#updateawsuitocloudscape)
## Conditions préalables
Vous devez installer`React`, `ReactDOM``Cloudscape Design Components React`, `Cloudscape Design Global Styles` et`Cloudscape Design Design Tokens`.
```
$ npm i react react-dom @cloudscape-design/components @cloudscape-design/global-styles @cloudscape-design/design-tokens
```
Vous devrez également le télécharger`Amazon DCV Web Client SDK`. Consultez [Commencer à utiliser le SDK Amazon DCV Web Client](getting-started.md) le step-by-step guide sur la façon de procéder.
Vous devez créer un alias pour importer le `dcv` module, car il s'agit d'une dépendance externe pour le SDK Amazon DCV Web UI. Par exemple, si vous utilisez webpack pour regrouper votre application Web, vous pouvez utiliser l'option [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) comme suit :
```
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
dcv: path.resolve('path', 'to', 'dcv.js'),
},
},
};
```
Si vous utilisez le rollup pour le regroupement, vous pouvez installer [@rollup /plugin-alias](https://www.npmjs.com/package/@rollup/plugin-alias) et l'utiliser comme suit :
```
import alias from '@rollup/plugin-alias';
const path = require('path');
module.exports = {
//...
plugins: [
alias({
entries: [
{ find: 'dcv', replacement: path.resolve('path', 'to', 'dcv.js') },
]
})
]
};
```
## Étape 1 : Préparez votre page HTML
Dans votre page Web, vous devez charger les JavaScript modules requis et vous devriez avoir un élément `
` HTML avec un code valide `id` où le composant d'entrée de votre application sera affiché.
Par exemple :
```
DCV first connection
```
## Étape 2 : Authentifier, connecter et afficher le composant `DCVViewer` React.
Cette section explique comment terminer le processus d'authentification des utilisateurs, comment connecter le serveur Amazon DCV et comment afficher le composant `DCVViewer` React.
Tout d'abord, à partir du `index.js` fichier, de l'import `React` `ReactDOM` et de votre `App` composant de premier niveau.
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
Affichez le nœud de conteneur de niveau supérieur de votre application.
```
ReactDOM.render(
,
document.getElementById("root")
);
```
Dans le `App.js` fichier, importez le SDK Amazon DCV Web Client en tant que module ESM, le composant `DCVViewer` React du SDK Amazon DCV Web UI et le package. `React` `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";
```
Voici un exemple montrant comment s'authentifier auprès du serveur Amazon DCV et afficher le composant `DCVViewer` React à partir du SDK Amazon DCV Web UI, à condition que l'authentification soit réussie.
```
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;
```
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 d'identification doivent être fournies sous la forme d'un nom d'utilisateur et d'un mot de passe.
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'utilisateur est autorisé à se connecter sur le serveur Amazon DCV. L'exemple de code ci-dessus met à jour l'état React pour afficher le `DCVViewer` composant en cas d'authentification réussie.
Pour en savoir plus sur les propriétés acceptées par ce composant, consultez la référence du [SDK Amazon DCV Web UI](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer).
Pour en savoir plus sur les certificats auto-signés, consultez les [clarifications relatives à la redirection avec les certificats auto-signés](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html).
## Mise à jour d'AWS-UI vers le système de conception Cloudscape
[À partir de la version 1.3.0 du SDK, nous avons mis à jour notre `DCVViewer` composant d'AWS-UI à son évolution : Cloudscape Design.](https://cloudscape.design/)
Cloudscape utilise un thème visuel différent de celui d'AWS-UI, mais la base de code sous-jacente reste la même. Ainsi, la migration de votre application basée sur le `DCVViewer` devrait être facile. Pour effectuer la migration, remplacez les packages NPM liés à AWS-UI que vous avez installés par les packages Cloudscape associés :
| Nom du package AWS-UI | Nom du package Cloudscape |
| --- | --- |
| @awsui /components-react | @cloudscape -design/composants |
| @awsui /global-styles | @cloudscape -design/global-styles |
| @awsui /collection-hooks | @cloudscape -design/collection-hooks |
| @awsui /design-tokens | @cloudscape -design/design-tokens |
Pour plus de détails sur la migration, veuillez consulter la page de documentation d'[AWS-UI GitHub ](https://github.com/aws/awsui-documentation).