` HTML con un valore valido `id` in cui verrà visualizzato il componente di ingresso della tua app.
Esempio:
```
DCV first connection
```
## Passaggio 2: autenticare, connettere e renderizzare il componente `DCVViewer` React.
Questa sezione mostra come completare il processo di autenticazione degli utenti, come connettere il server Amazon DCV e come eseguire il rendering del componente `DCVViewer` React.
Innanzitutto, dal `index.js` file, dall'importazione `React` `ReactDOM` e dal `App` componente di primo livello.
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
Esegui il rendering del nodo contenitore di primo livello della tua app.
```
ReactDOM.render(
,
document.getElementById("root")
);
```
Nel `App.js` file, importa l'SDK Amazon DCV Web Client come modulo ESM, il componente `DCVViewer` React dall'SDK dell'interfaccia utente Web di Amazon DCV e il pacchetto. `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";
```
Di seguito è riportato un esempio che mostra come eseguire l'autenticazione con Amazon DCV Server ed eseguire il rendering del componente `DCVViewer` React dall'SDK dell'interfaccia utente Web di Amazon DCV, a condizione che l'autenticazione abbia avuto esito positivo.
```
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;
```
Le funzioni `promptCredentials``error`, e sono `success` funzioni di callback obbligatorie che devono essere definite nel processo di autenticazione.
Se il server Amazon DCV richiede le credenziali, la funzione di `promptCredentials` callback riceve la richiesta di credenziali dal server Amazon DCV. Se il server Amazon DCV è configurato per utilizzare l'autenticazione del sistema, le credenziali devono essere fornite sotto forma di nome utente e password.
Se l'autenticazione fallisce, la funzione di `error` callback riceve un oggetto di errore dal server Amazon DCV.
Se l'autenticazione ha esito positivo, la funzione di `success` callback riceve una serie di coppie che include l'id di sessione (`sessionId`) e i token di autorizzazione (`authToken`) per ogni sessione a cui l'utente può connettersi sul server Amazon DCV. L'esempio di codice riportato sopra aggiorna lo stato di React per rendere il `DCVViewer` componente in caso di autenticazione corretta.
Per ulteriori informazioni sulle proprietà accettate da questo componente, consulta il riferimento all'[SDK dell'interfaccia utente Web di Amazon DCV](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer).
Per ulteriori informazioni sui certificati autofirmati, consulta i [chiarimenti sul reindirizzamento](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html) con certificati autofirmati.
## Aggiornamento da AWS-UI a Cloudscape Design System
[A partire dalla versione SDK 1.3.0 abbiamo aggiornato il nostro `DCVViewer` componente da AWS-UI alla sua evoluzione: Cloudscape Design.](https://cloudscape.design/)
Cloudscape utilizza un tema visivo diverso rispetto a AWS-UI, ma la base di codice sottostante rimane la stessa. Pertanto, la migrazione dell'applicazione basata su dovrebbe essere semplice. `DCVViewer` Per migrare, sostituisci i pacchetti NPM relativi all'AWS-UI che hai installato con i pacchetti Cloudscape associati:
| Nome del pacchetto AWS-UI | Nome del pacchetto Cloudscape |
| --- | --- |
| @awsui /components-react | @cloudscape -design/componenti |
| @awsui /global-styles | @cloudscape -design/global-styles |
| @awsui /collection-hooks | @cloudscape -design/collezione-ganci |
| @awsui /design-tokens | @cloudscape -design/design-tokens |
Per ulteriori dettagli sulla migrazione, consulta la pagina della documentazione di [AWS-UI GitHub ](https://github.com/aws/awsui-documentation).